Your address will show here +12 34 56 78

Home Forums WP RESIDENCE – Real Estate WordPress Theme FORUM Properties List – Default View changed to List (how to change in code) – GRID / LIST

This topic contains 9 replies, has 5 voices, and was last updated by  Anna 2 years, 3 months ago.

  • Author
    Posts
  • #46005

    Anna
    Keymaster

    In line 52 at property_unit.php file just add this code around line 53

    $col_class = 'col-md-12';

    CSS to add to style the list view for less than 960 screen resolution (add in child theme)

    @media only screen and (max-width: 959px){

    .listing_wrapper.col-md-12 > .property_listing .listing-cover {
    height: 148px!important;
    width: 239px!important;
    }

    .listing_wrapper.col-md-12 > .property_listing {
    width: 269px;
    height: 420px;
    }

    .listing_wrapper.col-md-12 .property_listing h4 {
    padding: 0px 13px;
    margin-top: 19px;
    margin-bottom: 6px;
    float: left;
    width: 100%;
    }

    .listing_wrapper.col-md-12 .property_location {
    font-size: 13px;
    margin: 0px 0px 10px 13px;
    color: #99a3b1;
    line-height: 1.6em;
    }

    .listing_wrapper.col-md-12 .property_listing .listing_prop_details {
    margin: 0px 13px;
    line-height: 22px;
    width: 100%;
    margin-bottom: 7px;
    font-weight: 300;
    position: absolute;
    bottom: 35px;
    left: 0px;
    }

    .col-md-9 .listing_wrapper.col-md-12 .property_listing .listing_unit_price_wrapper{
    position: absolute;
    bottom: 0px;
    left: 6.5%!important;
    width: 87%;
    height: 40px;
    border-top: 1px solid #f0f0f0;
    color: #3C90BE;
    font-size: 16px;
    padding-top: 10px;
    line-height: 20px;
    }

    .listing_wrapper.col-md-12 .property_listing .listing_details {
    padding-left: 0px;
    margin-top: 5px;
    }

    .listing_wrapper.col-md-12 > .property_listing .listing-cover-plus {
    left: 122px;
    top: 72px;
    }

    }

    • This topic was modified 3 years, 3 months ago by  Anna.
    • This topic was modified 3 years, 2 months ago by  Anna.
    • This topic was modified 3 years ago by  Anna.
    • This topic was modified 2 years, 11 months ago by  Anna.
    • This topic was modified 2 years, 11 months ago by  Anna.
    • This topic was modified 2 years, 11 months ago by  Anna.
    • This topic was modified 2 years, 8 months ago by  Anna.
    • This topic was modified 2 years, 8 months ago by  Anna.
    • This topic was modified 2 years, 8 months ago by  Anna.
    • This topic was modified 2 years, 8 months ago by  Anna.
  • #100649

    fabrizio-ia
    Participant

    hi Anna,

    I tried this code but it does not work.
    the file in my version is called: property_list.php not property-list.php

    can I have some more details on how to solve?

    thanks and a nice day

    • This reply was modified 2 years, 11 months ago by  fabrizio-ia.
    • #100669

      pmaldonado
      Participant

      it’s in property_unit.php (before the “?>” on line 53)

    • #100671

      pmaldonado
      Participant

      by the way, doing this totally screws the grid and list view buttons, and they stop working like it was in the original way.

      edit: actually the original way is also screwed.

      • This reply was modified 2 years, 11 months ago by  pmaldonado.
  • #100677

    pmaldonado
    Participant

    So after adding $col_class = 'col-md-12'; in line 52 at property_unit.php … i did this:

    1) in /templates/property_list_filters.php i changed the initial selected icon to be the list view.. if that is not done, the list view would be showing as default but the icons show if it was the grid view selected. In the php file line 196 deleted the class icon_selected and added it to the list view id.

     <div class="listing_filter_select listing_filter_views">
                <div id="grid_view"> 
                    <i class="fa fa-th"></i>
                </div>
            </div>
    
            <div class="listing_filter_select listing_filter_views">
                 <div id="list_view" class="icon_selected">
                     <i class="fa fa-bars"></i>                   
                 </div>
            </div>

    2) The script still works in a wrong way as it, swaps the icon selected between grid view o list view, even if you’re not changing views. To fix this just added some if statements in /js/control.js around line 1224 (i have modified this file so i really don’t know if the line is correct but it says ///////grid to list view before the code.

     $('#list_view').click(function(){
        if ($(this).hasClass('icon_selected')) {  
        }
        else{
             $(this).toggleClass('icon_selected');
             $('#listing_ajax_container').addClass('ajax12');
             $('#grid_view').toggleClass('icon_selected');      
             $('.listing_wrapper').hide().removeClass('col-md-4').removeClass('col-md-3').addClass('col-md-12').fadeIn(400) ;
             $('.the_grid_view').fadeOut(10,function() {
                $('.the_list_view').fadeIn(300);
             });
        }
         })
    
         
         
         $('#grid_view').click(function(){
            if ($(this).hasClass('icon_selected')) {  
            }
            else{
                   var class_type;
             class_type = $('.listing_wrapper:first-of-type').attr('data-org');
             $(this).toggleClass('icon_selected');
             $('#listing_ajax_container').removeClass('ajax12');
             $('#list_view').toggleClass('icon_selected');
             $('.listing_wrapper ').hide().removeClass('col-md-12').addClass('col-md-'+class_type).fadeIn(400); 
             $('.the_list_view').fadeOut(10,function(){
                  $('.the_grid_view').fadeIn(300);
             });
            }
         })
  • #100695

    fabrizio-ia
    Participant

    pmaldonado thanks!

    great job… now it works!

    even though I did not have to change the control.js
    the simple exchange of class icons seems to work perfectly

  • #100697

    Anna
    Keymaster

    Hi guys,

    Thank you very much for the follow up. I apologize for missing to add the right file. I corrected now the initial post.

    Best,
    Anna

  • #101759

    mmatos
    Participant

    It works great guys, the only problem is that when I set

    $col_class = 'col-md-12';

    the listing doesn’t resolve to grid when I view them on a mobil device 🙁

    Is there a way to have the default “list view” without having to set this line?

    Greetings!

    mmatos

  • #104694

    fspiluttini
    Participant

    Excuse me, but do not understand, on line 52, is an array… ?

    $taxcateg_include = array();

    foreach($current_adv_filter_search_action as $key=>$value){
    $taxcateg_include[]=sanitize_title($value);
    }

    $categ_array=array(
    ‘taxonomy’ => ‘property_action_category’,
    ‘field’ => ‘slug’,
    ‘terms’ => $taxcateg_include
    );
    $col_class = ‘col-md-12’;
    $current_adv_filter_search_label= $current_adv_filter_search_action[0];
    }else{
    $current_adv_filter_search_label=__(‘All Actions’,’wpestate’);
    }

  • #116819

    Anna
    Keymaster

    Hi

    This is an option in Theme Options now. No need for custom code.

    Thank you
    Anna

You must be logged in to reply to this topic.