How to change Accent Colour just for one page?

[xdev]

I would like to change the accent color ( for some tabs ) but just for one portfolio page. How can I do that via custom css? Can you please help?

Attached screenshot of what I want to change.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

can you provide the link to that page so we can provide you the specific css?

-Rui

[xdev]

I’m trying to replicate this page ( on localhost for the moment ): http://swiftideas.com/?portfolio=fox-family
I just want to change the color for the tab colors and hover color ( accent color ) for this page.

I will adapt the code for my own page.

[Rui Guerreiro – SUPPORT]

In that example that’s a Portfolio item, will you do it has portfolio item, page or post?
This is import to be able to target specifically only that page.

In that example looking at the body at that page we could use the class postid-12835 that is unique to that page. Check the source of your page and replace postid-12835 in the code below by your code.
https://www.dropbox.com/s/8dc5qefzti8245c/Screenshot%202015-07-27%2012.12.39.png?dl=0

.postid-12835 .spb_tabs .nav-tabs li.active a, .postid-12835 .spb_tour .nav-tabs li.active a {
    background: #eabe12;
    border-color: #eabe12!important;
    color: #ffffff!important;
}

Hope it helps.

-Rui

[xdev]

It’s a portfolio item same as the one in the link I provided..only with a changed name ( and ID ) but I can change those.

[xdev]

Also I need to change the hoover color for those tabs ( when hoovering with the mouse over the text )
The rest works perfectly 🙂

[Rui Guerreiro – SUPPORT]

If you want to do it in all the Portfolio items replace the .postid-12835 by .single-portfolio
if it is in only 1 portfolio item you just need to change the ID.

.postid-12835  a:hover,.postid-12835  a:focus {
    color: #eabe12;
}

If you can do it, take a screenshot the the body html so I can advice.

-Rui

[xdev]

No no..I want to do it on a SINGLE item just like you provided. I tested and it works perfectly…with just one small problem. The hoover color is still the main Accent Colour for the entire website.
Can you help me change that too? Your last code does not work.

Here is what I added:

.postid-71 .spb_tabs .nav-tabs li.active a, .postid-71 .spb_tour .nav-tabs li.active a {
    background: #E73137;
    border-color: #E73137!important;
    color: #ffffff!important;
}

.postid-71  a:hover,.postid-71  a:focus {
    color: #E73137;
}

Attached screenshot.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Just add the !important tag like this.

.postid-71  a:hover,.postid-71  a:focus {
    color: #E73137!important;
}

-Rui

[xdev]

This reply has been marked as private.

[xdev]

Nope still doesn’t work even adding the !important tag

[xdev]

Any ideas on why is this happening?

[Rui Guerreiro – SUPPORT]

you could have some error in other css rules.
Try to place it in top of the css custom option.

-Rui

[xdev]

It can’t be that because these ( the ones you provided ) are the only css rules ( custom) that I used until now…so If I take your code out…the box is empty 🙂

[Rui Guerreiro – SUPPORT]

ok. In that case try this one.

.spb_tabs .nav-tabs li a:hover {
   color:  #E73137!important;
}

-Rui