Digital experiences for all disciplines
New Landing › How can we help? › Atelier › How to change Accent Colour just for one page?
New Landing › How can we help? › Atelier › How to change Accent Colour just for one page?
- This topic has 20 replies, 2 voices, and was last updated 8 years by Rui Guerreiro – SUPPORT.
-
Posted in: Atelier
-
July 27, 2015 at 11:35 am #198028
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.July 27, 2015 at 11:38 am #198031Hi,
can you provide the link to that page so we can provide you the specific css?
-Rui
July 27, 2015 at 12:08 pm #198047I’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.
July 27, 2015 at 12:15 pm #198051In 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
July 27, 2015 at 12:22 pm #198056It’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.
July 27, 2015 at 12:28 pm #198060Also I need to change the hoover color for those tabs ( when hoovering with the mouse over the text )
The rest works perfectly ๐July 27, 2015 at 12:34 pm #198069If 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
July 27, 2015 at 12:41 pm #198078No 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.July 27, 2015 at 12:44 pm #198081Just add the !important tag like this.
.postid-71 a:hover,.postid-71 a:focus { color: #E73137!important; }
-Rui
July 27, 2015 at 12:44 pm #198083This reply has been marked as private.July 27, 2015 at 12:46 pm #198088Nope still doesn’t work even adding the !important tag
July 27, 2015 at 2:19 pm #198140Any ideas on why is this happening?
July 27, 2015 at 2:30 pm #198148you could have some error in other css rules.
Try to place it in top of the css custom option.-Rui
July 27, 2015 at 2:38 pm #198152It 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 ๐
July 27, 2015 at 6:54 pm #198263ok. In that case try this one.
.spb_tabs .nav-tabs li a:hover { color: #E73137!important; }
-Rui
-
Posted in: Atelier
You must be logged in to reply to this topic.