Targeting Reviews Tab on Details Page

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

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: 

  • Author
    Posts
  • #44040

    doublefish
    Expired Member
    Post count: 53

    Hey Guys,

    Want to target the reviews tab on the details page to customize bg color, borders, font color, etc…

    Trying…

    
    
    .dl.geodir-tab-head dd a #reviews{
         background: #2e4988;
         color: #fff;
    }
    
    .geodir-tabs #reviews{
         background: #2e4988;
         color: #fff;
    }

    but not working.

    Is this possible? Am I just targeted the wrong classes?

    Thanks for the help as always!!

    #44045

    Simone
    Expired Member
    Post count: 3515

    Hello, correct syntax for data-tabs is the following

    
    
    dl.geodir-tab-head dd > [data-tab="#reviews"]{
    	background: #yourcolor;
    }
    #44048

    doublefish
    Expired Member
    Post count: 53

    Your Awesome,

    Thanks Simone!!

    #44049

    Simone
    Expired Member
    Post count: 3515

    you’re welcome, enjoy your new shiny review tab 🙂

    #44055

    doublefish
    Expired Member
    Post count: 53

    Whats the syntax to target the active state… when the user is actually on that tab? I changed the background color to blue and font color to white so when you click on it the text disappears into the white background.

    #44057

    Simone
    Expired Member
    Post count: 3515

    this is for the current (active)

    dl.geodir-tab-head dd.geodir-tab-active a
    #44058

    doublefish
    Expired Member
    Post count: 53

    Thanks Simone but that applies to all active tabs not just the reviews…

    tried to use this to target just the reviews tab…

    dl.geodir-tab-head dd.geodir-tab-active a > [data-tab="#reviews"]

    but it didn’t work…

    I appreciate your help Simone!

    #44060

    Simone
    Expired Member
    Post count: 3515

    I tried on mine and it works, I added the following to test it out

    
    
    dl.geodir-tab-head dd > [data-tab="#reviews"]{
    	background: red !important;
    	color: #fff !important;
    }

    mind the !important

    #44063

    doublefish
    Expired Member
    Post count: 53

    That part works perfectly… and I didn’t have to use !important.

    The part that’s not working is the “active” state. The syntax you supplied targets all tabs in active state and I want to target only the reviews tab in the active state.

    Thanks! Sorry if I wasn’t more clear…

    #44078

    Simone
    Expired Member
    Post count: 3515

    Sorry I need to learn to read slowly 🙂
    I would have gone for sure with
    dl.geodir-tab-head dd.geodir-tab-active a > [data-tab=”#reviews”]
    but this isn’t working (as you said)…
    to be honest i don’t know why not, maybe because there are too many overrides 🙁

    #44084

    doublefish
    Expired Member
    Post count: 53

    Thanks Simone I appreciate your help.

    Is there anyone else on the team that may know for sure whether it can be done or not?

    #44101

    Paolo
    Site Admin
    Post count: 31206

    Please use:

    
    
    .dl.geodir-tab-head dd a[data-tab="#reviews"]{
         background: #2e4988;
         color: #fff;
    }
    
    .geodir-tabs #reviewsTab{
         background: #2e4988;
         color: #fff;
    }
    
    dl.geodir-tab-head dd.geodir-tab-active a[data-tab="#reviews"] {
        background: your-color;
        color: your-color;
    }

    Let us know,

    Thanks

    #44105

    doublefish
    Expired Member
    Post count: 53

    Yep it worked.

    Simones original answer was correct for the highlighting the inactive tab and Paolo syntax was correct for highlighting the active tab.

    I did remove…

    
    
    .geodir-tabs #reviewsTab{
         background: #2e4988;
         color: #fff;
    }

    because that was adding a background color to the whole review section rather than the tab itself. But if someone wants that feature they can use the code I removed.

    Thanks for the help Paolo and Simone! You rock.

    #44109

    Paolo
    Site Admin
    Post count: 31206

    You are welcome 🙂

Viewing 14 posts - 1 through 14 (of 14 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
20% Discount Offer
Hurry! Get your 20% discount before it expires. Get 20% Discount