Question

I’ve recently downloaded the latest version of WordPress and I’m working on developing a child-theme off of the new Twenty Twelve.

When a user uploads a header image, its default styling is to place a 1px solid #d2d2d2 border around it, give it a 3px border-radius, a box-shadow and align it to the left.

As simple as this may sound I would like to keep this, but center align the header images instead and place a 1px solid #ededed line 32px below it (this line should extend to 100% of the sites width, so even if the header images are small, the line will continue passed the uploaded image to each side of the wrapper).

For some reason, I cannot target the right HTML and CSS rules to achieve this.

I’ve tried a number of things, from playing around with the header.php and /inc/custom-header.php files, modifying properties and placing at the very bottom of my style.css document:
header img, header img a, header a img, .header-image {

text-align: center; margin: inherit auto; padding-bottom: 32px; border-bottom: 1px solid #ededed;
}

header img:after, header img a:after, header a img:after, .header-image:after {
border-bottom: 4px solid red; padding-bottom: 32px;
}

How would I achieve this desired effect for when the user uploads a header image?

Thank you.

Answer 1

Change line 442 of your style.css:

.header-image {
    display block;
    margin: 0 auto 2em;
}