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


25 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.

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

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

Leave a Comment

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

Please check the following point before adding your comment

  1. - Did you check that you have the latest version the theme installed ?
  2. - Did you read the documentation ?
  3. - If you think it could be useful, please check your system informations : Navigate to Appearance > About Customizr and go to the bottom of the page.
  4. - Did you check if your issue was already resolved ? Before posting a new topic, you'll want to make a quick research with our Google powered search tool below.

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="">