WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
[resolved] Center the header? (8 posts)

  1. rachel
    Member
    Posted 1 year ago #

    Hi,

    Apologies if this has been covered before, but I'm trying to center the entire header for my site using the awesome twenty twelve theme.

    As you can see from my site: http://www.squidinkediting.com

    I was able to center the header image, but I can't figure out how to center the rest.

    Thanks!

  2. Tara
    Member
    Posted 1 year ago #

    - Try using Firefox with the Firebug add-on for this kind of CSS work. http://getfirebug.com/

  3. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Make your CSS changes through this plugin http://wordpress.org/extend/plugins/custom-css-manager-plugin/

  4. rachel
    Member
    Posted 1 year ago #

    Thanks for those suggestions. Which class/id do I need to edit to get the custom image center-aligned?

    Looks like this works on Chrome and Safari but it's still left-aligned in FF.

    Thanks!

  5. paulwpxp
    Font hero
    Posted 1 year ago #

    Looks like you got header.php edited without child theme.

    Create a child theme
    http://codex.wordpress.org/Child_Themes

    and put your version of header.php in your child theme's folder, make sure the parent theme is fresh ( unedited ).

    Move <div id="title"> out from the <hgroup>

    so now you will have this structure

    <header>
    	<div id="title">...</div>
    	<hgroup>...</hgroup>
    	<nav>...</nav>
    </header>

    Take out all the align="center", for centering an image just use class="aligncenter" right in the <img> 's attribute.

    Adjust anything else like margin, or padding in your child theme's style.css

  6. rachel
    Member
    Posted 12 months ago #

    Thanks for this--do you mean that I should move

    <div id= title=<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>

    out from under <hgroup>?

    Once I do that, where does my header image go?

    Thanks.

  7. paulwpxp
    Font hero
    Posted 12 months ago #

    1. Yes.
    2. Look at the structure, it goes to the top, outside of it.

    Anyway, <hgroup> has just been removed from HTML5 specification, so all the HTML5 themes will soon be updated and folks who make a copy of header.php for child theme will have to edit this too.
    http://www.sitepoint.com/html5-hgroup-element-dropped

    So you don't have to worry about moving that out of <hgroup> anymore.

  8. rachel
    Member
    Posted 12 months ago #

    You're great. Thanks very much.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic