Targeting Reviews Tab on Details Page

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

Open Support Ticket

Tagged: reviews tab

Author

Posts
June 29, 2015 at 6:00 pm #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!!
June 29, 2015 at 6:14 pm #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;
}
```
June 29, 2015 at 6:18 pm #44048

doublefish
Expired Member

Post count: 53

Your Awesome,

Thanks Simone!!

June 29, 2015 at 6:19 pm #44049

Simone
Expired Member

Post count: 3515

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

June 29, 2015 at 6:27 pm #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.

June 29, 2015 at 6:32 pm #44057
Simone
Expired Member

Post count: 3515
this is for the current (active)
```
dl.geodir-tab-head dd.geodir-tab-active a
```
June 29, 2015 at 6:41 pm #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!
June 29, 2015 at 6:43 pm #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
June 29, 2015 at 6:46 pm #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…

June 29, 2015 at 7:54 pm #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 🙁

June 29, 2015 at 8:21 pm #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?

June 29, 2015 at 9:13 pm #44101
Paolo
Site Admin

Post count: 31211
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
June 29, 2015 at 9:38 pm #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.
June 29, 2015 at 9:55 pm #44109

Paolo
Site Admin

Post count: 31211

You are welcome 🙂
Author

Posts