Nuntius: how to change background's colour of the pages?

  • Author
  • #1785255

    I would like to change the background’s colour of the pages and articles of my blog that are currently white and grey. Is it feasible?

    Thanks in advance,


    The blog I need help with is

    The blog I need help with is


    I checked and I see that the widgets in the sidebar currently have a light gray background color set to #f3f3f3. You can match the rest of the content container area to use that same color by adding the following CSS example to your Appearance > Customize > CSS editor:

    #content .hentry,
    .archive .hfeed,
    .error404 .hfeed,
    .search .hfeed {
    	background: #f3f3f3;

    You may find additional areas you want to update depending on the type of page or content area. In that case, you will just want to add the selector for whatever has the white background to the selector list in the example above. If you do find an area you want to add to the list, this help page covers how to find the selector for an element using the web inspector built in to your browser:


    thanks a lot for your support! It is really helpfull!
    In fact I would like to do the contrary and change the light gray background colour that remains.
    How can I handle that?


    This will allow you to change the grey in the band at the top and the widgets. You can edit my yellow demo color as desired. :)

    #sidebar-primary .widget, .breadcrumbs {
        background: #ffee99;

    Great! Thanks also for your support!
    Well, it looks really better now ;-)
    I still have 2 issues I would like to solve regarding the colour:
    – the black site footer
    – the grey line that defines the page and the content

    How can I handle that?


    On the footer, the background color is defined in #footer.

    #footer {
        background: #111111;

    On the grey lines around the content, they are set in couple places. .entry-utility is the very top horizontal sliver.

    .hentry {
        border: 1px solid #E5E5E5;
        border-radius: 5px;
        box-shadow: 0 1px 1px #E7E7E7;
    .entry-utility {
        border-bottom: 1px dotted #E4E4E4;
        border-radius: 5px 5px 0 0;

    If you wish to get rid of them entirely, change the borders to none and the border radiuses to 0 and set the box-shadow to none as well.


    Waow! Just cool to get so many important information quickly ;-)
    Thanks a lot!


    I will keep on modifying the colour of the header part.
    The background of the upper part of the header is currently black.
    How can I change it?


    The black between the content and sidebar is set here. Edit the color code as desired.

    body:before {
        background: #303030;

    I’m not seeing any black at the top. Are you talking about the admin bar when you are logged in? If so, that cannot be modified.


    Thanks for your support. It does not work that time as I saw no differences :-(
    I am referring to the black part behind the header. When the mouse scroll on the menu’s title, the color turns into black.


    I’m seeing no hover color on the menus. I see a black background on the current page, which is to help the user know which page they are on. If you wish to change that color, add the following CSS and edit the color code as you desire.

    .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a {
        background: #ffdd00 !important;

    Indeed it concerns the black background on the current page. I added your lines in the CSS program but unfortunately it does not work :-(
    Some changes work and others do not. I do not understand the reason why.
    I checked also the source of the pages through Google chrome. It helped me to recognize the right lines to change. But the modification are once again not always taken into consideration.
    Anyway I updated quickly the blog’s appearance thanks to your advices and it looks much better now!
    I will keep on searching!


    Hmmm, I just copied the code I had given and pasted it into your CSS edit window (Appearance > Customize > CSS and it turned the black current page item yellow.

    Can you try again? copy and paste it in after any existing CSS that you have and let me know how it goes. Edit or change the color code as you desire (#ffdd00).


    Well I did it once again and nothing changes :-(


    I just pasted it into your custom CSS and the current page item, A PROPOS is yellow when on your main site page. I’ve saved it, so view your site and whatever page you are on should have the yellow background in the menu at left.


    All right! I understand better now. There is a misunderstanding. I am referring to my blog while you are talking about the one called !?!
    Would you mind having a look at


    Ah yes: .

    Just to verify, you are wanting to change the hover color on the menu items from black to something else, correct?


    The following covers most of the black in the menu items. I’ve used a red color and the blue you are using as demonstration colors. You can of course edit those as desired.

    #menu-primary li:hover > a, #menu-primary ul ul *:hover > a {
        background: #cc0000;
    #menu-primary ul ul a:hover {
        background: #cc0000;
    #menu-primary .current_page_ancestor > a:hover, #menu-primary .current_page_item > a:hover, #menu-primary .current_page_parent > a:hover, #menu-primary .current-menu-ancestor > a:hover, #menu-primary .current-menu-item > a:hover, #menu-primary .current-menu-parent > a:hover {
        background: #cc0000;
    #menu-primary ul ul {
        background-color: #9FD2FD;

    Great! It works! thanks for your support!
    Any idea to change the white background color of any page?



    Add this and edit the color code for the white in the content area. Beware obnoxious red demo color ahead. :)

    #content {
        background: #CC0000;

The topic ‘Nuntius: how to change background's colour of the pages?’ is closed to new replies.