How to put image header in dilectio WP theme
Posted on 12. Jun, 2008 by dimaks in Blogging
As you can see, my blog uses the dilectio theme from Smashingmagazine.com, designed by “Design Disease“. Originally, the theme came with a text header, as coded in its stylesheet css. Although I did late readings about the theme, I was delighted because I found challenges pertaining to modifying some items in the PHP codes. Having an obvious obsession on image headers, I decided to change the text header into an image.
Doing so requires editing of the stylesheet (style.css) file. Open it using notepad or your favorite text editing tool and scan through the codes. Try to look for the header comment which starts with this: /* Header. Take note, create a backup copy of your style.css first before editing.
Next, find the following codes:
#bgcontainer { width: 1005px; margin: 0 auto; }
/**/ * html .Header { height: 130px;} /* */
.Header { width: 1005px; margin: 0 auto; position:relative; min-height: 130px; }
.Logo { float: right; width: 510px; }
Actually, we are only interested with the “.Header { width:..” code because this is where we insert the image header. To do so, insert the following code within the attributes section of .Header.
background: url(http://YourDomain.com/custom_header.png) no-repeat left top; float: left;
The no-repeat code means that the image shall not be repeated all over the header background container “#bgcontainer“, while left top; and float: left; I suppose are self explanatory.
Finally, your style.css shall look like this:
.Header { width: 1005px; margin: 0 auto; position:relative; min-height: 130px; background: url(http://YourDomain.com/custom_header.png) no-repeat left top; float: left;}
After this, save your css file and upload it. You shall be seeing your image header in your blog now. Take my blog as a working sample.
And for the record, don’t worry, dilectio theme is under Creative Commons Attribution-Share Alike 3.0 License. This means you may use it, and make any changes you like. Just leave the necessary credits.
Good luck!
Possibly Related Posts:
If you are a Facebook user, why don't you JOIN the great fans of www.skamid.com? Don't forget to check my other blogs too: Voracious Pixels Photo Blog / Scooter & Scootering News and Reviews.
Part-time blogger dimaks is involved in transport planning and research and is into Internet technology, PC games, digital photography, motorcycling and martial arts.. 
K
Jun 12th, 2008
I love CSS. Not that I am good at it, I just learnt how to make that simple code to my header-less theme.
dimaks
Jun 13th, 2008
K,
and of course, it is always a good playground to explore things.
indeed the beauty of CSS is superb! it makes the website/blog design handy
annamanila
Jun 14th, 2008
Dimaks. Tried to gets what you’re getting at. No dice. Maybe I will just ask my friend in Tsukuba for help again should I decide o change my header image.
I still like my present one, though. Don’t you?
dimaks
Jun 17th, 2008
annamanila,
yes i still like your blog header even up to this time.. and yes again, of course you can change header and i will have it designed once i get the free time. i got 4 pending requests right now, haha.
Put image header on your dilectio wp theme « Wakamono’s Portal
Jul 6th, 2008
[...] post info By kantetsu Categories: Blogging, Life tips and tricks and Tutorials Have you been thinking on putting an image header on your dilectio wordpress theme? Here is how to do it. [...]
Danysworld
Oct 6th, 2008
Hi!
I am using at well dilectio theme and today I would like to change fewthings like color and header for exemple but I am very scary to crash down all my blog if I start to change something…Tha thing is that I don’nt know which kind of tools I can use to make it easier? I would like to do some test and see it before validate it definitly (for exemple the colors choice..). How can I manage to proceed?
Thanks a lot!
dimaks
Oct 7th, 2008
Danysworld,
For the colors and header, you can change them by going through your style.css file, as indicated in this small tutorial. Be sure to have at least a notepad program to edit the file offline and then upload them when you are done with your edits.
To safeguard your blog from crashing, try to have a back of your theme files so that you can just re-upload them if your editing does not work. Hope this helps!
Liesbeth
Feb 9th, 2010
Hi,
I’m using the Dilectio theme for a while and I love it so much. But I wil change the whole background and not only the header. This is what I do. In the css stylesheet I changed this: url(’images/grunge2kl.gif’) repeat top left fixed;
My question is, how can I change The whole background??
Liesbeth´s last blog ..Indicatie verpleeghuis
dimaks
Feb 11th, 2010
Liesbeth,
hi. thanks for dropping by. i visited your site and it looks like you already resolved the issue you were referring?