After releasing the “Dark Theme” for Wordpress I’ve been asked several times how to incorporate a custom logo into the header. So I decided to to release a small customization kit, which includes a PSD file and a short description of how to change the CSS accordingly.
In a first step make sure that you have’ve installed the latest version of the theme. Then download the Customization Kit and open the included Photoshop file. I’ve already set up some guides so that you get an idea of where to place your logo. After placing your logo select it by using the “rectangular marquee tool”, copy it to a new file (copy merged) and save it in your theme’s “images” folder. Personally I prefer to name it “logo”, but anything else works fine :)
Now it’s time to modify the CSS in order to display the just created logo in the header area of your site. So open “style.css”, locate the “header” section and add the following rule:
#header h1 a {
background: transparent url(images/logo.gif) no-repeat 0 0;
display: block;
height: 60px;
line-height: 1000px;
overflow: hidden;
width: 360px;
}and change the “top” property’s value in the following rule to 75px:
#header h1,
#header img.logo {
position: absolute;
left: 40px;
top: 75px;
border: none;
}By the way these two rule assume that your image is 360x60px in size. If your image is larger or smaller make sure that you modify the width, height and top properties accordingly. And that’s it. Refresh your browser and enjoy.
39 comments so far
Skip to comment form
Martin Labuschin April 30, 2007 at 10:26 AM
Nice smiley!
Oli April 30, 2007 at 11:28 AM
Danke Wolfgang!
LEMONed April 30, 2007 at 11:39 AM
I also added a link to this page ;-)
Wolfgang April 30, 2007 at 12:00 PM
Sehr schön :-)
Danke
Alexander Hahn April 30, 2007 at 01:12 PM
Du machst es den Leuten ja einfach ;-)
Sehr schön!
puppyguy May 01, 2007 at 07:29 AM
3ks
Roman May 01, 2007 at 02:43 PM
Wirklich toll, noch toller wäre wenn dein neues Theme auch bald verfügbar wäre ! Es ist noch schöner.
Arpit Jacob May 01, 2007 at 03:46 PM
hi bart if you don’t mind could you include the full PSD with the slicing. I am looking to make a color variation based on the same theme.
dedenf May 02, 2007 at 05:18 AM
thank you, Wolfgang
Jeannette May 02, 2007 at 08:49 AM
Thankyou … that’s great, gosh you’re a nice guy … :D
Travis McCrea May 03, 2007 at 05:45 AM
I am thinking its okay, so as of now we are going on as planed… but you don’t mind if we bundle this in with the e107 theme (since its not yet completed might as well throw in a little bonus)?
Encre8 May 03, 2007 at 10:44 PM
Am very interested in learning this CSS stuff b’cos am just beginning on how to design a web page.
Encre8 May 03, 2007 at 10:47 PM
Am just learning on how to design a web pages.
Fath May 05, 2007 at 04:27 AM
Hey there, how do i put the list of categories under the comment link for each post, like you did? can anyone help?
Encre8 May 06, 2007 at 01:13 AM
am sorry dont enough knowlegde about it.
Encre8 May 06, 2007 at 01:15 AM
am sorry i dont have enough knowlegde about it.
tsian May 10, 2007 at 08:18 AM
seens having problem under IE 6.0
Flip May 10, 2007 at 09:44 AM
Above and beyond mate!
Jörg Petermann May 10, 2007 at 05:30 PM
Deine Impulse sind immer wieder erfrischend zu sehen, gerade zu Zeiten, in denen das weblog-”design” zum volkssport mutiert, mit allen bekannten Folgen.
@Roman: Kleiner Finger, ganze Hand.
Wie wäre es, wenn Du Dich einfach mal hinsetzt und Dich selbst inspirieren lässt?
Marcus May 10, 2007 at 09:49 PM
Sehr kreativ und schön. Danke!
Und endlich mal eine hübsche Seite, bei der die Sidebar auf der richtigen Seite liegt, nämlich links.
Øyvind Robertsen May 11, 2007 at 02:39 AM
Awesome little tutorial.. :D
No my site looks even better… :D
何必呢 May 11, 2007 at 10:37 AM
8错！！！
Margret May 11, 2007 at 07:36 PM
Thanks for logo trick.
Mannie May 12, 2007 at 07:25 PM
I used that code for the header, only no image shows up at all for me. I must be missing something althoug i exactly did what was said on top here. Also tried the whole url to the image
Mannie May 12, 2007 at 07:55 PM
Never mind, i am stupid lol, needed to upload to another domain d0h ;)
soho May 12, 2007 at 11:42 PM
Just wanted to say that your current color scheme is far better than the “dark theme” one. And I thought it couldn’t get better… ;)
Tomek May 14, 2007 at 12:28 PM
Thank for tutorial of WP Dark Customization Kit. It helps me alot. Greetings
Mike May 14, 2007 at 04:48 PM
Thanks! Awesome designs.
Renato Cunha May 18, 2007 at 05:19 AM
Hey there.
I really liked this theme and am migrating my blog to use it. I also patched it to enable localization support and localized it to brazilian Portuguese. Will you want to publish the modified files? If so, where would I send them?
While I don’t commit the changes, a preview can be found at http://valedotrovao.com/novoblog
Eric Ables May 19, 2007 at 10:47 AM
Just uploaded your dark theme…looks awsome…I am a designer by passion but I am also the CEO of a corporate relocation company http://www.nhmaprogram.com and I am looking for a programer that can help me with slicing and coding websites and blogs for very large scale companies…
Thanks for the great theme and all the best,
Eric
Eric Ables May 19, 2007 at 10:57 AM
Oh…an by the way I am looking for somone that can an will make high quality icons for future products…I had a couple of designers that specialize in icon design send me some samples but I wasn’t impressed…so if you have any idea’s drop me a (JavaScript must be enabled to view this email address)
Realizzazione sito web May 23, 2007 at 12:14 PM
Thanks Wolfgang.
Your work is fantastic :)
Florian Jensen May 28, 2007 at 04:07 AM
Great stuff this customization kit! I have added the image to the header, and it works great :) Thanks a million :)
Webdesign den haag June 04, 2007 at 12:40 PM
i really love your artwork. a really own toutch.
tes June 07, 2007 at 10:49 AM
afsf
Julia June 11, 2007 at 06:29 PM
do you know which template it is ? http://www.100cute.com ?
Paul Enderson June 25, 2007 at 06:02 AM
Hi Wolfgang!
Just wanted to say a quick thank you for Dark… I can’t find any simpler way of contacting you, so I hope you get to read this! :)
I’ve just finished what I think is the most radical restyle of your design – so feel free to take a look if you get a minute to spare!
All the best,
Paul
何必呢 June 25, 2007 at 06:59 AM
3KS 8错！！！
Dan June 25, 2007 at 05:52 PM
Sweet thanks a ton.