WP Dark Customization Kit
WP Dark Customization Kit
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.
Creating the Logo
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 
CSS modifications
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 360×60px 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
