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 :)

Download WP Dark Customization Kit

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 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

Nice smiley!

Martin Labuschin

Danke Wolfgang!

Oli

I also added a link to this page ;-)

LEMONed

Sehr schön :-) Danke

Wolfgang

Du machst es den Leuten ja einfach ;-) Sehr schön!

Alexander Hahn

3ks

puppyguy

Wirklich toll, noch toller wäre wenn dein neues Theme auch bald verfügbar wäre ! Es ist noch schöner.

Roman

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.

Arpit Jacob

thank you, Wolfgang

dedenf

Thankyou . . . that's great, gosh you're a nice guy . . . :D

Jeannette

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)?

Travis McCrea

Am very interested in learning this CSS stuff b'cos am just beginning on how to design a web page.

Encre8

Am just learning on how to design a web pages.

Encre8

Hey there, how do i put the list of categories under the comment link for each post, like you did? can anyone help?

Fath

am sorry dont enough knowlegde about it.

Encre8

am sorry i dont have enough knowlegde about it.

Encre8

seens having problem under IE 6.0

tsian

Above and beyond mate!

Flip

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?

Jörg Petermann

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.

Marcus

Awesome little tutorial.. :D No my site looks even better... :D

Øyvind Robertsen

8????

???

Thanks for logo trick.

Margret

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

Never mind, i am stupid lol, needed to upload to another domain d0h ;)

Mannie

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... ;)

soho

Thank for tutorial of WP Dark Customization Kit. It helps me alot. Greetings

Tomek

Thanks! Awesome designs.

Mike

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

Renato Cunha

Just uploaded your dark theme...looks awsome...I am a designer by passion but I am also the CEO of a corporate relocation company 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

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)

Eric Ables

Thanks Wolfgang. Your work is fantastic :)

Realizzazione sito web

Great stuff this customization kit! I have added the image to the header, and it works great :) Thanks a million :)

Florian Jensen

i really love your artwork. a really own toutch.

Webdesign den haag

afsf

tes

do you know which template it is ? www.100cute.com ?

Julia

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

Paul Enderson

3KS 8????

???

Sweet thanks a ton.

Dan

Commenting is not available in this channel entry.