{"id":821,"date":"2019-06-08T15:57:18","date_gmt":"2019-06-08T15:57:18","guid":{"rendered":"https:\/\/wpgeodirectory.com\/docs-v2\/?post_type=docs&#038;p=821"},"modified":"2019-10-18T23:16:07","modified_gmt":"2019-10-18T23:16:07","slug":"layouts","status":"publish","type":"docs","link":"https:\/\/wpgeodirectory.com\/docs-v2\/design\/layouts\/","title":{"rendered":"List and Grid Layouts"},"content":{"rendered":"<p>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.<\/p>\n<ul>\n<li>GD Listings<\/li>\n<li>GD Loop<\/li>\n<li>GD Linked Posts<\/li>\n<li>GD Recently Viewed<\/li>\n<\/ul>\n<p>When you are using a widget, you will find the option for layout in the advanced settings:<\/p>\n<p>First click the blue button:<\/p>\n<p><a href=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2019\/06\/advanced-settings.jpg\"><img src=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2019\/06\/advanced-settings.jpg\" alt=\"\" width=\"126\" height=\"42\" class=\"alignnone size-full wp-image-822\" \/><\/a><\/p>\n<p>Next, find the Layout option and select the default layout you want to present:<\/p>\n<p><a href=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2019\/06\/layout.jpg\"><img src=\"http:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2019\/06\/layout.jpg\" alt=\"\" width=\"416\" height=\"257\" class=\"alignnone size-full wp-image-823\" srcset=\"https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2019\/06\/layout.jpg 416w, https:\/\/wpgeodirectory.com\/docs-v2\/wp-content\/uploads\/sites\/23\/2019\/06\/layout-300x185.jpg 300w\" sizes=\"(max-width: 416px) 100vw, 416px\" \/><\/a><\/p>\n<p>When you are using a shortcode for one of the elements listed above, the options are:<\/p>\n<pre><code class='php'>\r\n[gd_loop layout=&quot;0&quot;] \/\/List format\r\n[gd_loop layout=&quot;1&quot;] \/\/Grid 1\r\n[gd_loop layout=&quot;2&quot;] \/\/Grid 2\r\n[gd_loop layout=&quot;3&quot;] \/\/Grid 3\r\n[gd_loop layout=&quot;4&quot;] \/\/Grid 4\r\n[gd_loop layout=&quot;5&quot;] \/\/Grid 5\r\n<\/code><\/pre>\n<h3>Customize<\/h3>\n<p>Learn more about customizing with snippets on our <a href=\"https:\/\/wpgeodirectory.com\/docs-v2\/faq\/customizing\/\" rel=\"noopener noreferrer\" target=\"_blank\">customizing doc<\/a>.<\/p>\n<h4>Disable one or more layouts sitewide with a PHP Snippet<\/h4>\n<p>You can disable a layout on your site with the following snippet:<\/p>\n<pre><code class='php'>\r\nfunction gd_snippet_240619_layout_options( $layouts, $frontend ) {\r\n\tif ( $frontend ) {\r\n\t\t\/\/unset( $layouts[&quot;0&quot;] ); \/\/ Hide List view\r\n\t\tunset( $layouts[&quot;1&quot;] ); \/\/ Hide Grid View (One Column)\r\n\t\t\/\/unset( $layouts[&quot;2&quot;] ); \/\/ Hide Grid View (Two Columns)\r\n\t\t\/\/unset( $layouts[&quot;3&quot;] ); \/\/ Hide Grid View (Three Columns)\r\n\t\t\/\/unset( $layouts[&quot;4&quot;] ); \/\/ Hide Grid View (Four Columns)\r\n\t\t\/\/unset( $layouts[&quot;5&quot;] ); \/\/ Hide Grid View (Five Columns)\r\n\t}\r\n\r\n\treturn $layouts;\r\n}\r\nadd_filter( 'geodir_layout_options', 'gd_snippet_240619_layout_options', 10, 2 );\r\n<\/code><\/pre>\n<h4>Hide the layout select with CSS<\/h4>\n<p>If you want to hide the layout select on archive and search pages you can use the following CSS:<\/p>\n<p>Be sure to target the CSS to the page where you want to hide the layout select.<\/p>\n<pre><code class='css'>\r\n.geodir-list-view-select {\r\n    display: none!important;\r\n}\r\n<\/code><\/pre>\n<h4>No Listings Found<\/h4>\n<p>If an archive page has an empty set of results it will display &#8220;No listings were found matching your selection. Something missing? Why not add a listing?.&#8221;<\/p>\n<p>It is possible to change the text by translating the text in the language of your site.<\/p>\n<p>It is also possible to hide the text completely, or to disable the link on the text.<\/p>\n<pre><code class='css'>\r\n\/*Hide the gd_loop no listings found message*\/\r\ndiv.geodir-loop-container p.geodir-info {\r\n    display: none!important;\r\n}\r\n\/*Change the link color and turn off clicking*\/\r\ndiv.geodir-loop-container p.geodir-info a {\r\n    color: #000000!important;\r\n    pointer-events: none;\r\n}\r\n\/*Hide only the link portion of the text &#8211; use translation to change the rest*\/\r\ndiv.geodir-loop-container p.geodir-info a {\r\n    display: none!important;\r\n}\r\n<\/code><\/pre>\n<h4>Target a specific layout with CSS<\/h4>\n<p>Each of these takes the layout param; use the element settings to choose the layout you want for the listings.<\/p>\n<p><strong>CSS targeted to specific layouts<\/strong><\/p>\n<p>Here is a scaffold you can use to target different layouts:<\/p>\n<pre><code class='css'>\r\n\/*Apply Stylings for List View Layout*\/\r\n.geodir-listview li .gd-list-item-right {\r\n    background-color:#e8e8e8; \/*Background Color*\/\r\n}\r\n\r\n\/*Apply Stylings for Grid 2 Layout*\/\r\n.geodir-gridview.gridview_onehalf li{\r\n    background-color:#e8e8e8; \/*Background Color*\/\r\n}\r\n\r\n\/*Apply Stylings for Grid 3 Layout*\/\r\n.geodir-gridview.gridview_onethird li{\r\n    background-color:#e8e8e8; \/*Background Color*\/    \r\n}\r\n\r\n\/*Apply Stylings for Grid 4 Layout*\/\r\n.geodir-gridview.gridview_onefourth li{\r\n    background-color:#e8e8e8; \/*Background Color*\/    \r\n}\r\n\r\n\/*Apply Stylings for Grid 5 Layout*\/\r\n.geodir-gridview.gridview_onefifth li{\r\n    background-color:#e8e8e8; \/*Background Color*\/    \r\n}\r\n<\/code><\/pre>\n","protected":false},"featured_media":0,"parent":806,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"amp_validity":null,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/docs\/821"}],"collection":[{"href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/comments?post=821"}],"version-history":[{"count":0,"href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/docs\/821\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/docs\/806"}],"next":[{"title":"GD > Post Content","link":"https:\/\/wpgeodirectory.com\/docs-v2\/design\/gd_post_content\/","href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/docs\/1003"}],"prev":[{"title":"GD > Search","link":"https:\/\/wpgeodirectory.com\/docs-v2\/design\/gd_search\/","href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/docs\/928"}],"wp:attachment":[{"href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/media?parent=821"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/docs-v2\/wp-json\/wp\/v2\/doc_tag?post=821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}