I want to have my navigation bar one colour and my page and background another. However it appears that the navigation bar and page background share the same css class. Is it possible for me to easily split the two so I can control the page background colour and text separately from that in the navigation bar?
Navigation bar one color, page and background another
10 posts from 4 voices-
Posted 1 year ago #
-
sure, you have to specify a higher specified selector to your custom css to override the styles.css:
body .sidebar .box { color: #fff; }
body { color: #000; }Posted 1 year ago # -
Hello!
The css from maratino looks like it will do the job for you :)
You can also add it into your Quick CSS located at the bottom of your styling options in addition to the cusom.css file.
Posted 1 year ago # -
This has only half worked. I am getting the change of colour on the main text but not the heading text. Nor is the background colour of the actual page area chaning. I tried background-color but this did not work.
Any other ways of doing this?
To clarify I need sidebar background and text to remain the same and just want to control the background color of the main text area, the text itself and headings.
Posted 1 year ago # -
it's pure css. you should have a look on the original css (background, not background-color)
.box, .blog-meta, .return_content, .arrowslidecontrolls_fullscreen, .hide_content_wrap a, .img_count, .slide_thumbnails, .widget {
background: white;
}Posted 1 year ago # -
I understand that it is pure CSS but I don't see how to seperate the sidebar from the main body. They appear to both be using the class .box
I tried this but does not work?
sidebar .box { color: #002147; }
.box, .blog-meta, .arrowslidecontrolls_fullscreen, .hide_content_wrap a, .img_count, .slide_thumbnails, .widget{
background: #fff;
}Posted 1 year ago # -
you're missing a dot, it's .sidebar .box
I am using a childtheme and i target my boxes like this:body, body .box, .description, body .widget {
color: white;
background: rgba(0, 0, 0, 0.8);
}Posted 1 year ago # -
Thanks for your help maratino!
Guess it should read:
.sidebar .box { color: #002147; }Also if the changes to not appear you might want to try to give the rule more importance by adding the #top id of the body:
#top .sidebar .box { color: #002147; }Posted 1 year ago # -
Still no joy with this. I can only seem to change the colour of both the sidebar and the main body together. I got close and had the main body which but then lost all the page title headings, presumably because they were white. But with this I also turned parts of the sidebar white too instead of leaving them blue.
It's driving me crazy now. This is the code I tired but it just turn everything white!
.box, .blog-meta, .arrowslidecontrolls_fullscreen, .hide_content_wrap a, .img_count, .slide_thumbnails, .widget{
background: #fff;#top .sidebar .box { color: #002147; }
Posted 1 year ago # -
HI onlinedesigns,
Maybe we are missing something in the copy+paste. Do you have a link to the site live where one of us can inspect the css directly?
Posted 1 year ago #
Reply
You must log in to post.














