How can use a larger header for my blog (imbalance 2 theme)

allthingsebonybrown · Member · Feb 29, 2012 at 1:26 am
Copy link

Add topic to favorites
How can I get my 970×281 sized header in the of header section of my blog (imbalance 2 theme) like this one: http://thepatternedplate.wordpress.com/

The Header Size Option in Imbalance 2 is limited to 210×170 as displayed on my blog at http://www.allthingsebonybrown.com

*Using the Appearance>Header option only allows the 210×170 and all other sizes are cropped.
*Using “image” and “text/html” widgets in the header section on the widget page won’t allow use of a larger header, I tried.
*Purchasing the CSS upgrade warned that certain “theme changes” may not be permitted, does this include changes to default header size?

What are my options?

Please help!

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Mar 1, 2012 at 3:44 pm
Copy link
You can override the built in header size option using CSS. See https://en.forums.wordpress.com/topic/enlarging-your-header-image-in-imbalance2?replies=4
allthingsebonybrown · Member · Mar 9, 2012 at 6:38 pm
Copy link
Thank you, somebody was able to help me with the header code BUT I have 2 additional problems.

1. SPACING: How do you decrease the space between the top of the header image and the top of the screen/page. I had a different header up and wanted the picture to start at the tippy top of the page/screen with no space.

This code does not address the area described above:
#header {
padding-bottom:0;
padding-top:0;
}

2. How can I make my menu horizontal, instead of vertical? I was in a forum which gave instructions but those instructions didn’t work for me because, although I copied and pasted the code into the CSS area, it did not override the default CSS (I have the WP CSS editing package) Help!
the80prf · Member · Mar 19, 2012 at 7:19 pm
Copy link
I have the same question for the spacing; trying to find out how ot reduce that height.
the80prf · Member · Mar 19, 2012 at 8:00 pm
Copy link
I think I found the way although I still want to bring he body up to closer to header.

The original CSS code looks like below;

#header {
border-bottom: 1px solid #dedfe0;
padding-bottom: 50px;
}

And then, I’ve changed it to;

#header {
border-bottom: 1px solid #dedfe0;
padding-bottom: 0px;
}

Now, I see the spacing has been reduced a lot.
designsimply · Member · Mar 28, 2012 at 2:14 pm
Copy link
How do you decrease the space between the top of the header image and the top of the screen/page. I had a different header up and wanted the picture to start at the tippy top of the page/screen with no space.

To remove all of the space above the header area in the Imbalance 2 theme, use this CSS:
```
body, #wrapper {
padding-top: 0;
}
```
@allthingsebonybrown, in your case, the image itself has a lot of white space in it and that’s where some of the extra spacing is coming from: http://allthingsebonybrown.files.wordpress.com/2012/03/headerallthingsebonybrown16.jpg

To get around that in your case, you could either upload an image without all that extra white space in it, or you can use a negative margin for the header area to push part of the header image off screen:
```
#header {
margin-top: -75px;
}
```
Note that this CSS is specific to the current setup in the http://allthingsebonybrown.com/ site and depends on the images and CSS currently in use there. If you have made different CSS edits, you may need to adjust this CSS.
designsimply · Member · Mar 28, 2012 at 2:47 pm
Copy link
How can I make my menu horizontal, instead of vertical?

I see that you have used the following CSS to make the menu in your Imbalance 2 theme horizontal instead of vertical:
```
.menu ul li {
float:left;
padding-right:20px;
padding-top:8px;
}

#header-left {
width:680px!important;
}

.menu ul ul {
left:0;
position:absolute;
top:0;
width:auto;
}
```
That CSS will work for top level menu items, and I checked http://allthingsebonybrown.com/ and I can see a horizontal menu there right now. Please post another reply if you still need any help with your menu.
designsimply · Member · Mar 28, 2012 at 2:55 pm
Copy link
@the80prf, thanks for posting your CSS! Your question is slightly different because you want to reduce the spacing below the header, not above it. If you want to decrease that spacing even more, you can add this in addition to what you already have:
```
#branding {
min-height: 120px;
overflow: hidden;
}
```
allthingsebonybrown · Member · Mar 29, 2012 at 7:39 pm
Copy link
…I’m just seeing all of this! Thank you so much… I will test out the spacing issue with another header…. I only went with my “white space” header because of the spacing issue. I didn’t like the space break and then image…anyways… I’m going to trying it out!!!
allthingsebonybrown · Member · Mar 29, 2012 at 7:40 pm
Copy link
correction: “try” not “trying”

No items found.