Adjust Sitewide Background & Text Color/Size

Note : This snippet applies to Customizr version 3.1.x and below. It may not work with version 3.2+. Use with caution on 3.2+ and check the availability and type of the hooks in the Customizr hooks API.

Last Reviewed: 11-Apr-14

If you need to Adjust Sitewide Background & Text Color/Size:

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 – Themes&Co Footer

Step 7 – Widgets Footer

 

Step 8 – Adjust sitewide fonts size/color

 

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


About Dave Bardell

My name is Dave Bardell (@rdellconsulting) and have been supporting the Forum since discovering this wonderful Theme. Have learnt a lot from other Supporters (@acub, @tomaja, @ElectricFeet, in particular). Have a library of snippets I've built up which in adding here, I'll try to acknowledge the original contributor but apologies to any I miss or wrongly attribute. daveb@rdellconsulting.com


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

  • Reply
    Thomas Romil

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

  • Reply
    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.

  • Reply
    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!

  • Reply
    David Loach

    Hello,

    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!

    Cheers,

    – David

  • Reply
    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)

  • Reply
    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

  • Reply
    Kai

    Hi,

    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?

    Cheers

    • Reply
      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.

      • Reply
        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.

  • Reply
    claude Stemmelin

    Hi
    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

  • Reply
    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?

    • Reply
      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 : http://www.themesandco.com/customizr/#layout

      Hope this will help!

  • Reply
    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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">