Changing Quintus header

aapsblog · Member · Apr 24, 2012 at 4:34 pm
Copy link

Add topic to favorites
I’m working on creating a new blog, and I only have access to the CSS. The header image in the Quintus theme is way too big (height)– it is about all that displays on a small screen. I want to make the height of the image smaller, but changing the height in the .blog-header element doesn’t do anything. It would be easiest if I could just have the background be an image from a URL, but it won’t allow that either. Any ideas? I just want a smaller header image!

Thanks!

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Apr 25, 2012 at 1:38 am
Copy link
I see that you switched to the Chateau theme and you were able to make the header image in your the http://aapsblog.wordpress.com/ blog smaller with this CSS:
```
#main-image img {
	height:116px;
}
```
If you still need help or if you want to change out the header image an image other than one you add via the Appearance → Header page, please post back with a link to the image that you have already uploaded separately to your image library.
aapsblog · Member · Apr 25, 2012 at 12:57 pm
Copy link
Hi, thank you so much for your response. I was impatient and changed the theme yesterday, but I’d still like to learn how to change the image size in the Quintus theme, which I have applied to the blog now. The current size is 1100 px x 250 px, but I’d like to try the size, 1100 px x 116 px. I’ve tried changing the size in:

.blog-header {
}

And I’ve tried changing the background URL to the image, among many other changes. It also appears that I have messed up something with the spacing, since the current image is being cut off– maybe padding or margins. I haven’t worked in this theme for a while and I forget.

Here is the image link for the 1100×116 image that I’d like to try for the header:

Any help changing the header image size in Quintus would be appreciated.

Thank you!
designsimply · Member · Apr 25, 2012 at 5:18 pm
Copy link
The current size is 1100 px x 250 px, but I’d like to try the size, 1100 px x 116 px.

No problem. First, there are a couple rules inside the Quintus stylesheet that force the height of the header area to 250px. You can override those by finding them and setting them to 116px like this:
```
#site-title, #site-title a {
	min-height: 116px;
}

.blog-header {
	height: 116px;
}
```
Then replace the entire “.blog-header” block you had before with this one instead:
```
.blog-header hgroup {
	background: url('http://aapsblog.files.wordpress.com/2012/04/title1100x1161.jpg') no-repeat;
}
```
designsimply · Member · Apr 25, 2012 at 5:20 pm
Copy link
And I just noticed you wanted a 1100px width but the Quintus theme is 940px by default. Do you want to adjust the entire width of the theme from 940px to 1100px?
aapsblog · Member · Apr 25, 2012 at 8:12 pm
Copy link
Thank you so much for your help. This is on the right track…

The original stylesheet that I downloaded definitely has the width of the header as 1100px and the “Header” tab in WordPress asks for an image that is 1100px by 250px. So I’m not sure about your second question referring to the 940px width.

For your first response, adding the .blog-header hgroup helped. Although, in the first step I changed the height within the .blog-header element, but then in the second step it says to remove that element altogether. I tried it with and without that element and it didn’t seem to make a difference. Everything looks good in IE9, but in compatibility mode (IE8), it doesn’t fit at all. Any ideas?

I really appreciate all of your help!
aapsblog · Member · Apr 25, 2012 at 8:29 pm
Copy link
A couple things that I just noticed:

The header size/image only works in IE9 if the .blog-header element is still activated; when it is not active, there are overlapping images that don’t fit. IE8 doesn’t work either way.

I see the 940px width in the stylesheet for the body, but I was thinking that was the body of the content; the #page element has a max-width: 1100px. I need to play with that some more!

Thanks!
designsimply · Member · Apr 25, 2012 at 8:36 pm
Copy link
The original stylesheet that I downloaded definitely has the width of the header as 1100px and the “Header” tab in WordPress asks for an image that is 1100px by 250px. So I’m not sure about your second question referring to the 940px width.

I reviewed Quintus again, and I found the width for the “.blog-header” is 1100px but the “#page” width is 940px and so the container for the blog content in that theme is really 940px. I’m not sure why the header image area is larger like that. Perhaps it’s to give flexibility to make the blog wider if needed.
designsimply · Member · Apr 25, 2012 at 8:39 pm
Copy link
In the instruction, I meant to replace the previous “.blog-header” rule you had with the new one I provided. Sorry that wasn’t clear before.

The reason IE8 isn’t working is that it is an outdated browser doesn’t recognize the hgroup element.

Try using a different element instead, for example h1 instead of hgroup. Here the example repeated again with the change:
```
#site-title, #site-title a {
	min-height: 116px;
}

.blog-header {
	height: 116px;
}

.blog-header h1 {
	background: url('http://aapsblog.files.wordpress.com/2012/04/title1100x1161.jpg') no-repeat;
}
```
alldonewithmirrors · Member · May 12, 2012 at 4:22 pm
Copy link
Hi

I’ve cut and pasted the code above to reduce the height of the header – thanks for that! However, I’d also like to now upload my own jpeg to the header area and it doesn’t fit. Is there a way of reducing the header size without having to paste in the link to the replacement jpeg?

Thanks

Chris
designsimply · Member · May 14, 2012 at 9:51 pm
Copy link
You should create a header image with the size dimensions you would like to use and upload that first, then replace the image URL in the example CSS from above with your new image.

I checked your blog and I found you’re currently attempting to use an image that is 4583 x 729 pixels, and it’s hard to tell a custom header image is used at all because only a little bit of top left part is showing.
http://alldonewithmirrors.files.wordpress.com/2012/05/moylan-header-page001.jpeg

In addition, in your case you will probably want to hide the site title and tag line and get rid of some of the margins and padding associated with those things because your header image contains text already. So, this is really a bit more of a complex question than the original question, and I’ve come up with a possible solution and posted it below.

On your Appearance → Custom Design → CSS page, try replacing this CSS which is currently saved there:
```
#site-title,#site-title a {
	min-height:116px;
}

.blog-header {
	height:116px;
}

.blog-header hgroup {
	background:url('http://alldonewithmirrors.files.wordpress.com/2012/05/moylan-header-page001.jpeg') no-repeat;
}
```
With this instead:
```
#site-title {
	padding: 0;
}
#site-title,#site-title a {
	min-height:144px;
}
#site-title a:hover {
	border-bottom: none;
	border-top: none;
}
.blog-header {
	height:144px;
}
.blog-header hgroup {
	background:url('http://alldonewithmirrors.files.wordpress.com/2012/05/moylan-header-page001.jpeg?w=940') no-repeat;
}
.blog-header hgroup h1 a {
	display: block;
	text-indent: -9999px;
}
#site-description {
	display: none;
}
```
If you have additional questions, please start a new, separate thread and reference your comment on this thread as a starting point.
https://en.forums.wordpress.com/topic/changing-quintus-header?replies=10#post-885062

No items found.