Centering header image

  • Resolved vincentdavis

    (@vincentdavis)


    11 years, 6 months ago

    I added a second temporary header image to the twenty twelve theme. Now both imaged are aligned to the left and I cant figure out how to center them.
    stevetilford.com

    This is what I have

    if ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
			<br>
			<a href="http://www.rutsandguts.com/"><img src="http://www.stevetilford.com/wp-content/uploads/2012/10/rutsandguts.jpg" class="header-image" width="<?php echo get_custom_header()->width/2; ?>" height="<?php echo get_custom_header()->height/2; ?>" alt="" /></a>
		<?php endif; ?>
Viewing 11 replies - 1 through 11 (of 11 total)
  • esmi

    (@esmi)

    11 years, 6 months ago

    Do not edit the Twenty Twelve theme. It will be the default WordPress theme in WordPress 3.5 and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

    Thread Starter vincentdavis

    (@vincentdavis)

    11 years, 6 months ago

    But I am impatient and this is temporary 🙂
    Yes I need to read about child themes

    I would still like an answer to the question.

    Thanks

    Thread Starter vincentdavis

    (@vincentdavis)

    11 years, 6 months ago

    Ok I have a Child theme now. It works as in having only added @import url(“../twentytwelve/style.css”);

    Now I don’t know how to add the second header image or center after I add it in the child theme.

    Thanks again

    esmi

    (@esmi)

    11 years, 6 months ago

    Now you need to activate your child theme and add your second header image.

    Thread Starter vincentdavis

    (@vincentdavis)

    11 years, 6 months ago

    Ah, I guess I make a new header.php in the child theme, but know the centering part?

    Thread Starter vincentdavis

    (@vincentdavis)

    11 years, 6 months ago

    Ok, I have the Child theme active and I am back to where I was before with my custom header with 2 images.
    HOW DO I CENTER 🙂

    Thanks

    esmi

    (@esmi)

    11 years, 6 months ago

    Try adding:

    .header-image {
    display: block;
    margin: 1.71429rem auto 0;
}

    to your child theme’s stylesheet. And please don’t post in uppercase. It’s the electronic equivalent of shouting and is considered quite rude.

    Thread Starter vincentdavis

    (@vincentdavis)

    11 years, 6 months ago

    @ esmi
    Great thanks you very much!
    Sorry about the uppercase, I did follow it with a 🙂 to suggest that I did not mean to be rude.

    leejosepho

    (@leejosepho)

    11 years, 4 months ago

    Leaving the margin-top settings as they already were, I have tried this from above in my Twenty Twelve Child Theme and my header image did not center:

    .header-image {
	display: block;
        margin-top: 24px;
	margin-top: 1.714285714rem auto 0;
}

    I have also looked in my header.php file without seeing anything there related to positioning. Any suggestions?

    Here is my site: http://www.nonameyet.org/

    WPyogi

    (@wpyogi)

    11 years, 4 months ago

    @leejosepho — per the forum rules, starting your own thread is a better way to get help.

    leejosepho

    (@leejosepho)

    11 years, 4 months ago

    Sure enough, and here is what worked for me:

    .header-image {
    display block;
    margin: 0 auto 2em;
}
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Centering header image’ is closed to new replies.