1. Home
  2. Docs
  3. Design
  4. Layouts

Layouts

When you show listings on your site, the most common option you will set is the layout. You will find a layout option in each of the following design elements that are used to display listings on your site.

  • GD Listings
  • GD Loop
  • GD Linked Posts
  • GD Recently Viewed

When you are using a widget, you will find the option for layout in the advanced settings:

First click the blue button:

Next, find the Layout option and select the default layout you want to present:

When you are using a shortcode for one of the elements listed above, the options are:

[gd_loop layout="0"] //List format
[gd_loop layout="1"] //Grid 1
[gd_loop layout="2"] //Grid 2
[gd_loop layout="3"] //Grid 3
[gd_loop layout="4"] //Grid 4
[gd_loop layout="5"] //Grid 5

Customize

Learn more about customizing with snippets on our customizing doc.

Disable one or more layouts sitewide with a PHP Snippet

You can disable a layout on your site with the following snippet:

add_filter('geodir_layout_options','_my_remove_layout_options',10,2);
function _my_remove_layout_options($layouts,$frontend){
if($frontend){
unset($layouts["1"]);
}
return $layouts;
}

Hide the layout select with CSS

If you want to hide the layout select on archive and search pages you can use the following CSS:

Be sure to target the CSS to the page where you want to hide the layout select.

.geodir-list-view-select {
    display: none!important;
}

Target a specific layout with CSS

Each of these takes the layout param; use the element settings to choose the layout you want for the listings.

CSS targeted to specific layouts

Here is a scaffold you can use to target different layouts:

/*Apply Stylings for List View Layout*/
.geodir-listview li .gd-list-item-right {
    background-color:#e8e8e8; /*Background Color*/
}

/*Apply Stylings for Grid 2 Layout*/
.geodir-gridview.gridview_onehalf li{
    background-color:#e8e8e8; /*Background Color*/
}

/*Apply Stylings for Grid 3 Layout*/
.geodir-gridview.gridview_onethird li{
    background-color:#e8e8e8; /*Background Color*/    
}

/*Apply Stylings for Grid 4 Layout*/
.geodir-gridview.gridview_onefourth li{
    background-color:#e8e8e8; /*Background Color*/    
}

/*Apply Stylings for Grid 5 Layout*/
.geodir-gridview.gridview_onefifth li{
    background-color:#e8e8e8; /*Background Color*/    
}
Was this article helpful to you? Yes No 1