-
Posts
-
Hello there,
I just bought this theme and I’m really excited about it! Awesome theme! There’s just one problem I’m running into and that’s changing the colours on different pages. I have used the following colour as the standard colour: #81BFCA. However, I want to use a different colour on certain pages and I’m wondering what CSS code to use for that. Do I have to get a code for each element on that page or is there an easier way to do it? I’m assuming there is. I really hope you guys can help me out!
http://work.paardenlifestyle.com
Thanks in advance!
Hi,
Please be more specific. By color do you mean font color, or background color of the page? or some part of the page? Please let us know what page you want what color and where on page, a screen shot with arrow would really help as well. Yes there are blocks of chained css selectors that all share the same color and you can use css to target each chained block to a specific page,
Thanks,
Nick
Hello Nick,
thank you for your reply. What I mean is the following. My basic theme colour is blue and therefore, links, buttons, icon boxes etc. are automatically blue. However, on a few pages, I want to change that colour to a different colour.
For example on the following page:
http://work.paardenlifestyle.com/e-learning/
I would like the menu hover items to have the orange colour instead of blue and the same counts for the subscribe button below and the socket.
This also counts for the following page where the colour should be red:
http://work.paardenlifestyle.com/glossy/
I adjusted the icon boxes with css, but I’m assuming there should be a way to change it for every “blue item” on that page with one line of code?
The different colours represent the different services we provide. (this the original website: http://www.paardenlifestyle.com)
Thanks in advance and I REALLY love the theme!!!
Hi,
I am getting a server 500 error on your pages http://www.clipular.com/c?9915004=WS2VzSFqvVzvbDOLCkijJ1tbIyA&f=.png .. You probably made a mistake editing a template. You will need to use ftp to fix this since you probably cant log into wordpress backend. Just re-upload the file you edited.
Thanks,
Nick
Hi,
The links gave me errors.
You can target a specific page by their unique body id selector. Using Chrome, you can right click the page, Inspect Element. Look for the body class.
We can use page-id-2251 to target the page. For example, if we want to change the header background, we can do something like this on custom.css or Quick CSS:
.page-id-2251 #header_main {
background: red;
}We can use this same technique to target other elements within a specific page.
Regards,
Ismael
Hi there,
sorry about the link. I just moved the testversion to the real domain, so therefore you couldn’t see the website. The website can be found here: http://www.paardenlifestyle.com
Thanks for your replies. I get the page-id css trick, but is it also possible to apply a css-rule for the primary colour on that page so that each element with the primary colour gets changed?
Hi,
Yes. That is the css trick with the page-id. There are huge blocks of dozens of different selectors separated by commas that have a color assigned to all of them. That is what gives the primary color, alternate, header, etc..So if lets say that light blue color you have on home page can be easily changed to a different color on a per page basis by taking those huge blocks , making a copy of them and adding the page-id to the front of them.
But I see you are already customizing. . I took out the light blue color, all the selectors in the theme and dropped it here http://pastebin.com/E4P6z9ip since there are quite a few of them. I changed them to color red. A lot of them are used only if you have a specific layout element on the page. Just use a text editor to mass-replace the red color and then mass replace the page id, add the entire thing to css and you are set.
Thanks,
Nick
- The topic ‘Custom colours on different pages’ is closed to new replies.