Duster: Can I change the header default height from 300?

somewhereinourworld · Member · Mar 4, 2011 at 9:19 am
Copy link

Add topic to favorites
Would like to see how the header looks using the dimensions 1000×100 (or something like that). I understand that I cannot change the width, however I can’t find anything in the CSS that allows me to modify the height.

Any suggestions?

Many thanks,
Tanya

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 4, 2011 at 10:34 am
Copy link
1. Create a new 100px tall header image.

2. Go to appearance > header and click the “remove header” button and then click the save button. You won’t be able to use the header uploader as it will always try and make the image the original size. You will upload the new image to your media library, get the URL of that image and then put it in the background declaration in #branding img in the CSS as shown below. I added a 100px height declaration.
```
#branding img {
background: url("URL of header image here") repeat scroll 0 0 transparent;
height: 100px;
}
```
somewhereinourworld · Member · Mar 4, 2011 at 10:41 am
Copy link
Oh, that makes total sense!

I’d been fooling around with the URLs trying out a few other things, but it didn’t strike me to do this..I really appreciate your help thesacredpath, thank you so much for your very prompt reply!

Tanya
somewhereinourworld · Member · Mar 4, 2011 at 11:02 am
Copy link
Ok. So 20 minutes ago, it made total sense but since then I think I’ve some how made a mess of your very clear instructions. (Will not answer next time, until I’ve tried it :))

This is exactly what I have (and I have also removed the previous header), and now no header image appears at all.
```
#branding img {
background:url('http://naunet06.files.wordpress.com/2011/03/100.jpg') repeat scroll 0 0 transparent;
height:100px;
}
```
thesacredpath · Member · Mar 4, 2011 at 11:23 am
Copy link
Alright, now that I have your image, I see we have to go about it a little differently with Duster. This will fix things I think.
```
#branding {
background: url("http://naunet06.files.wordpress.com/2011/03/100.jpg") no-repeat scroll 0 0 transparent;
height: 100px;
}

#access {
margin: 100px auto 6px;
}
```
The one thing is that the image is no longer clickable to take you back to the home page, so you will have to add a home page link to your menu.
somewhereinourworld · Member · Mar 6, 2011 at 7:55 pm
Copy link
Thank you so much for your follow up! Unfortunately I now have a 1000×100 blank space where the header image should be. I’ve double checked the uploaded image’s url and it is correct.

On another note, the search field now also popped up into the header space. Eeeek!

I really appreciate all of your help. If it’s not possible, I totally understand!

Thank you
thesacredpath · Member · Mar 6, 2011 at 9:00 pm
Copy link
With the last bit of code I gave (#branding and #access) this is what I see using Firebug in Firefox.

Put the code back in and then post back here so I can take a look at it.
thesacredpath · Member · Mar 6, 2011 at 9:02 pm
Copy link
Add this to move the search box back to the end of the navigation bar.
```
#branding #searchform {
margin-top: 110px;
}
```

No items found.