Cool Blue – Free WordPress Theme

Theme Lab → Free Theme Releases → Cool Blue – Free WordPress Theme

Cool Blue – Free WordPress Theme

Posted on the 15th of April, 2010 | 21 Comments

Today we have another awesome free WordPress theme, which I ported from a Styleshout template. It’s more or less a pretty standard blog design with a bunch of widgetized areas (mostly in the footer), threaded comments support, and post thumbnail integration, among other things.

Let’s get into the features in more detail.

FlickrRSS Support

If you have the FlickrRSS plugin installed, you can configure it to show your various Flickr photos. This will show up in your footer (above all the normal widgets).

Cool Blue Flickr

This plugin is optional and will not break anything if you don’t want Flickr photos to show up.

Post Thumbnail Support

Like the SongSpace theme, this theme makes use of WordPress’ built-in post-thumbnail feature.

Since post thumbnails were introduced in 2.9, you’ll need to at least WordPress 2.9 to run this theme.

Archives Template

Like other Styleshout ported themes including Jungleland and FreshPick, Cool Blue has an archive template that differs from the usual index template.

Cool Blue Archives

I used the same template on the search results pages too.

Social Bookmarking

On single post pages I integrated the social bookmarking section available in the original Styleshout template.

Cool Blue Bookmarks

Thanks go to Jeff Star of PerishablePress for the fully valid, SEO-friendly social media links for WordPress and also to the Sociable plugin (for LinkedIn and NewsVine).

To enable the e-mail icon, you’ll need to install the WP Email plugin by Lester Chan.

Opacity Hover Effect on Social Icons

I had some feedback from a beta tester, Muhammad Haris, who suggested that the icons would look good if they were set to 80% opacity by default and 100% on hover.

While I don’t like to mess too much with ported theme code, it’s actually pretty simple if you really want to. Just add the following lines in your style.css file:

.share-box a img{
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}
.share-box a:hover img{
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
	opacity: 1;
}

If a browser doesn’t support the opacity feature, don’t worry about it, the images will just show up as normal. Of course you can change all the 80′s and .8′s in the first part to whatever percentage you see fit.

Threaded Comments

The original template had a threaded comments design built-in, so I integrated it with a custom callback (plus a few CSS changes).

Cool Blue Comments

Widgetized Stuff

The Cool Blue WordPress theme has six widgetized areas. One in the sidebar, four in the footer (for each column), and one on the 404 template.

Cool Blue Footer

Pictured above is the fat, fully widgetized footer included in the Cool Blue theme.

To handle the “Updates” part, I coded in a custom widget to input your feed URL, Facebook URL, Twitter URL, and E-mail subscription URL. I’d recommend you place it in the “Footer One” widget area.

Thanks to WP Engineer for the code.

No Theme Options Page

That’s right, this is a feature. Why? Because I really couldn’t think of a good reason to include one that couldn’t be better accomplished by a separate plugin. Expect a follow up (opinion) post regarding this soon.

Conclusion

The Styleshout ports are easily the most downloaded themes here, although my download counter has been busted ever since I upgraded to 2.8 so I’m not 100% sure if anyone has overtaken them. I doubt it.

Hope you all like the theme, let me know what you think in the comments.

More themes that are tagged with…

Apr

2010

Post to Facebook Post to Twitter

21 thoughts on “Cool Blue – Free WordPress Theme”

Nice at April 15, 2010 at 8:53 am said:

I’m really eager to download this theme since I saw the preview on twitter. I love the signature style of styleshout.
Great job guys.
- Leland at April 15, 2010 at 9:41 am said:
  
  Me too, Styleshout has a great “signature” style.
cooljaz124 at April 15, 2010 at 9:38 am said:

Just checked the theme out. Its nice. Very cool that you included post_thumbnail feature .
- Leland at April 15, 2010 at 9:40 am said:
  
  Glad you like it. The post thumbnail feature isn’t that hard to integrate, so I’ll try to use it for any future themes. Plus it’s more compatible with more hosting environments than other thumbnail solutions like TimThumb.
  
  I explain more about this in my SongSpace release post.
Ronald Huereca at May 5, 2010 at 1:15 am said:

Well, I finally got around to “beta testing” your theme

I have to say, I am very, very impressed. I decided to use it on my personal site, and customizing it was a coder’s dream. No stupid back-end options to get in the way. Just straight-up code with no man behind the curtain.

You’ll see that I changed the color scheme a bit, but that was only to make it unique to my site.

Great, great theme overall. I wish more themes were coded like this. Beautifully done, both inside and out.
- Heyman at May 9, 2010 at 7:59 am said:
  
  I found the solution. Copy the lines below:
  
  #header #nav ul li.current_page_item a {
  background: transparent url(images/current.jpg) no-repeat center bottom;
  color: #fff;
  }
  
  and replace these old lines:
  
  #header #nav ul li#current a {
  background: transparent url(images/current.jpg) no-repeat center bottom;
  color: #fff;
  }
  
  Cheers Heyman.
- Leland at May 9, 2010 at 8:50 am said:
  
  Thanks a lot for the positive review, Ronald. Glad you’re liking it for your personal site.
Heyman at May 9, 2010 at 7:29 am said:

Hi!

I love this theme! I only have one question.
In the nav menu there is a ‘current’ reference.

#header #nav ul li#current a {
background: transparent url(images/current.jpg) no-repeat center bottom;
color: #fff;
}

But this is not working.
It is also not working in your demo version.
There should be a image with a arrow pointing down. The image is there, i cheked. But something is wrong…

Just wanted to point that out.
Thanks again fo a great theme!
Cheers Heyman.
- Leland at May 9, 2010 at 8:50 am said:
  
  Ah, thanks for letting me know. I believe that should be #header #nav ul li.current_page_item a.
  
  I’ll test it out and update the theme accordingly. There should also be a conditional on the “Home” page item so it’s highlighted while not on another page.
- Shane at June 21, 2010 at 10:10 am said:
  
  No mate. That CSS has no effect. Something to do with the width of the form or something like that and it is pushing the h4 up and cutting off the form.
  
  I took a shot of your demo theme. I am on a Mac and the same happens in Firefox, Safari and Chrome????
  
  Screenshot
Navjot Singh at May 22, 2010 at 11:00 pm said:

Just checked the theme. Its nice but seems it uses too much whitespace in its files. It can be compressed much if the content is properly formatted and undue whitespace/lines can be removed. Just a thought.
Danny Douglass at June 1, 2010 at 11:55 am said:

Great theme! I had started porting this design when it came out on styleshout, but you beat me to it. I’m working on implementing it on my blog that I’m converting to WordPress, however I’m not sure how to select a template for a new page that does not have the right sidebar. Can you offer any assistance?

Thanks!
- Leland at June 1, 2010 at 12:02 pm said:
  
  Danny, you might want to look into creating a page template. More info is here: http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates
  
  I’d suggest copying page.php and removing the get_sidebar tag as a start.
  - Danny Douglass at June 1, 2010 at 12:48 pm said:
    
    I’m looking over those instructions now – thanks for the help.
    
    Out of curiosity (from a WP beginner), would it be cleaner to maintain one template and add logic to check for a page-level variable indicating that the sidebar should be hidden? For example (syntax may be wrong, but you can get the idea)…
    - Danny Douglass at June 1, 2010 at 12:49 pm said:
      
      Oops, can’t include that server side logic…here’s what I meant to add:
      
      php if(is_null($showSidebar) || $showSidebar == true) get_sidebar();
- Danny Douglass at June 1, 2010 at 1:06 pm said:
  
  Sorry to be leaving a slew of comments, but after a little reading I realize that I don’t have to ability to select a page template on the “Add Page” screen b/c the Page Templates didn’t contain the necessary header information that assign a name to the template:
  
  http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates
  
  After adding in those five lines it is working! Thanks again.
Shane at June 21, 2010 at 9:41 am said:

Hi Leland. Great port, thanks. I have customized the theme nicely.
One small problem I have found.
I have not touched the comment form CSS yet, indeed the same problem occurs on your demo.

See annotated Image here

I will prob work it out myself but just so you can correct it or any theme users can correct it.

Thanks for your work man.
- Leland at June 21, 2010 at 9:58 am said:
  
  Hi Shane, strange I’m not able to reproduce it on my demo site. Are you sure you didn’t touch anything that would affect any h4 tags?
  
  Try adding this line of CSS for diagnostic purposes, it looks like the h4 in the “respond” div isn’t clearing properly.
  
  #respond h4 { clear: both !important; }
  - Shane at June 21, 2010 at 10:14 am said:
    
    No mate, that did not work.
    
    It seems to be the width of the form when I click the reply to a thread link. It pushes out and causes the h4 to move up and the form cut’s off.
    
    I am using a Mac and the same happens in Firefox, Safari and Chrome?
    
    Screenshot
    - Shane at June 21, 2010 at 10:15 am said:
      
      Sorry, I forgot to say, the last screenshot is from your demo.
Mathias San Miguel at December 5, 2010 at 12:26 am said:

Hey really nice theme, i used it on my blog (spanish), but i have a little question, how can i change the header background, the css dont semms to have effects dont know it is because the absolute position, can somebody help me out?