Modifying the Blix Krieg Theme Header
February 14th, 2007
The Blix Krieg theme, as it is based upon Blix, is notoriously easy to change.
One of the users of the theme, Suzie J, recently asked the following question:-
I love this theme — but I have a header image — that is wide and short, and would definitely fit about the menu bar (you can see it at www.susiej.com).
Can I insert it into the code, and where would I do it?
Also, is it possible to put google ad links across the header above the menu bar?
Thanks
Thanks for your question, Suzie – I’ll answer them in order:-
Can I insert my own header?
The answer is a resounding YES. There are two ways you can do this, but probably the best is to modify the "spring_flavour.css" file in the theme directory – modify the following lines appropriately to point to your alternative header:-
/* header
————————————————–*/
#header {
background-color:#F0F9F9;
background-image:url(images/spring_flavour/header_bg.jpg);
}
The line you need to modify is "background-image:url(images/spring_flavour/header_bg.jpg);" – just upload your image, and modify that line to point to wherever you upload it to.
It’s preferable if you make the image a jpeg, and preferable if it is 690 pixels wide, and 115 pixels high (to match the existing header_bg.jpg image dimensions)
Ok, so having shrunk your image to be 690 pixels wide using photoshop, I now find it’s only 73 pixels high.. that’s a problem, as layout.css defines the header image as being 115 pixels high.. so this in effet means we get a weird tiled effect with your image if we don’t do something.
Really, again, we have another two choices:-
- Stretch your image so that it is 115 pixels high (will make it look funny) or..
- Change the layout.css file so that the header height parameter matches the height of your header image. This is my preferred option.
So.. open the layout.css file and find the following section:-
/* header——–*/
#header {
height:115px;
padding:0 0 0 18px;
}
all you then need to do is change the 115 value to the actual height of your new header image, and you are set (in this case, 73px)
Can I insert a header ad?
Yes you can – but that’s prob a little bit more involved, but only a little.
Keep posted, I’ll write about that tomorrow, and give everyone an idea about just how the ad section of my theme works, as well as a little overview of PHP for those of you that aren’t familliar with it.
By the way Suzie, just for fun, I’ve temporarily done the above steps and put your header on my beta development page (beta.utheguru.com) – check it out (the changes are reflected on the beta page only, not in new downloads of this theme, of course 🙂 ).
Entry Filed under: BlixKrieg Theme
If you found this page useful, consider linking to it.
Simply copy and paste the code below into your web site (Ctrl+C to copy)
It will look like this: Modifying the Blix Krieg Theme Header
5 Comments Add your own
1. Susie J | February 14th, 2007 at 3:55 pm
OK, first of all, I love you. I have been working for hours and hours to
fix what the wordpress support people called a “train wreck” on my blog.
This is an awesome theme, and you are great to work with — I’ve been
reading your comments.
I followed your first step, and it looks like this
/* header
————————————————–*/
#header {
background-color:#F0F9F9;
background-image:url( ); }
Still, the image is not showing up — and then I opened the read me file,
and it says “If your custom banner already include’s your blog’s name, open
layout.css, go to line 146 and remove the comments (/* … */)”
I couldn’t find that line. And do I need to replace it with something?
2. Susie J | February 14th, 2007 at 4:03 pm
I’ve fixed the layout and the spring flavour css. So it now looks like this: #header {
background-color:#ffffff;
background-image:url(a/susiejblx_bg.jpg);
}
And, it is still not there. I must have copied something incorrectly?
Thanks,
3. DuckMan | February 14th, 2007 at 6:21 pm
Ok.. I think I’ve confused you. If you want to better understand what the problem is, google ‘php and relative versus absolute referencing’ – you should learn a bit there.
START AGAIN… Follow these steps.
Using filezilla, put the susiejblx_bg.jpg in your wp-content/themes/{my blixkgrieg theme}/images/spring_flavour/ folder – that’s where all the images for the theme live and it makes more sense to put new images there.. if you don’t see other files in that folder by the names of author.gif, header_bg.jpg and about a dozen others, you’re in the wrong folder.
open wp-content/themes/{my blixkgrieg theme}/spring_flavour.css (the same one you’ve been editing today) and edit those same lines as follows:-
/* header
————————————————–*/
#header {
background-color:#F0F9F9;
background-image:url(images/spring_flavour/susiejblx_bg.jpg );
}
Now it should work..
Cheers,
TheDuck
4. Susie J | February 15th, 2007 at 12:40 am
Thanks — everything looks great.
5. DuckMan | February 15th, 2007 at 9:28 am
Hi Susie –
I love your enthusiasm!
Unfortunately I don’t have time to go into the specifics, but this kind of thing usually occurs when either a) an element you have added is wider than the component of the theme that you have added it to (most likely) or b) Weird positoning of div tags.
These are all pretty common problems with theme modification, but can be really difficult to debug via email, so unfortunately that’s about as far as I’ll be able to take my assistance to you – perhaps one of our other readers might have suggestions?
Can I suggest some google searches?
for instance, “How do I add google search bar to Blix Theme”, “How can I customize Blix Theme” etc – you might find more how-to’s like I wrote yesterday for you.
If you had an accident with the theme, you can always install two copies of it (under different folders] names, and change the name of the second one in style.css so it shows as a different theme in the presentation tab)… that way if you muck up une, you can quickly roll back to another.
Perhaps when you sort out your customizations you can come back here and blog about it! 😉
Cheers,
TheDuck
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed