Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] How do you Resize Header Image?


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Dec 4, 2010, 08:20 PM
Zoe1416
 
15 posts · Dec 2010
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.
Attached Thumbnails
Click image for larger version

Name:	Screenshot.jpg
Views:	586
Size:	111.8 KB
ID:	930  
  #2  
Old Dec 4, 2010, 08:40 PM
juggledad's Avatar
juggledad
 
22,265 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Dec 5, 2010, 07:17 AM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
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?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #4  
Old Dec 5, 2010, 01:09 PM
Zoe1416
 
15 posts · Dec 2010
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.
  #5  
Old Dec 5, 2010, 01:36 PM
webgurl's Avatar
webgurl
 
59 posts · Nov 2010
WordPress 3.0/Atahualpa 3.4.9/Firefox 3.6.12/XP sp3/
The site looks good! Did you fix your problem?
  #6  
Old Dec 5, 2010, 02:35 PM
juggledad's Avatar
juggledad
 
22,265 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
ato->Body, Text & Links->Body Style remove the 'padding-top:20px;'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Dec 5, 2010, 03:52 PM
Zoe1416
 
15 posts · Dec 2010
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.
  #8  
Old Dec 5, 2010, 07:24 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #9  
Old Dec 5, 2010, 07:37 PM
Zoe1416
 
15 posts · Dec 2010
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!
  #10  
Old Dec 5, 2010, 07:57 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
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" />
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #11  
Old Dec 5, 2010, 08:01 PM
Zoe1416
 
15 posts · Dec 2010
Perfect! That fixed the problem. thanks a billion!!!!



This has been the best forum!
  #12  
Old Dec 5, 2010, 08:14 PM
juggledad's Avatar
juggledad
 
22,265 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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;
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old Dec 5, 2010, 09:09 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
And why didn't I see that
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Bookmarks

Tags
customization, header

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
IE is not picking up image resize but Safari is...! heatispower Center area post/pages 2 Aug 9, 2010 12:45 PM
[SOLVED] How to resize height of header image? LilyUK Header configuration & styling 0 Jul 27, 2010 03:47 PM
Automated resize of background image mipoes Header configuration & styling 0 Apr 23, 2009 03:44 AM
How do you get header Image(s) to automatically resize to the screen resolution? nkita Header configuration & styling 0 Mar 14, 2009 06:59 PM


All times are GMT -6. The time now is 04:46 AM.


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