Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] How do you Resize Header Image? (http://forum.bytesforall.com/showthread.php?t=11532)

Zoe1416 Dec 4, 2010 08:20 PM

[SOLVED] How do you Resize Header Image?
 
1 Attachment(s)
I haven't been able to find this question in any of the forums, (if there are threads already, please point me in the right direction). I'm an absolute newbie at design, html, etc. So exact directions would be greatly appreciated.

Here is my site: http://pregnancybaby411.com/

It was previously a Blogger blog, and I bought my own domain and I'm in the process of switching my blog over. I still have the blogspot blog until I can get the theme and design that I want. Since I'm a broke writer, I'm trying to do it myself without hiring a designer.

Anyway, here is my question.

Is it possible for me to resize my header image? Instead of the standard size given in the template, is it possible for the header image to be taller? I've hidden the Blog Title, since the header image I'm using has the title in it.

As you can see on my blog (http://pregnancybaby411.com/) There is a large gap between the top and the banner image.

SO I'd love any suggestions on how to make my header image taller, so it reaches all the way to the top of the page.

Also, is it possible to make the header wider, so that it stretches to the sides ... without changing the width of the blog entries?

I had attempted to change the width, but it changes the width of the entire page. And that's not what I'm aiming for. I'd like the banner image to stretch all the way from left to right, and to fill until the top.

I hope that makes sense. Thanks for your help.

I've attached a screenshot to explain what I mean.

juggledad Dec 4, 2010 08:40 PM

Look at the options for the header image. You can make yhr SPACE for the image taller, but you cant scale the image, you need to do that prior to putting the image in the images/header folder.

lmilesw Dec 5, 2010 07:17 AM

Also you might want to look in ATO>Style & configure Layout. Change
HTML Code:

padding: 20px;
to
padding: 0 20px 20px 20px;

That will remove the space above your image.
Is that what you are looking to do?

Zoe1416 Dec 5, 2010 01:09 PM

Larry, I tried to change the HTML code with the padding that you suggested, but the space above my header image is still there...

Arg.

webgurl Dec 5, 2010 01:36 PM

The site looks good! Did you fix your problem?

juggledad Dec 5, 2010 02:35 PM

ato->Body, Text & Links->Body Style remove the 'padding-top:20px;'

Zoe1416 Dec 5, 2010 03:52 PM

Hey Juggle Dad,

Thanks for the suggestion. The gap did get smaller, but there is still a slight gap above and below the image header. Is there anyway to remove that?

I removed the padding-top as you suggested, but the slight gap still exists.

Thanks.

lmilesw Dec 5, 2010 07:24 PM

One way to get rid of that would be to put the following in ATO>Add HTML/CSS Inserts>CSS Inserts
HTML Code:

div.header-image-container {
margin-top: -5px;
}


Zoe1416 Dec 5, 2010 07:37 PM

Thanks Larry!!!

How do I get rid of the gap on the bottom of the header (between the image header and category bar)? Can you give me the code for that? Thanks!

lmilesw Dec 5, 2010 07:57 PM

I couldn't get anything to work without messing up the menu. Not quite sure what is going on. However since you are not using rotating images have you considered using an image in place of %image in ATO>Style & edit Header Area? In your case you would take out %image and add the following.
HTML Code:

<img src="/wp-content/themes/atahualpa/images/header/blogbanner970.jpg" />

Zoe1416 Dec 5, 2010 08:01 PM

Perfect! That fixed the problem. thanks a billion!!!!

:)

This has been the best forum!

juggledad Dec 5, 2010 08:14 PM

the problem with the header image is this code in the CSS Inserts, it's adding a 5px top and bottom border and the border is white. So take this code out and Larry's suggestion of the 'margin-top: -5px;'
HTML Code:

div#imagecontainer {
border-top:solid 5px #FFFFFF;
border-bottom:solid 5px #FFFFFF;


lmilesw Dec 5, 2010 09:09 PM

And why didn't I see that:confused::(


All times are GMT -6. The time now is 01:01 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.