Adjust Sitewide Background & Text Color/Size

Note : the following code snippet requires advanced WordPress developer skills. There's no guarantee that this snippet works as is with the latest version of our themes, and with the latest version of WordPress. That's why you need to always test any code snippets in a staging environment before implementing it in a production site.

Last Reviewed: 16-Dec-15 (3.4.16) 3.1-3.4.*

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

After frequent requests in the Forum, I’m adding to this early Snippet with details on how to adjust the background color of every item in Customizr. I’ll use ‘pink’ to emphasise what you will need to change when you use the code (unless you’re a lady who loves pink!)

This focuses on solid colors only

Step 1 – Main body/containers

Step 2 – Header/Navbar

Step 3 – Slider

Step 4 – Featured Pages

Step 5 – Pages/Posts

Step 6 – Press Customizr Footer

Step 7 – Widgets Footer


Step 8 – Adjust sitewide fonts size/color


*New* Take a look at this new Extension for the best user experience with Fonts
Font Customizer extension

Related Snippets you may also like

29 thoughts on “Adjust Sitewide Background & Text Color/Size

  • Erich Nolan Bertussi

    only missing the snippets to change:


    which for the bloody life of me I can’t seem to vector in on identifying so the only place I change the link colours is in the site wide notice for woocommerce enable site-wide store notice text /wp-admin/admin.php?page=wc-settings

    any one?
    any one?

    #iARG today on this one 🙁


  • Bill

    Hello I’ve searched hi and low in the discussion on how to change the color of the bottom horizontal bar that is just above the widgets area on my site, but, I cannot seem to find a fix. Can someone help me? Thx, Bill

  • Greg

    Hello, my post somehow disappeared..:) Thanks for this code , advice etc.. I was able to widen the “entry-content” background and even change the background color.. unfortunately I am unable to make the entry-content text max page width.. it stays at about 75%.. any ideas will be greatly appreciated, Thanks, Greg

  • Greg

    Hello, thanks for this topis.. it helped alot.. one problem though.. I was able to make the “container or box” under the slider 100% page width thanks to the above code( I asaw this by changing its background color) … unfortunately the text is still about 75% of the page width (it even started to be aligned to the left side after the css changes but that is not a problem.. any ideas on how to make the text 100% page width?.. of course Im using the customizr theme with a child theme.. any help will be greatly greatly appreciated, Greg 🙂

  • Longabaugh

    Need to add this to avoid a square gray area around circled image in your post list if you set your home as a static page.

  • Debbie Wentworth

    Is there any coding etc to allow me to remove the left and right containers so my pages can take up the entire width of the screen the same as the heading area?

    • Nicolas

      Hi Debbie,

      If you need to have your website content taking up the entire screen width, then you need to add tge following CSS code :

      If you need to handle the sidebars, you might want to check this part od the documentation :

      Hope this will help!

  • claude Stemmelin

    I just started to use customizwe its early stage on building my site ,
    I manage to change the colour background for header it work but colour didn’t change in navbar wraper,box ,its still white .Tool developer of safari say it is black ??
    Thanks for u help

  • Kai


    On my website I notice some very slight differences in the white of background. Specifically on any pages that have tables, the 1st, 3rd, 5th etc row will be slightly not-white in background, it is almost like light pinkish… I’ve tried setting the bgcolor to white, pinkish hue remains.

    Also, this same hue shows up on both sides of my main content as blocks. It is hardly visible but it’s there. The page layout is full width. I Think this part of it has to do with me changing the main wrapper’s BG to white, so now it’s more white than the original BG, leaving me with these “blocks” of pinkish hue next to the main wrapper… any advice?


    • Kai

      Okay never mind on the main warpper thing, found the blocks and changed them (main body…I’m an idiot) still the table thing remains though.

      • Dave Bardell Post author

        Sorry for not responding sooner and for this standard reply:
        I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.

  • Abdallah Suleiman Katsina

    Hello Mr. Nicolas,

    I’m really becoming so friendly user with Customizr theme even though i purchased the page unlimited plugin but i don’t know how to use or get the unlimited pages.
    however, i went through the edit.css guiding process, everything went well except the codes below that could not change anything.
    /* Fix the White Rectangles (including FPU extension) */
    .round-div, .span3 .widget-front .round-div {
    border: 104px solid pink; /* Change pink */
    what do i do to?
    Abdallah S. Katsina

  • Arik Elimelech

    For the featured pages,

    did the job for me, whereas your suggestion

    moved the circles asymmetrically.
    (I’m using FPU with four pages per row)

  • David Loach


    I would like to change the hyperlink colors in the text on my website, but only for material that is in the main wrapper/body text. Every time I put CSS code into the css.styles file to do this, it either effects the slider, menus and everything, or nothing at all.

    This is the basic html/css, and I’ve put various selectors with it.

    a:link {color:#0000FF;}
    a:visited {color:#660066;}
    a:hover {color:#FF00FF;}
    a:active {color:#FF0000;}

    Is there a particular selector that lets me do this properly? Or perhaps a different file to paste it to? I’m very confused and a bit new to coding sites. Any help is much appreciated!


    – David

  • Misa

    PS. I could extend the logo size. Now I need to center the logo. I looked at ‘Center the header block’ article and tried to create functions.php file for my child theme. I uploaded a php file to the root folder of the child theme. But it returns error, ‘Fatal error: include(): Cannot redeclare class tc___ in /home/ricky7r/public_html/wp-settings.php on line 323’. I wonder what needs to be done to fix this? Thank you!

  • Misa

    Hi, I am trying to add background image to the header too and it doesn’t work … Or I wish I can change the logo size to spread horizontally. Any advice? Thank you.

  • Thomas Romil

    Hi, I would make an image in the background of the .tc-header but it doesn’t work.
    Can you help me ?

Comments are closed.