Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #10425

    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?


    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; }



    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.


    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.


    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;



    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;



    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);



    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; }


    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; }


    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?

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Navigation bar one color, page and background another’ is closed to new replies.