First of all, I just don’t know anything about CSS or PHP.
I need to know how I can change the color of certain pages background.
What I already did: asked a friend to change directly on the Vantage Premium style.css the header and content area to black background.
#1 – How can I reset it and do on the right way?
#2 – How can I edit the CSS to make only some pages content area with an white background?
#3 – Why does Vantage Premium not has a simple way of changing the layout color page by page (or post), like some other themes have?
I’m using page builder plugin, if that helps…
Many thanks!
Hi Arthur
Thanks for running Vantage.
Our approach is quite a lightweight one compared so many commercial themes, this unfortunately isn’t a feature that made the cut in that decision process.
This is the selector with the page background color in it:
#main { background: #FCFCFC !important; }Each page, if you check the source code, has a body tag near the top. Within each body tag is a unique class, in the case of this support page you’re on it is: postid-3444
Check out our Custom CSS tutorial as the easiest way to find the body class is to use your developer tool: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/.
So the complete selector to paste under Appearance > Custom CSS is:
.postid-3444 #main { background: #FCFCFC !important; }With postid-3444 being replaced by the page/post body class you want to use. Then repeat the selector as many times as needed.
Last example: http://demo.siteorigin.com/vantage/
That page would be:
.home #main { background: #FCFCFC !important; }It didn’t work. The page id is 413. I put the code there, but nothing changed.
Ok, it did work at the landing page plugin… but, why page builder plugin isn’t working there?
And now, what is the code to change the font colours?
thank you!
If a page template is set to Blog, Page Builder won’t take effect there. If that’s the case, set the page template to default and use a Post Loop widget to pull posts.
To change font colors on that page you could try something like:
.body-class #main { color: #000 !important; }Replace body-class with your page’s class and leave the period in place.
Sorry, Andrew.
Anything is working.
Look, someone, I don’t know (friend of a friend) truned the Vantage black background, with white font. Just like you can see here: http://www.rioconexao.com.br
I really don’t know what this person did, and now we need some pages in other colour (the background and the font).
How you can help me in this? We need to do this ASAP.
Should I set up the original CSS (by ftp)? And then how to proceed, for the website return to black, and some pages could stay white?
Thanks.
The background color changes have been made from Appearance > Customize so it would be possible to roll them back from that area.
Details of the available Customizer settings can be found here: https://siteorigin.com/vantage-documentation/customizations/.
We can look at this from a Custom CSS point of view, but it might be better to head to the Customizer and work with a set of colors that works for all your pages.
If you wanted to change the setup on this page here: .The Custom CSS would look as follows: http://rioconexao.com.br/quemsomos/. To be clear, insert the below into Custom CSS.
.page-id-2 #main { background: #FCFCFC; } .page-id-2 #page-title, .page-id-2 article.post .entry-header h1.entry-title, .page-id-2 article.page .entry-header h1.entry-title { color: #000; } .page-id-2 .entry-content { color: #000; }.page-id-2 is the body class for that page. See how each selector has to be prefixed with the body class.
But yeah, my recommendation is to rather set this site up so this isn’t required.
(Please remember that any changes made to style.css are not upgrade safe).
THANK YOU! <3
It worked perfectly now!
Only one more question… As I use page builder, and in this page I have a grid loop, the title of the section still with a white color. I changed the title of the entries that the loop returns for me in the grid, but the title of them (eg. "last news about sports:"), I don't know the code. And it happens
Here what I've done:
.page-id-413 #main { background: #FCFCFC; } .page-id-413 #page-title, .page-id-2 article.post .entry-header h1.entry-title, .page-id-2 article.page .entry-header h1.entry-title { color: #333; } .page-id-413 .entry-content { color: #333; } .page-id-413 .vantage-grid-loop h3 { color: #333; }But really thanks, very happy!
Glad that helped.
Sorry, not really following. If possible please send through a link and let me know what you’d like to change on the page.
Confirm that you saw it, then I’ll turn it private again:
http://rioconexao.com.br/medical-center/
These texts in white color… need them #333
Those look to be heading title colors which are being manually set from Appearance > Customize > Fonts: Content Heading Color.
Nope, they are title of page builder boxes.
And, if I change that at Customize, all the site will be the same, and only some pages will be white. Maybe other will be colored differently.
Is it possible to have an upgrade for Vantage, that allows easy custom css for each page or category?
There is unfortunately no feature in Vantage of this nature. You can set heading colors on a page basis using Custom CSS as follows:
.page-id-413 .entry-content h1, .page-id-413 .entry-content h2, .page-id-413 .entry-content h3, .page-id-413 .entry-content h4, .page-id-413 .entry-content h5, .page-id-413 .entry-content h6 { color: #eaeaea !important; }Yes, thats it!
*.*
Many thanks! Is there anything that I could do to help you? I don’t know about the codes, but if you need help with the business somehow, can count on me!
Best!
Awesome, glad that helped. Thanks for your gracious offer. Your support is more than enough.
All the best.
hi Andrew,
the background color changes below, for example changes the entire background color, for both the content area and the sidebar:
#main {
background: #FCFCFC !important;
}
.postid-3444 #main {
background: #FCFCFC !important;
}
what if I just need the background color to change to like #000, but the content area and sidebars background colors to still be white / FCFCFC. If the entire background color is 000, this means I have to change my font color, which I do not want to do.
Hi tokunbo
Please open a new support thread. We’ll be with you as soon as possible.
https://siteorigin.com/new-thread/