WordPress.org

Ready to get started?Download WordPress

Forums

About background color and font size (9 posts)

  1. satimis
    Member
    Posted 1 year ago #

    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

  2. ramiszaro
    Member
    Posted 1 year ago #

    me Too i had the same problem please help us to verify it .

  3. gabrielcastillo
    Member
    Posted 1 year ago #

    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.
    
    }
  4. satimis
    Member
    Posted 1 year ago #

    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

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  6. satimis
    Member
    Posted 1 year ago #

    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

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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

  9. satimis
    Member
    Posted 1 year ago #

    > 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

Topic Closed

This topic has been closed to new replies.

About this Topic