{"id":15622,"date":"2015-04-29T11:32:26","date_gmt":"2015-04-29T11:32:26","guid":{"rendered":"https:\/\/docs.wpgeodirectory.com\/?p=15622"},"modified":"2018-09-21T23:55:05","modified_gmt":"2018-09-21T23:55:05","slug":"common-styling-examples","status":"publish","type":"post","link":"https:\/\/wpgeodirectory.com\/docs\/common-styling-examples\/","title":{"rendered":"Common styling examples"},"content":{"rendered":"

Changing the look of a featured listing<\/a> Adjusting the location switcher for cities only or a one country site<\/a> Hiding category legend from location map<\/a> Hiding the listings count in the popular categories widget<\/a> Changing the link in the map bubble<\/a>
\nModifying the GD Search bar<\/a> Hiding\u00a0the\u00a0Custom\u00a0Post\u00a0Type\u00a0(CPT)\u00a0selector<\/a> Removing one CPT only from the Custom Post Type (CPT) selector<\/a> Hiding the\u00a0“Search for” field<\/a> Changing\u00a0the\u00a0Advanced Search cogwheel\u00a0icon to\u00a0text<\/a>
\nCustomizing or hiding address details<\/a> Removing reviews from one CPT only<\/a> Making the reCAPTCHA V2 box resize to smaller screens<\/a>
\nAdjust Supreme Directory Featured Image Overlay Opacity<\/a><\/p>\n

<\/a>Changing the look of a featured listing<\/h3>\n

Each featured listing has the class gd-post-featured<\/strong><\/em>\u00a0applied in listings pages.
\nThis class can then be targeted to change the look of featured listings.
\nFor example adding this to your CSS:<\/p>\n

[css].gd-post-featured {background: #BDFF00 none repeat scroll 0 0;}[\/css]<\/p>\n

results in this:
\n\"featured\"<\/p>\n

<\/a>Adjusting the location switcher for cities only or a one country site<\/h3>\n

The default location switcher looks like this:<\/p>\n

\"\"<\/p>\n

If you have a GeoDirectory site for one country only, you can add this to your child theme’s style.css file:<\/p>\n

[css]#menu-item-gd-location-switcher dd {width: 50%;}[\/css]<\/p>\n

And then your switcher will look like this:<\/p>\n

\"\"<\/p>\n

And if you have a GeoDirectory site for one region only, you can add this\u00a0to your child theme’s style.css file:<\/p>\n

[css]#menu-item-gd-location-switcher dd {width: 100%;}[\/css]<\/p>\n

And then your switcher will look like this:<\/p>\n

\"\"<\/p>\n

<\/a>Removing category legend from location map<\/h3>\n

The default location map will have a legend showing the categories in the bottom right hand corner, like this:<\/p>\n

\"Legend\"<\/p>\n

If you want to hide that category list hidden by default, use the code posted below. Clicking on the expand\/reduce icon will then open\/close it:<\/p>\n

\"\"<\/p>\n

Then add this CSS to your child theme’s style.css file:<\/p>\n

[css].map_category {display: none;}[\/css]<\/p>\n

To only hide it on mobile views, you can add this CSS, adjust as required:<\/p>\n

[css]@media only screen and (max-width: 1040px) {.map_category {display: none;}}[\/css]<\/p>\n

<\/a>Hiding the listings count in the popular categories widget<\/h3>\n

The popular categories widget will have show the number of listings in the categories for the selected location like this:<\/p>\n

\"\"<\/p>\n

If you want to hide those numbers, use the code posted below:<\/p>\n

\"\"<\/p>\n

[css]span.geodir_term_class {display: none;}[\/css]<\/p>\n

<\/a>Changing the link in the map bubble<\/h3>\n

If you want to change how the main link to the listing looks, use the code below, and adjust as required:<\/p>\n

[css].geodir-bubble_desc h4 a {background: white; padding: 3px; border: 1px solid blue;}[\/css]<\/p>\n

These pictures show before<\/strong> and after<\/strong>:
\n\"\"\u00a0\"\"<\/p>\n

<\/a>Modifying the GD Search bar<\/h3>\n

The GD Search bar can have a few different components depending on the addons you use, and your settings.
\nLearn more about the search bar here.<\/a><\/p>\n

<\/a>Hiding the\u00a0Custom Post Type (CPT) selector<\/h4>\n

This CSS will hide the CPT selector<\/a> everywhere:<\/p>\n

[css].gd-search-field-cpt {display: none;}[\/css]<\/p>\n

This CSS will hide the CPT selector<\/a> on all Listings (CPT and categories) pages:<\/p>\n

[css].gd-search-input-wrapper.gd-search-field-cpt {display: none;}[\/css]<\/p>\n

This CSS will hide the CPT selector<\/a> on all Listings (CPT and categories) pages:<\/p>\n

[css].gd-search-input-wrapper.gd-search-field-cpt {display: none;}[\/css]<\/p>\n

<\/a>Removing one CPT only from the Custom Post Type (CPT) selector<\/h4>\n

This CSS will hide one CPT from the CPT selector<\/a> everywhere (adjust as required):<\/p>\n

[css].search_by_post option[value=gd_event] {display: none;}[\/css]<\/p>\n

<\/a>Hiding the\u00a0“Search for” field<\/h4>\n

This CSS will hide the “Search for” field<\/a> everywhere:<\/p>\n

[css].gd-search-field-search {display: none;}[\/css]<\/p>\n

Full width with all search inputs inline<\/h4>\n

This CSS will allow the search bar to expand to 100% width on the screen, allowing all the items inline:<\/p>\n

[css].geodir-loc-bar-in {max-width: 100%;}[\/css]<\/p>\n

Using Supreme Theme you can add:<\/p>\n

[css].sd.home .featured-area .geodir-loc-bar-in {max-width: 100%;}[\/css]<\/p>\n

<\/a>Changing the Advanced Search cogwheel\u00a0icon to\u00a0text<\/h4>\n

To change from \"\"\u00a0to \"\"\u00a0add this CSS:<\/p>\n

[css].fa-cog:after {content: " Advanced Filter";}[\/css]<\/p>\n

<\/a>Change the Advanced Search icons<\/h4>\n

Adjust this CSS for your own style; find more icons at http:\/\/fontawesome.io\/cheatsheet\/<\/a>
\nTo change the cog wheel:<\/p>\n

[css]
\n.fa-cog:after {font-family: FontAwesome;
\ncontent: "\\f1b9"; color:white; font-size: 16px;}
\n.fa-cog {color:transparent; font-size: 0}
\n[\/css]<\/p>\n

To change the search icon:<\/p>\n

[css]
\n.fa-search:after {font-family: FontAwesome;
\ncontent: "\\f1b9"; color:white; font-size: 16px;}
\n.fa-search {color:transparent; font-size: 0}
\n[\/css]<\/p>\n

Use font awesome icons in any text area or as links http:\/\/fontawesome.io\/cheatsheet\/<\/a><\/p>\n

[html]
\n<i class="fa fa-facebook-square" aria-hidden="true"><\/i>
\n[\/html]<\/p>\n

<\/a>Customizing or hiding address details<\/h3>\n

The display of the different levels of the address are controlled by CSS classes:<\/p>\n

    \n
  1. span[itemprop=”streetAddress”]<\/li>\n
  2. span[itemprop=”addressLocality”]<\/li>\n
  3. span[itemprop=”addressRegion”]<\/li>\n
  4. span[itemprop=”addressCountry”]<\/li>\n
  5. span[itemprop=”postalCode”]<\/li>\n<\/ol>\n

    For example, if you only want to display the region and country, add this to your child theme’s style.css<\/strong><\/em> file:<\/p>\n

    [css]span[itemprop="streetAddress"],
    \nspan[itemprop="addressLocality"],
    \nspan[itemprop="postalCode"] {
    \n display: none;
    \n}[\/css]<\/p>\n

    Hide the default phone number from logged out users<\/h4>\n

    Sometimes you may want to hide some listing information from users that are not logged in. Here is an example of how you can do that with the default phone number.<\/p>\n

    [css]
    \n.geodir_contact {display: none}
    \n.logged-in .geodir_contact {display: initial}
    \n[\/css]<\/p>\n

    <\/a>Removing reviews from one CPT only<\/h3>\n

    If you only want to disable reviews for some but not all CPTs, you can use this CSS, adjust for the CPTs you want to hide. For example, replace every event<\/em><\/strong> with place<\/em><\/strong>:<\/p>\n

    [css]
    \n.post-type-archive-gd_event .geodir_Star {display: none;}
    \n.post-type-archive-gd_event .geodir-bubble-meta-bottom .geodir-bubble-reviews {display: none;}
    \n.search-results .geodir-bubble-meta-bottom .geodir-bubble-reviews {display: none;}
    \n.post-type-archive-gd_event a.geodir-pcomments {display: none !important;}
    \n#reviewsTab {display: none !important;}
    \n.single-gd_event dl.geodir-tab-head [data-tab="#reviews"] {display: none !important;}
    \n.single-gd_event .sd-detail-cta .dt-btn {display: none;}
    \n.single-gd_event .sd-ratings {display: none;}
    \n.gd-post-gd_event .geodir-rating {display: none;}
    \n.search-results .geodir-bubble-meta-bottom .geodir-rating {display: none;}
    \n.gd-post-gd_event a.geodir-pcomments {display: none !important;}
    \n[\/css]<\/p>\n

    <\/a>Making the reCAPTCHA V2 box resize to smaller screens<\/h3>\n
      \n
    1. You have the option to choose two different reCAPTCHA versions:\n
        \n
      1. reCAPTCHA V2 which requires visitors to tick a box<\/li>\n
      2. Invisible reCAPTCHA which works in the background<\/li>\n<\/ol>\n<\/li>\n
      3. reCAPTCHA V2 has a fixed width as provided by Google and therefore sometimes is to wide for a small screen or another container element on your screen.<\/li>\n
      4. To fix this you can apply the following CSS:\n

        [css]
        \n@media screen and (max-height: 575px){
        \n .gd-captcha {transform:scale(0.8);
        \n -webkit-transform:scale(0.8);transform-origin:0 0;-webkit-transform-origin:0 0;}
        \n}
        \n[\/css]<\/p>\n<\/li>\n

      5. Adjust the @media screen settings to target the sizes you want.<\/li>\n<\/ol>\n

        <\/a>Adjusting Supreme Directory theme featured image overlay opacity<\/h3>\n
          \n
        1. \n
            \n
          1. Supreme Directory theme has a really strong display of the featured image.<\/li>\n
          2. Adjusting the opacity of the featured image overlay can brighten or darken your site to suit your needs<\/li>\n
          3. Here is some CSS that you can adjust to suit your site:\n

            [css]
            \n\/*location pages overlay *\/
            \n.sd-location .featured-area::before {
            \n opacity:0.5!important;
            \n}<\/p>\n

            \/* listing pages overlay *\/
            \n.single .featured-area::before {
            \nopacity:0.2 !important;
            \n}<\/p>\n

            \/* homepage overlay *\/
            \n.sd-homepage .featured-area::before {
            \nopacity:0.5 !important;
            \n}[\/css]<\/p>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

            <\/ol<\/p>\n

            Remove Supreme Parallax Effect<\/h4>\n

            Want a little less movement on your page?
            \nHere’s some CSS to remove the parallax effect.
            \nEach page type has a class, so, there are different ways to target the CSS, based on your needs.<\/p>\n

            First, this CSS will remove the effect everywhere:<\/p>\n

            [css]
            \n.featured-img {
            \n background-position: 50% 50% !important;
            \n}
            \n[\/css]<\/p>\n

            This CSS is targeted at the single page for a gd_place:<\/p>\n

            [css]
            \n.single-gd_place .featured-img {
            \n background-position: 50% 50% !important;
            \n}
            \n[\/css]<\/p>\n

            This is targeted more widely at any CPT for a single page, but will leave the effect in place on the home page:<\/p>\n

            [css]
            \n.single .featured-img {
            \n background-position: 50% 50% !important;
            \n}
            \n[\/css]<\/p>\n","protected":false},"excerpt":{"rendered":"

            Changing the look of a featured listing Adjusting the location switcher for cities only or a one country site Hiding category legend from location map Hiding the listings count in the popular categories widget Changing the link in the map bubble Modifying the GD Search bar Hiding\u00a0the\u00a0Custom\u00a0Post\u00a0Type\u00a0(CPT)\u00a0selector Removing one CPT only from the Custom Post … <\/p>\n

            Continue reading “Common styling examples”<\/span><\/a><\/p>\n","protected":false},"author":1676,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[],"amp_validity":null,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/posts\/15622"}],"collection":[{"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/users\/1676"}],"replies":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/comments?post=15622"}],"version-history":[{"count":0,"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/posts\/15622\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/media?parent=15622"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/categories?post=15622"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/docs\/wp-json\/wp\/v2\/tags?post=15622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}