Header Size – Vigilance

mrshev · Member · May 5, 2010 at 6:15 pm
Copy link

Add topic to favorites
Hi, I was wondering how I could upload a custom image as a header in the Vigilance theme but it’s height is larger than the theme’s custom header options?

do I put something along the lines of:

#header_img myimagefile.jpg {
display:none;
}

Or something?

The blog I need help with is: (visible only to logged in users)
timethief · Member · May 5, 2010 at 6:23 pm
Copy link
I’m sorry but the specified size for a header in Vigilance is 920 x 180 pixels, and if you wish to have a larger header than that you will have to purchase the CSS upgrade and change it. http://en.support.wordpress.com/custom-css/
timethief · Member · May 5, 2010 at 6:26 pm
Copy link
@mrshev
OOPS! MY BAD! I’m sorry I just noticed this thread was already in the CSS forum. Have you read this post yet? http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/
devblog · Member · May 5, 2010 at 6:31 pm
Copy link
No… it’s kind of self explanatory that “display: none;” will make it so that nothing is displayed.

Try this:
```
#header {
background: transparent url(http://mrshev.files.wordpress.com/2010/05/mrshev1.jpg) 0 0 no-repeat;
}
```
You might want to change the text color of the blog title and description so that they’re readable over the background you’re using. The code for that is this:
```
#header h1 a, #header span{color: #fc0;}
```
You’d need to play with the HEX color (#fc0) to make it look good. The one I’m using is just an example
mrshev · Member · May 5, 2010 at 6:33 pm
Copy link
I do have the CSS upgrade and I have read that post. Sorry, I’m just a wee bit clueless – but is there a way of uploading a file that is 920 x 300 pixels?
mrshev · Member · May 5, 2010 at 6:36 pm
Copy link
Thanks Devblog, I’ll give that a whirl later.

Loved your photos – some look almost CGI, especially the bridge.
mrshev · Member · May 5, 2010 at 6:45 pm
Copy link
Tried it and the problem is is that it’s being cropped at 180 pixels.
mrshev · Member · May 5, 2010 at 6:50 pm
Copy link
Changed the height to 424 but now the blog text and page things are lost…
devblog · Member · May 5, 2010 at 7:12 pm
Copy link
First, thank you for your compliments on my photos. I really appreciate them.

Tried it and the problem is is that it’s being cropped at 180 pixels.

Weird because it didn’t when I tested it.

I see you changed themes. Ok, Home tab is there but not visible because of the background. Also the text of your blog title and description are there too but because their color is black they “hide” in your image background, that’s why I gave your the code above to change their colors.

Since you changed themes, the code I gave you above (for the blog title/description) will not work anymore.

To move the Home tab to the bottom you’ll need to make the height of the “a” tag bigger. Replace your current CSS code with this one:
```
#header {
background:transparent url('http://mrshev.files.wordpress.com/2010/05/mrshev1.jpg') 0 0 no-repeat;
height:424px;
}

#header #title a{
color: #fc0 !important;
}

#header #title a {height: 400px;}
```
Again, you’ll need to play with the color of your title; “#fc0” is just an example.
mrshev · Member · May 5, 2010 at 7:30 pm
Copy link
Thanks Devblog – I simply got rid of the title (i’ll add it to the image later)

Thank you, thank you, thank you!!!
Shev
devblog · Member · May 5, 2010 at 7:37 pm
Copy link
No problem.

BTW, it would’ve been better if I gave you this code:
```
#header #title a{
color: #fc0 !important;
height: 400px;
}
```
instead of separately… I just had a lapsus dumbus.
mrshev · Member · May 6, 2010 at 9:00 am
Copy link
Well, it works…

Maybe I’ll change other bits – the problem is is that the Vigilance theme doesn’t seem to come with an existing stylesheet so I am swinging in the dark a bit.

Thanks for your help, though – keep snapping, you’re good!
devblog · Member · May 6, 2010 at 2:58 pm
Copy link
the problem is is that the Vigilance theme doesn’t seem to come with an existing stylesheet so I am swinging in the dark a bit.

Well, if you use Firefox, there are a couple of extensions that I’d recommend you using:

Aardvark and Web Developer. I would recommend Firebug, but I just find it too damn annoying that its editor won’t let me copy just a piece of code… I use it when debugging JavaScript or AJAX apps, though.

Aardvark will allow you to identify elements and will show you their IDs/Classes. Then you can use Web Developer to “live” test your changes using the information you got from Aardvark. That is basically all you would really need.

HTH.

No items found.