New eleven40pro theme – center header image

[mikemahony]

Hi, I am trying to center the header image and using Chrome developer tools was able to find the CSS to change to make it center:

.site-header .title-area {
background: url(http://americanyouthhockey.com/wp-content/uploads/2013/09/HomeBanner.png) no-repeat center!important;
}

However I do not know where the CSS file is to modify for this. It seems to have been generated on the fly. You see, when I do inspect element I usually see the URL plus "style.css" and a line number. This just shows me the URL and a line number.

The site is http://americanyouthhockey.com and I want to center the header up top. Where oh where is this CSS hiding?

http://americanyouthhockey.com

[Brad Dalton]

In your child themes style.css file.

---

Tutorials for StudioPress Themes.

[mikemahony]

Brad, thanks, but that's not correct. There are 3 references to .header-image .site-header .title-area in the child theme's styles.css file:

.header-image .site-header .title-area {
		background-position: center center !important;
	}

.genesis-nav-menu,
	.site-header .title-area,
	.site-header .search-form,
	.site-header .widget-area,
	.site-title {
		text-align: center;
	}

.header-image .site-header .title-area {
		background-size: contain !important;
	}

Not a one of these matches what I posted. As I said, Chrome Developer Tools ALWAYS references the file name and this time does not. It appears that this is generated on the fly which makes sense since you upload the banner graphic via the "header" section of the "Appearance" menu area.

Anyone have an idea of where this will be found so I can change it?

[mikemahony]

Thanks to Jennifer with CopyBlogger support this issue is resolved. All I had to do was add this to the Child theme's CSS:

.site-container .site-header .title-area {
       background-position: center !important; 
}

It works like a charm!

[Author]

Posts