On the 2011 theme - how do I left-justify the Header Title? (11 posts)

  1. tman2001
    Posted 4 years ago #

    Hi - I'm using the 2011 theme - and I'm trying to make some finesse
    changes to it now. I notice on the 2010 theme, the text is right at
    the left margin. On the 2011 theme - it seems that the header title
    is 'tabbed' out. How do I bring it back to the left margin?

    Thanks folks......

  2. stvwlf
    Posted 4 years ago #

    Line 78 in style.css

    #branding hgroup {
        margin: 0 7.6%;

    adjust 7.6% to a smaller value to move the text more to the left. Actually that will move the right margin too, so change it like this
    margin: 0 7.6% 0 2.5%;

    Adjust 2.5% until the left margin is set where you want it.

  3. tman2001
    Posted 4 years ago #

    thank you first of all for your reply
    but let me make sure I understand you....

    I should LEAVE the "0 7.6%" as is - and ADD "[space]0[space]2.5%;"

    and then PROGRESSIVELY adjust the "7.6%" to a smaller value while
    STILL adding the "0 2.5%;"??

  4. stvwlf
    Posted 4 years ago #


    No, that is not correct. Sorry for presenting it in an ambiguous way.

    The easiest is explain what the four numbers mean:

    margin { top right bottom left );

    so margin: 0 7.6% 0 2.5%; is leaving the right margin to what it is now, while it's reduced the left margin to about a third of what it is now. It's the 2.5% you want to adjust to change the left margin. Is that clearer?

  5. tman2001
    Posted 4 years ago #


    This is really giving me somewhere to go now.

    I'm going to try this right now. Again, thanks

    I appreciate your time & knowledge!

  6. tman2001
    Posted 4 years ago #


    Worked like a charm.

    I kept adjusting the final # like you said til I got it
    where I wanted. Nice and simple for a non-CSS knowledgeable
    person like myself - I wouldn't have wanted to change multiple
    lines of code - I'd have been WAAAAY too nervous to do that.

    Thanks again for your help, stvwlf!

  7. stvwlf
    Posted 4 years ago #


    You are welcome. Glad it was helpful

  8. stvwlf
    Posted 4 years ago #

    Hi - I just realized, I should let you know that if you are going to make changes to the twentyeleven theme that you should create a child theme and make your changes in the child theme. That is because when WordPress upgrades to a newer theme version, the newer twentyeleven will overwrite your modified twentyeleven and your changes will be lost.

    Here is the WordPress Codex page about child themes, and also a link to a tutorial on making a simple twentyeleven child theme.



    This method will let you change the default theme and not lose your changes when the theme upgrades.

  9. tman2001
    Posted 4 years ago #

    Thanks - I'll have to study that to make sure I don't mess anything up when I make it.

  10. stvwlf
    Posted 4 years ago #

    That tutorial makes it overly complicated for the simple changes you want to make, actually.

    If your changes are few all you need is to make a new stylesheet in a new folder for the child theme, import the stylesheet from twentyeleven, and put the changes to the stylesheet that you make in the new stylesheet.

    The import of the twentyeleven stylesheet (which takes one line of CSS) means you only need to put styles you are changing in the new stylesheet. Thus it is going to be very short - you would put the margin change I sent you earlier in the new stylesheet rather than in the twentyeleen stylesheet.

    If that is the only change you made, the new childtheme stylesheet is just only this:

    Theme Name:     My Site Theme
    Theme URI:      http: //example.com/
    Description:    Child theme for the Twenty Eleven theme
    Author:         Your Name
    Author URI:     http: //your-site.com/
    Template:       twentyeleven
    Version:        1.0
    @import url("../twentyeleven/style.css");
    #branding hgroup {
       margin: 0 7.6% 0 2.5%;

    The important parts are
    1) it has its own theme name (first line in the stylesheet header comments)

    2) its in its own folder in /wp-content/themes/

    3) twenetyeleven is listed in the header comments as the template - that tells WordPress that twentyeleven is the parent theme

    4) the parent theme's stylesheet is imported at the very top of the child stylesheet (just after the header comments).

  11. tman2001
    Posted 4 years ago #


    Again...Thank You!!

Topic Closed

This topic has been closed to new replies.

About this Topic