WordPress.org

Forums

Twenty Eleven
[resolved] Left align header and content on every page (5 posts)

  1. Kaelly
    Member
    Posted 2 years ago #

    I'm trying to edit a child of the Twenty Eleven theme and can't figure out how to get the header and content left aligned. I have the "Agilent Technologies" spark image at the top left aligned, but everything else on the page looks centered.

    http://esl-design-notebook.tm.agilent.com

    What can I enter into my style.css child theme to get everything (header text, header image, and all posts) to be left-aligned? Thanks so much!!!!!

  2. paulwpxp
    Font hero
    Posted 2 years ago #

    To do what you asked for, put this in your child theme's style.css just below the @import line

    #page{margin-left:0;margin-right:0;}

    but I would recommend not doing that, because actually it's the logo at the top that is in need of fixing. The logo should be placed using css image replacement of site title.

    Also the html source is showing some <meta> tags inside <body> instead of <head>, the meta tags are of fb open graph, so I'm guessing that it's an attempt to insert the logo for fb thumbnail or something, whatever it is, it's wrong to see meta tag inside body.

  3. Kaelly
    Member
    Posted 2 years ago #

    Thank you!!!! That's exactly what I wanted--it's now all left-aligned! But you are right, the logo at the top is a problem now. It's still there, but it's not clickable anymore.

    Can I edit the style.css to do as you say--place the logo using the css image replacement of site title? How would that code look?

  4. paulwpxp
    Font hero
    Posted 2 years ago #

    The clickability problem was there at the beginning too, but you couldn't notice because you are using a wide screen computer.

    TwentyEleven is built responsive, so any customization should be tested in various screensizes ( down to 320px which is the viewport's width of iphone portrait ). You don't need to use the real devices, just resize your browser (width-wise), all the elements should be in good shape while scaling.

    To use the CSS image replacement of site title, first you have to remove that image from the html markup (along with the meta tags there that should be inside head as mentioned earlier), once that's removed from the markup, put this in the childtheme's style.css

    #page{margin-left:0;margin-right:0;}
    
    #branding hgroup{margin:0;}
    
    #site-title {
    background: url("http://esl-design-notebook.tm.agilent.com/wp-content/uploads/2013/03/4c_CorporateSig-noHL300x58.jpg") no-repeat scroll 0 0 transparent;
    background-size:contain;
    width:300px;height:60px;
    margin:0;padding:0;
    text-indent:-9000px;
    }

    All the above should get the look the way you want already.

  5. Kaelly
    Member
    Posted 2 years ago #

    Awesome! It's all left aligned now! Thanks!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic