Hi all,
I’ve been using SiteOrigin CSS to change aspects of my vantage premium site: http://784.112.myftpupload.com. I’m completely new at web development, and the site isn’t very far along.
On the front page, I’ve been using Page Builder. Somehow, colors such as the white text under the megaslider, and the pink background behind the circle widgets won’t change, no matter if I try to change them through SiteOrigin CSS or in the row/widget settings on the Home page editor. All I want is to have one solid color all the way across each page builder “row” on the home page, such as the white strip behind the circle icon widgets.
Also, while using SiteOrigin CSS, all changes I make to the homepage are also applied to all other pages as well, while I want these to be a completely different layout/design.
I’m sure these problems are very rudimentary, so I apologize, but I’m very new at this! Thanks!
Hi Cathryn293
Thanks for your support.
To create a full width background behind a Page Builder row, edit your home page, edit the row by clicking the wrench icon, click the Layout tab and set the Row Layout drop down to Full Width (not stretched, just full width). Ideally, try going to SiteOrigin CSS only when you can’t do something in Appearance > Customize > Theme Design or via Page Builder controls. So for example you can set each row’s background color from within the row settings. That’ll then be a page & row specific setting, no need for CSS.
The changes you make via Appearance > Custom CSS will be site wide. On the whole, the CSS rules you’re selecting are global and not page specific. We can help resolve this if you can identify each item that needs to be set only for the home page.
Thanks for the wait :)
We’re at GMT+2. I’ll grab your thread first in the queue tomorrow morning.
Andrew,
Thanks so much for your help. After trying to use SiteOrigin CSS to make most of my changes, I think I have fundamentally changed something in the website- for example, the pink background behind the second column on the first page is actually listed as white, and will change to other colors if I ask it, but the page thinks #ffffff is that shade of pink. At this point would it be best to just start over with the website? I’m not that far in so it wouldn’t be a huge setback.
Also, if I did want to only make page specific changes through SiteOrigin CSS, how would I denote that this change is not global? Thank you!
Thanks for your feedback. I’d consider doing this:
1. Go to Appearance > Custom CSS and remove the contents. Back it up in a text file but save Custom CSS as blank.
Once that’s done, take a look at the site and let me know what needs to be done that you can’t do. I’ll guide you through it.
Removing the contents of the Custom CSS helped a lot, thanks for the tip. Now I’m changing things mostly through page builder or theme design. The only thing I can’t do through these two methods are differentiating colors between my home page text for example, and my About Us page text. I can change only change text for every type of heading, paragraph, etc. through theme design, but I don’t want the change to be global. Thanks!
Sounds like good work!
Ok for that let’s use some relatively straightforward Custom CSS:
Home page has the body class .home so we can say:
/* Home */ .home .entry-content h1, .home .entry-content h2, .home .entry-content h3, .home .entry-content h4, .home .entry-content h5, .home .entry-content h6 { color: red; } .home .entry-content p { color: red; }Similarly, the About page has the body class .page-id-25 so we can say:
/* About */ .page-id-25 .entry-content h1, .page-id-25 .entry-content h2, .page-id-25 .entry-content h3, .page-id-25 .entry-content h4, .page-id-25 .entry-content h5, .page-id-25 .entry-content h6 { color: red; } .page-id-25 .entry-content p { color: red; }Adjust the value, red, to your preferred hexadecimal color.
Thanks so much for the code! I can now successfully have different color fonts on the Home and About Us page. The only problem is it won’t let me have a different color between the header and the paragraph text on each page. Here’s an example I’ve done for the About page, where I try to have two separate colors for header vs. paragraph, yet the paragraph color is still the same as the header:
/* About */.page-id-25 .entry-content h1,.page-id-25 .entry-content h2,.page-id-25 .entry-content h3, .page-id-25 .entry-content h4,.page-id-25 .entry-content h5,.page-id-25 .entry-content h6 { color: #20600c;}.page-id-25 .entry-content p { color: #444743;Also, I’m not sure if this is too off topic, but is there a way to make the background of each column in a page builder row cover the whole column, creating a color block look? An example of what I’m trying to emulate with that is Analysis Group’s website: http://www.analysisgroup.com. Thanks!
Hi :) In your Custom CSS is the paragraph rule closed? Above it’s missing a closing bracket.
Page Builder can do that but it’s not easy at the moment. If you’d like to have a go I’ll try take a look once you run into a problem and help out from there.
How are we looking on this one? I’ll check in on both threads first thing tomorrow morning. We’re at GMT+2. Thanks for your patience on our other thread. So sorry about that.
Totally fine! So I’m able to change the text colors just through page builder, which is fine. I’m still not able to specify certain conditions for just the homepage, or just the ‘About’ page, for example, in the CSS. I want to have a background image for only the homage, for instance, and I’ve tried specifying it with your suggested CSS above but for some reason the change isn’t occurring on the site. Thanks!
For sure. I’ve just replied on our other thread. If you can perhaps reply there and let me know anything I’ve missed. We’ll work through these challenges there.
Thanks :)