New WordPress Theme: Black Hat

Posted on March 17, 2009 under Cool Stuff

My newest theme for WordPress 2.7. I think this one has been my biggest challenge due to all the features I had wanted to incorporate. As I had previously highlighted in my post the other day, this theme includes a detailed “read me” file covering its various features and a couple of FAQs/frequently requested modifications:

Theme option for changing sidebar location
Sitemap template
Printer-friendly stylesheet
Favicon
Additional feeds
Additional/SEO meta tags — including Google’s new canonical tag for paginated post pages. (Rumor has it this tag will be added to the core code in a future WordPress release. Nice!)

While I don’t think it’s my best work visually-speaking, I think its functionality and user-oriented details make it one of my better themes overall.

As time permits, I will be updating previous releases to meet the standard that I’ve set for myself with this release. :D

Details

Black Hat is a dark minimalist theme based on Adrian Diaconescu‘s Corporate Sandbox. It is has been built specifically with WordPress 2.7 in mind, but is backwards compatible down to version 2.5. Stickers icons courtesy of DryIcons. Favicon by Brian Brasher.

Availability

Demo | Download

Tagged: Black Hat, Free stuff, Geek, Google, theme design, WordPress

« The perfect chimichanga Humpday Hilarities »

29 Responses to “New WordPress Theme: Black Hat”

CarrieMarch 19th 2009 at 10:48 am

This is a great theme. :D I am using it on a test site and love the layout.
- NickiMarch 19th 2009 at 5:38 pm
  
  Thank you, Carrie. I’m glad you like it. :D
steveMarch 20th 2009 at 4:03 pm

Nice clean graphic look. As soon as I’ve sorted the details, I’ll be using it for a copywriting business I’ve just begun. Thanks.
- NickiMarch 20th 2009 at 7:18 pm
  
  Thanks, Steve. :)
TomMarch 21st 2009 at 1:49 pm

I delete the default favicon.ico from /images and upload a new favicon.ico file to /images, yet the displayed favicon does not change. Even my hosting company’s file manager displays the contents of the file as the old contents, yet if I change the name of the file to something other than favicon.ico, the file manager will display the correct contents.

Do you have any idea what is happening?

TomÂ´s last blog post: Our Story
- NickiMarch 22nd 2009 at 10:37 am
  
  Make sure you delete your cache and history in your browser, then refresh.
  - TomMarch 23rd 2009 at 12:12 am
    
    Doh! Thanks.
    
    The blog site looks great on Firefox, but the sidebar displays below the posts on IE7. Any ideas?
    
    TomÂ´s last blog post: Interested in what is happening?
    - TomMarch 23rd 2009 at 8:30 pm
      
      Nevermind, I figured it out.
      - NickiMarch 24th 2009 at 11:49 am
        
        Hi Tom,
        
        Good to hear you were able to get it sussed out. Mind if I ask what the culprit was? :)
        
        Thanks for dropping by!
TomMarch 24th 2009 at 1:57 pm

Turned out to not be an issue with your code.

The issue with IE was the sidebar photos and the reading list. For the photos, IE handled content of the sidebar that was wider than the sidebar itself differently than Firefox did. IE displayed the full content, whereas Firefox cropped the content. Given the layout of the blog theme, this pushed the sidebar down below the postings when displayed on IE. Since the error was a photo that was 2 pixels too wide, it was difficult to find, since the 2 pixel wider IE sidebar was not visually obvious. For the reading list, IE did not like the way I was using unordered lists in the HTML code.

TomÂ´s last blog post: Huskers – Do you care?
- NickiMarch 24th 2009 at 8:01 pm
  
  Hi Tom,
  
  Thank you. I’m glad you were able to find the culprit! :)
  
  Have a great week!
WebmastersMarch 25th 2009 at 12:33 am

Nice theme..we would implement this on one of our blogs..
RohitMarch 26th 2009 at 7:00 am

is it looking black or it does black stuff too ?

nice theme btw
- NickiMarch 30th 2009 at 9:00 am
  
  How do you mean?
RaiulBaztepoMarch 28th 2009 at 5:42 pm

Hello!
Very Interesting post! Thank you for such interesting resource!
PS: Sorry for my bad english, I’v just started to learn this language ;)
See you!
Your, Raiul Baztepo
Mantis569March 31st 2009 at 4:35 pm

Having problems getting the trackback to work. It doesn’t provide the URL anywhere on the page when I click on the link in sigle posts. Any help welcome!

Thanks
- NickiMarch 31st 2009 at 5:22 pm
  
  Hi Mantis569, do you have a URL for me to look at? Thanks!
SimoneApril 2nd 2009 at 1:39 pm

Hello – Thanks for the brilliant theme. I really like it. I’m just getting to grips with word press and css although I have some old knowledge of html.

What I’d really love to do is to change the header to have an image up there but I can’t see an image to replace in the image folder.

Sorry to ask direct – not sure if there is a forum or somewhere else to ask.

Many thanks in advance
Simone :-)
- NickiApril 2nd 2009 at 1:52 pm
  
  Hi Simone,
  
  Thank you for your kind comments and interest in my theme. :)
  
  There isn’t a header image, you can add one. Open up header.php and look for div id="header". Simply replace the contents of that div with your image.
  
  You may need to fiddle around with the style.css a little bit. Look for #header and adjust as needed.
  
  Hope that helps! :D
  - SimoneApril 3rd 2009 at 3:18 am
    
    Thanks Nicki, its really kind of you to be so helpful (and fast) with your reply
    
    Take care
    S :-)
colleen barnesApril 3rd 2009 at 1:28 pm

love this template… and the readme doc. awe.some!

one glitch for me, on test blog site: http://kickstartyourfitness.ca/wordpress. yahoo is refusing to load rss feed. what am i missing?

not a coder, but a jack-of-all-mktg. thanks, tons!
- NickiApril 6th 2009 at 8:11 pm
  
  Hi Colleen,
  
  Thanks for choosing my theme. I’ve had problems with Yahoo and different feeds in the past. Which feed is it refusing?
  
  Thanks!
NewbeliusApril 5th 2009 at 11:47 pm

The second I saw this theme, I knew it was for me (and my blog). It’s fantastic! Of course, I could not leave well enough alone and used it as a way to learn css and WordPress.

Crazy thing is, after my slight modifications, it now exhibits very strange behaviour. Each posting under the first on the main page misses the top border around the post box and when scrolling, the background at the top of the posts goes away. Doesn’t do that in Firefox, though.

Keep up the fantastic work!

NewbeliusÂ´s last blog post: Web standards are there for a reason!
- NickiApril 6th 2009 at 8:12 pm
  
  Hi Newbelius,
  
  Thanks for dropping by. I’ve run into that in the past with different versions of IE. The short answer is, it’s an IE bug. I did notice that when I clicked on a menu item, the border would mysteriously reappear.
  
  :(
  - NewbeliusApril 6th 2009 at 9:10 pm
    
    Thanks Nicki!
    
    After digging around a bit more, I’ve narrowed it down to the interaction between the two floating elements: the entry comments and entry title. It certainly does seem to be a bug with IE7. I tested under IE8 and the problem goes away.
    
    Interestingly, if I comment out the float:right from the entry comments, then IE7 displays it correctly, though I had to change the width of the title to compensate. Unfortunately, then Firefox will overlay the title over the comment counter. 8-) I think I might just put in some conditionals into the php code to account for the difference. Perhaps if I have a .css file for IE bugs…. Of course, that might get pretty big!
    
    And, I love your work! Black-hat is a beautiful theme as are your others!
    - NickiApril 7th 2009 at 4:17 pm
      
      Glad to hear you were able to get a work-around. Sad that in this day and age, we still have to do that for IE. :P
      
      Thank you for your kind comments, and for dropping by! :)
» Cool! chemicalnovaApril 25th 2009 at 8:30 pm

[…] been looking for more wordpress themes.Â I think black hat is excellent, it’s very flexible and easy to […]
GeorgeJune 18th 2009 at 9:15 am

Hi Nicki,
I absolutely love your theme! Thanks for the same. I recently replaced the header with an image. Is there a way to remove the space above the header image? I tried modifying the style.css file and didnt have much luck. Any help would be much appreciated.

Thanks,
George

GeorgeÂ´s last blog post: Lambada (Originally sung by Kaoma)
- NickiJune 18th 2009 at 11:19 am
  
  Hi George,
  
  Look in there for #access. That’s the id of the space above the header.
  
  Thanks for dropping by! :)

I am a: Quirky sysadmin. Geek. Gamer. Comic fangirl. My little space, my home on the interwebs. I blog about personal stuffs, work, various coding projects, and anything else I feel like.

NAV:

Blog Archives

In Loving Memory

Hit the Tip Jar?

The Socials

Webrings!

Cool Kids

Linkies