Support » Themes and Templates » About background color and font size

  • Hi all,

    I’m using TwentyEleven Theme and have its Child Theme added. I’m referring to following 2 documents;

    Child Themes – Codex tools: Log in
    http://codex.wordpress.org/Child_Themes

    Creating a Simple Child Theme Using Twenty Eleven
    http://wp.tutsplus.com/tutorials/theme-development/creating-a-simple-child-theme-using-twenty-eleven/

    but unable to resolve;

    1) how to change the background color of Home and other pages added?
    2) how to change the color of Home and Pages on the menu bar and their font size?
    3) how to change the background color of the header?
    4) If I make change on;
    Appearance -> Themes -> TwentyEleven -> Header
    it changed the picture. Not the header about the picture

    5) If I make change on;
    Appearance -> Themes -> TwentyEleven -> background
    it changes the complete background of the website. The hearder above the picture disappears.

    Please help how to change their color and font size. TIA

    Rgds
    satimis

Viewing 8 replies - 1 through 8 (of 8 total)
  • me Too i had the same problem please help us to verify it .

    You have to edit the css background color codes.

    body{
    background: #727D82;
    }  
    
    header#branding{
    background: #29305C;
    color: #B3BDC1;
    }

    For the twentyEleven default theme nav bar you would need to change the anchor css rules. You may need to adjust other elements like line-height or padding.

    #access a {
        color: #EEEEEE;
        display: block;
        line-height: 3.333em;
        padding: 0 1.2125em;
        text-decoration: none;
        font-size:.89em;   //Add font size and change to what ever you want.
    
    }

    Hi gabrielcastillo,

    Re background color;
    Is it style.css? Parent or child ?

    Parent:
    /var/www/wordpress/wp-content/themes/twentyeleven/style.css

    Child
    /var/www/wordpress/wp-content/themes/twentyeleven-child/style.css

    style.css of Child is an empty file.

    Re line-height or padding
    Again is it Parent’s style.css ?
    Now;
    #access a {
    color: #eee;
    display: block;
    line-height: 3.333em;
    padding: 0 1.2125em;
    text-decoration: none;

    What is “text-decoration: none;”? for

    Furthermore what will be the use of Child? Thanks

    satimis

    Do not edit the parent theme styles – copy the code to your child theme file and make the changes there.

    Hi WPyogi,

    Thanks for your advice. Performed following steps:-

    On terminal-
    $ sudo cp /var/www/wordpress/wp-content/themes/twentyeleven/style.css /var/www/wordpress/wp-content/themes/twentyeleven-child/style.css

    $ sudo vi /var/www/wordpress/wp-content/themes/twentyeleven-child/style.css

    made changes there. But it didn’t work.

    Did it via Dashboard as follow;
    Appearance -> Editor – Select theme to edit [twentyeleven-child] -> Select
    editing
    -> Update File

    However following codings fails to work;
    1)
    body {
    background: #727D82;
    }
    header#branding {
    background: #29305C;
    color: #B3BDC1;
    }

    2)
    #access a {
    color: #EEEFF;
    display: block;
    line-height: 3.333em;
    padding: 0 1.2125em;
    text-decoration: none;
    font-size:1.89em;

    No header displayed. No background color on Home/Page-1/Page-2 etc.

    Please advise how to fix the problem.

    However if I enter coding 2) above on style.css of Parent then it works. Home/Page-1/Page-2 on blue color with bigger size font

    Besides;
    I have tried adding html coding on;
    Edit Page -> Text (mode)
    but no effect.

    Any tricks? TIA

    Rgds
    satimis

    It’s not possible to assist with CSS without seeing the page live – if you can post a link to your site someone can likely help you sort out what the problem may be.

    Otherwise, make sure your code is valid – and try using Firebug (browser tool) to see what’s going on with the CSS.

    Also, what is the code at the top of your child theme (i.e. the commented section and the @import line) – post it here using the code buttons

    > Also, what is the code at the top of your
    > child theme
    Whether you meant following section?

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;

    > It’s not possible to assist with CSS
    > without seeing the page live – if you can
    > post a link to your site …
    Sorry this is local install WordPress without URL. I can post a screenshot on my private cloud and post the link here. Would it help?

    Firebug is NOT on Ubuntu repo. I’ll download it on;
    http://getfirebug.com/whatisfirebug

    Later. Thanks

    Rgds
    satimis

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘About background color and font size’ is closed to new replies.