The Dirty Blue Theme for WordPress

screenshot1 The Dirty Blue Theme for WordPressFeast your eyes upon the fabulous Dirty Blue Theme for WordPress 2.5+.

Some of the features include:

  • Simple two column layout
  • Ghastly blue background glow
  • Dazzling dark blue color theme with high and moderate contrast colors
  • Cross-browser compatibility
  • Valid HTML Transitional 1.0

This eye-catching theme is only blue in the dirty sense.

The Dirty Blue Theme is the first official theme release by Blogtap.net. Please let me know if you like this theme or have any constructive feedback regarding this theme in the comment section below. Keep in mind, version 1.4 is only a beta and there will be better versions in the future!

Download the Dirty Blue Theme. Please rate the theme at WordPress.org so I can continue updating the theme and releasing awesome new ones in the future!

  • http://microraverecords.com Shaun Dowse

    LOVE the Dirty Blue theme! But pretty new to page editing. Keen to change the main blog title and eventually insert a logo at the top of the page. How do I do that?

    • Chris

      Hey Shaun, glad you liked the theme – I put a lot of work into it!
      You can very easily change the text of the main blog title. To do that, just go into Settings –> General (in your control panel) and then enter a new name into the field labeled “Blog title.”

      You can also very easily insert a logo at the top of the page. Do you want it to replace the Blog title? If so, you will need to go into Appearence –> Editor then click on “header.php” in the right-hand sidebar and replace this line of code:

      <h1 id="logo_text"><a href="<?php echo get_option('home'); ?>"><?php echo bloginfo('name'); ?></a></h1>

      With something like this:
      <h1 id="logo_text"><a href="<?php echo get_option('home'); ?>"><img src="path_to_image.html" /></a></h1>

      With “path_to_image_here.html” being the URL or path to the image you want. You may need further help positioning the image properly and I can certainly help you with that. Just post here.

      • http://www.joseyenque.com Aileen Swaisgood

        I used your suggestion about adding an image in the header. Looks great for what I’m aiming to do. My question is how best to have the image aligned with the sections below. It is noticeable in large computer screens. Thanks in advance. Fyi… I am testing on my localhost.

  • http://Ronobirlahirimusic.com Ronobir Lahiri

    Hey Chris,
    Love the theme, just redid my site using it. Wondering if there’s a way to get rid of the “no comments” box that’s showing up on each page. Afraid I’m a bit of a newbie to web building, and i’d hate to tinker around too much under the hood and break something, especially if you’d be able to give some advice first. Thanks for all your help.

    Ronobir

    • Chris

      You will need to remove the following in Main Index Template (index.php), Single Post (single.php) and Page Template (page.php):

      <span><a href="<?php comments_link(); ?>"><?php comments_number('no comment','1 comment','% comments'); ?></a></span>

      To remove the RSS box, in Sidebar (sidebar.php), you will need to remove:

      <div><a id="rss-right" href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Subscribe to this site'); ?>"></a></div>

      I can see you’ve done some changes to the code on your own. You might want to reduce the size of the header div that fits the top menu content. You can do that by going into style.css, scrolling down to the line that says #header and changing the “height: 180px” property to something like 100px.

      I hope that helps, let me know if you have any further difficulty customizing your theme. I could even make all the changes for you if need be.

      P.S. – Great music. I listened to a few songs. You seem to be a very talented individual.

  • http://Ronobirlahirimusic.com Ronobir Lahiri

    Chris,
    I’d like to remove the RSS box as well, thanks

    Ronobir

  • http://Ronobirlahirimusic.com Ronobir Lahiri

    Thanks so much. I’ve made the changes, and am very happy with how it’s looking so far. I might get back to you, and take you up on that very generous offer, as I continue to customize. Thanks again for your help with a very cool theme.

    • http://Ronobirlahirimusic.com Ronobir Lahiri

      Hey Chris,
      How would I go about creating 2 columns instead of one on 2 of my pages, specifically “Acting” and “Music Library?”

      Thanks
      Ronobir

  • Chris

    Hey Ronobir, you’d have to do some PHP coding to do something like that. WordPress just doesn’t have the functionality built in that will allow you to display a second column only on specific pages.

    I can help you out with it. Send me an email via the contact form if you are interested.

  • http://www.diverseimageonline.com Bob

    Chris,
    Whats up the “Dirty Blue” is nice, I like it a lot. Just wondering if you could give me some insight on to how to go about increasing the width of the content.

    I have removed the sidebar on a page by creating a custom template but no would like to utilize that space by increasing the width of the content? I cannot find the #container in the CSS that everyone talks about to do it.
    I m talking about the FAQ page as the one I would like to do this with as of right now I plan on doing a couple more in the future. Thanks

    • Chris

      Hey Bob,

      Just increase the width on div#leftcolumn in style.css.

      Let me know if you need any further help.

    • http://diverseimageonline.com Bob

      I tried increasing the left column width, by changing the

      #leftcolumn {

      width:620px;

      float:left;

      but then the sidebar gets erased on my whole page. I just wanted a couple of the pages not to display a sidebar and bigger content spaces. The page that I’m currently working on is the FAQ page http://diverseimageonline.com/?page_id=28

      Thanks for the quick reply

    • Chris

      Hey Bob,

      Oh, yes, you are going to have to code some PHP switch or if statements to make that work.

      Copy and past the contents of your page template (page.php) into a pastebin (http://pastebin.com/) and post the URL here. I’ll show you what you need to add. I’m about to see a movie right now but I will probably get back to you later today.

    • http://diverseimageonline.com Bob

      http://pastebin.com/aQ7cXV1x

      I copied my no sidebar page template, so I can just use that one for all other pages I would like to do in the future, is that ok?

      P.S. Hope your not going to see “kickass” because it was bad! lol. Thanks again.

    • Chris

      Wait a sec, I’m a little confused here Bob.

      At first you say you want to change the width of everything while the sidebar is removed.

      I gave you a solution for that and then you say it won’t work because “the sidebar is erased on the whole page.” Don’t you want to sidebar to be erased?

      I was assuming that you meant all pages (not single posts but pages) were missing a sidebar which is why I was going to use PHP to remove the sidebar for only the FAQ page (excluding all other pages).

      But now I see that you have an FAQ page that does not have the sidebar while all your other pages (pages not posts) do have a sidebar. How were you able to edit page template (page.php) to show a sidebar on every page except FAQ?

      p.s. I saw “ghost writer” which was probably just as bad.

    • http://diverseimageonline.com Bob

      Chris,
      Sorry for the confusion here. I ment that the sidebar before was getting erased throughout the entire “site” when I increased the width. Not just the page. What I wanted was no sidebar on the FAQ page “only” and use the space for the more content across the entire page.

      I did this by opening up the page.php file and adding

      at the top to create a custom page template. And of course I had to additionally delete the sidebar code from that too and upload with firefoxes ftp client. I figured I might have to do this in the future, and now I’ll just select that page template to automatically create or edit a page with no sidebar, for bigger content.

      But the problem I’m having is figuring out how to make the content part of that page (all the info) to take up that space where the sidebar was. I really appreciate all the help by the way!!!

    • Chris

      Hey Bob,

      Okay I understand what you need to do now.

      What you need to do is change the widths on not only leftcolumn but .post_alt and .post-header_alt as well. The problem is, leftcolumn exists in header.php, not the page.php template. So you can code a custom template but it will only take care of the .post_alt and .post-header_alt widths. You will have to use PHP to generate a custom ID for leftcolumn based on a condition.

      I’ll work on this later and let you know when I’m finished.

    • Chris

      Sorry I took so long Bob, I have been pretty bogged down with freelance work but I finally got around to coding a solution for you today.

      First, be sure to backup header.php.

      Add this to header.php, within the head tag:

      <?php global $wp_query; $thePostID = $wp_query->post->ID; if ($thePostID == 28) echo "<link rel=\"stylesheet\" href=\"style_alt.css\" type=\"text/css\" />"; ?>

      That will check what the page id is (a unique identifier) and, if it is your FAQ page, it will tell your browser to retrieve an external style sheet.

      Replace the line that says “<div id="leftcolumn">” in header.php with this:

      <?php global $wp_query; $thePostID = $wp_query->post->ID; if ($thePostID == 28) echo "<div>"; else echo "<div id=\"leftcolumn\">"; ?>

      That will check what the page id is and, if it is your FAQ page, it will not output a div with an id of “leftcolumn” but rather, a div with no id or class (a div that acts as a placeholder).

      Create an external stylsheet named “style_alt.css” and place it in the root folder (public_html). Place the following content into “style_alt.css”:

      .post {
      width:820px;
      }
      .post-header {
      width:820px;
      }

      .post-meta {
      width:800px;
      }

      p.nocomments {
      clear:both;
      }

      This is the style code that will overide the code in style.css for your FAQ page, allowing you to change the widths of the necessary html elements. Make changes to the above styles as you please. You might not want the page elements to be that wide.

      I noticed there was a div closer tag at the top of sidebar.php. Because you’re custom template excludes sidebar.php, you will need to close that div in the same place where sidebar.php would have been read by the server (to avoid breaking up the theme). To do that, place: </div> just above <?php get_footer(); ?> in your custom template (that’s the same spot where the get_sidebar function would have been.

      Let me know if this works. There are quite a few steps and it’s easy to mistype something or place something in the wrong spot so be careful. I will make the changes for you if necessary.

  • rj

    I love the theme. Had a quick question though. Does the nav menu inherently show sub-links to child pages? I have published the child pages but the links won’t show in the menu. Only the parent links are showing up.

    • Chris

      No, RJ, they are not supposed to show. I will need to implement that in the next update.

  • http://thatmagnificentbastard.net/wordpress Ted

    New to using Word Press but Dirty Blue is the best looking theme I’ve seen so far. Is there a way to set it so hyperlinks show only as underlined and not highlighted though? I love the theme, it’s just my OCD kicking in.

    • Chris

      Hey Ted, glad you liked the theme!

      To remove the highlights on the hyperlinks, you just need to go into Appreance–> Editor–> Stylesheet (style.css in the right-hand sidebar)–> then search for the line of code that says:

      .post p a {

      and, just below that, remove “background:url(“img/post-10.png”) repeat scroll 0 0 transparent.”

      Hope this helps, let me know if you have any further trouble.

  • Becky

    Hey Chris, I love the Dirty Blue Theme. Thanks for making it. But the theme will only display 9 pages in the menu (and it depends on how long is the title of the page name). I have a lot of pages and it will not flow to the next (as there is no next line). Is there something i can do with the header.php to fix this?

    Also, will be great if the menu could include dropdown child pages :)

    Thanks once again.

  • Michele

    Hi,thx for the theme =) How can i change the transparency of the main page box?

  • Sean

    Hi Chris, great work on the theme!

    Any chance the nav menu could get dropdown links to subpages? That would be awesome.

    Thanks!

  • http://associationsiloe.fr/ Alain

    Thanks a lot for making that great job. I love that design. I’d just like to add dropdown links to subpages.
    Thanks

  • http://mindchamber.net mindchamber

    Hey LOVE dirty blue, great theme! I was just wondering.

    Since Im not super CSS savvy I rely heavily on plugins to do all my dirty work. Im kinda in the same situation as bob where I would like to remove the sidebar in some of my pages, but not all. This may sound silly but I cannot for the life of me find the postID. is it possible that it could be a word instead of a number? because then maybe I can see where I went wrong.
    thanks again for your help.

    • http://mindchamber.net mindchamber

      ok update, I did some searching and found where the post ID was. and I got the code you gave bob working on my page. the only problem is there is still a comments box, and a “leave a reply floating over my banner, not sure what I did wrong ;(

  • http://www.thefranchisesocialmediablog.com Joel Libava

    Hi,

    Great theme, quick question..
    How do I increase the font size on all posts?

    Thanks.

    Joel

  • http://www.thefranchisesocialmediablog.com Joel Libava

    Also, how do I get rid of the blank space under the rss button?

    Thanks

    Joel

  • http://www.twilightkid.com Colin

    Love the theme Chris, perfect for our new company over her at Twilight kid. But please, please, please, give us some drop down menus :) I have no where to put our contributing editors submissions. I don’t want to switch themes, this one is almost perfect.

  • http://goldfish2care4.com Florin

    Thanks for sharing this WP theme Chris. I like the three columns themes more but this is worked up pretty good. Good luck and take care dude.

  • http://freealexander.org Ed

    love the theme! i’m attempting to add a banner directly to the right of the main header/logo area… so far without any luck. Any ideas?

  • Rob Rushmore

    Hi, I’m not sure if anyone answering questions here, but I thought I’d still give it a try. I love the Dirty Blue theme, which I’m using on a new blog (not my first, btw). But what I think I’ve just discovered is that it isn’t possible to add images to the sidebar the way the theme comes out of the box, so to speak. I should add that I’m talking about banners to use in my links section, not in a test widget. I’ve tried doing it the way I did with my older blog, but that just doesn’t work for this theme. Any advice would be greatly appreciated!

    • Rob Rushmore

      Sorry for the typo…I meant “text” widget, of course.

  • http://www.impresapratica.com guadagnare online

    I love the Dirty Blue Theme, just I was wondering… can I change the size of the rss feeds box?

  • http://notyetlive Maya

    Hi,

    I know this is a little late (by 2 years haha) but I’m new to this and need all the help I can get. I see I’m able to put pages in the sidebar, or at the very top left hand corner of the blog (this is possible by putting page urls in the header section, like: Free Music, but what i want is for the page names to be level with the blog title, above the picture, but aligned right. Because the page isn’t online i’m linking to a screenshot. I hope you can help, code is v confusing to me and i’m brand new to it. Sorry I’m a fool :-) Screenshot so you can see what i mean http://tinypic.com/view.php?pic=2zhqzuv&s=5
    Thanks (btw the theme is gorgeous)

    Maya

    PS Have dropdown menus been added yet? They would be cool.

    Maya