E.Share

Michael Soriano of Fearless Flyer recently released a free PSD template called “Your Blazing App.” Like my Corporate Blue release (also designed by Soriano), I’ve also coded this one into XHTML/CSS for free download.

Description

Like the Corporate Blue template, this layout consists of just a homepage. It’s designed for phone-related app website, but can be customized into a lot of other different uses. Here’s a description from the release page:

The layout itself is very modern. The page is housed in a beautiful etched container with very subtle textures. The large feature section showcases the “Apps” main message with large “call to action” buttons to get the viewers to instantly join.

There’s a blue ribbon separating the main section and the latest posts / sidebar. I imagined this to be an expanding area for categories and what not. Typically a little javascript should do this trick. The rest is pretty conventional, icons, typography, grid spacing and pixel perfect alignment.

I didn’t actually code the Javacsript part of the blue ribbon to make it expand, although the “Click here to expand” link is styled as a link so it shouldn’t be too difficult to integrate whatever Javascript you want.

Twitter Widget Compatible

I coded the Twitter list on the sidebar to easily integrate with their Javascript Twitter feed. I wrote more about this on my custom Twitter widget tutorial

With this template, pretty much all you have to do is place the following code at the end of your document (just before the closing body tag). Of course, you’ll have to replace the USERNAME with your actual Twitter username.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>

You’ll also want to empty out the sample content in there so it says something like the following:

<ul id="twitter_update_list"><li>Twitter feed loading</li></ul>

Want More HTML Templates?

I know Theme Lab is primarily known for WordPress themes, but I want to gauge interest to see if you’re interested in just XHTML/CSS templates. Would you be interested in more?

There are plenty of resources nowadays to get free PSD layouts, which means many potential coded templates here in the future.

I think examining the code of these (in my opinion, although I’m a little biased since I coded them) cleanly coded templates could in turn improve your overall WordPress coding skills. HTML and CSS is a major part of that.

Conclusion

I’d love to hear your thoughts in the comments. Oh and thanks once again to Michael of Fearless Flyer for designing the actual template!

Related posts:

1. Corporate Blue – Free XHTML/CSS Template
2. Are you a free CSS template designer?
3. Bravissimo – Free PSD + XHTML/CSS Template

After a long break between new free WordPress theme releases, we finally have a new one! This one is another designed by CSS Heaven, ported from a free CSS template of the same name.

It has several standard features including WP 3.0 navigation menu support, threaded comments, post thumbnails, and widget-readiness. We’ll get to those features later.

WordPress 3.0 Menu Support

There is a WP 3.0 menu placed in the top right portion of the theme (above the search box). You can also use them in any widgetized area.

Widgetized Stuff

There are widgetized areas on the sidebar, 404 page, as well as the “Featured” box on the main index template.

You can override the Featured box by using the custom “Featured Content” widget in the Featured widget area. You’ll need to input a heading, text, and a full image URL.

Post Thumbnails

There is post thumbnail support on individual post and page templates. There are a couple included in the /images/ directory. Here is a sample of one and the placement (right above the content).

They are set not to exceed 609 pixels in width. Height is up to you, although you may not want to make it too high as it will push the content too far down the page.

License

GPL. You can do pretty much whatever you want with it, modify, redistribute, whatever (except release it under another incompatible license).

Conclusion

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

And of course, thanks again to Roshan of CSS Heaven for designing another great template!

Related posts:

1. Jungleland – Free WordPress Theme
2. Bamboo – Free WordPress Theme
3. RS10 – Free WordPress Theme

Michael Soriano over at Fearless Flyer Design released a couple free PSDs a few days ago. One of them was a website template called “Corporate Blue” and I decided to code it into XHTML/CSS and release it here for free (with permission, of course).

Description

This template consists of one page (a home page). To describe it, I’ll take an excerpt from the original release post.

The design is a modern layout ideally for a financial or business institution (anywhere a progress chart can be represented). A large feature area with a colorful bar graph sits right below the header. Underneath this area are three even columns with large thumbnails that can house summaries of your company profile, links or even the latest news.

As far as the actual coding goes, I tried to make it as close to the original design as possible, right down to the text shadow effects. There may be some slight variations (like a few subtle font changes, for example) but all in all it looks pretty much the same.

License

This template is released under the GPL license, which means you can do pretty much whatever you want with it.

If you feel like designing a couple subpages and converting it into a WordPress theme and releasing it yourself, go for it.

Conclusion

I haven’t been coding much lately so I used this template as an opportunity to shake off the rust and brush up on my skills again. Hope you like it, and let me know what you think in the comments.

And thanks once again to Michael of Fearless Flyer for designing the original PSD template and allowing me to release my coded version here.

Related posts:

1. Your Blazing App – Free XHTML/CSS Template
2. Bravissimo – Free PSD + XHTML/CSS Template
3. Are you a free CSS template designer?

This is a free tweet archive theme for WordPress, based off of my own tweet archive site. It contains no images and made up of pure CSS (with a few CSS3 properties), and supports custom WordPress 3.0 menu and background support.

How To Set Up A Tweet Archive

First of all, this theme looks really weird if you try to use it for an actual blog. It’s designed to be used to as a tweet archive. If you don’t know how to set one up, please refer to this tutorial: How To Create a Searchable Tweet Archive with WordPress.

Basically all you need to do is backup as many of your current tweets as you possibly can using a service like TweetBackup or BackupMyTweets, export them as an XML file, and import it using WordPress’ built-in importer.

Then to automatically grab new tweets, you’ll need to install the Twitter Tools plugin by Alex King and go through the authorization process.

Inspiration

The idea for this theme is definitely inspired by Douglas Bowman’s tweet archive theme and the idea behind it.

Conclusion

Ever since I customized my theme for my tweet archive sub-site, I’ve had a lot of compliments on it. Although I didn’t have any requests to release it, I thought it would be a good idea to develop a “generic” version of the theme without my logo or beaker graphics.

By the way, if you want to see the original tweet archive theme after viewing the live demo of this theme, clear your cookies or click here.

License: The TL Tweets theme is licensed under the GPL, including PHP, HTML, and CSS.

P.S. Don’t forget to follow me on Twitter if you don’t already: @themelab

Related posts:

1. How To Create a Searchable Tweet Archive with WordPress
2. Simply AIO – Free WordPress Theme
3. RS14 – Free WordPress Theme

Today’s free WordPress theme is designed by Roshan of CSSHeaven.org (you might know him from his RamblingSoul themes). I ported the static template to WordPress and packed it with WordPress 3.0-specific features, including custom menus, headers, and backgrounds. More on that below.

WordPress 3.0 Menus

As stated above, this theme includes WordPress 3.0 menu support which means you have very flexible control over what links show up in your header menu. If you don’t set up a menu, it will default back to a list of WordPress pages.

For further reading on implementing the WordPress 3.0 menu feature into your own themes, I found these links really helpful:

• Goodbye headaches, hello menus! – A write-up by Justin Tadlock on WordPress 3.0 menus.
• wp_nav_menu – The official WordPress codex on the function used for the menus.

Custom Header

If you want to get rid of the red header image displayed directly below the nav menu, the custom header feature is for you. You’ll need an image 980 pixels wide and 170 pixels high to replace it. If it’s smaller than that, the CSS is coded to position the background image in the center of the div.

For more information on implementing this in your own theme, I found the add_custom_image_header page on the WordPress codex very useful, although I modified it a bit so it doesn’t load styles in the header, just an inline background image declaration on the “header” div.

Of course, feel free to check out the code in header.php and functions.php to see how exactly I did it.

Custom Background

If you want to customize the background image and get rid of the greenish background image currently used, use this feature.

This is by far the easiest feature to implement in a theme, thanks to WP Engineer for the one line code you need to add to your theme’s functions.php file.

add_custom_background();

You also need a wp_head() hook in your header so the internal stylesheet that handles the custom background styles can be embedded.

Custom Thumbnails

As you can see on index/archive/search pages, the posts are laid out in a gallery format. For this, I decided to use the built-in WordPress thumbnail system. It will automatically crunch the images to 270×140.

Thanks to Mark Jaquith’s tutorial for information on integrating this feature into the theme.

Widgets

Like almost all the other themes here, Green Tea is widget ready. The widgetized areas are the sidebar, left footer, right footer, and 404 page.

Conclusion

This should probably go without saying, but you’re going to need to be running WordPress 3.0 for this theme to not spit out a bunch of errors. It’s not backwards compatible, and I did this on purpose to help force people to upgrade to the latest version (which you should be doing anyway).

The reason I chose this particular template because it seemed to have as many elements that I could use to integrate WordPress 3.0 specific features. While I wouldn’t necessarily use these features on my own sites, I can see the value if you’re developing themes for public release or clients.

WordPress 3.0 menu integration is pretty much a must for those, as it makes things so much easier for users in customizing links in menus versus the old way: page lists, category lists, or hard-coded menus. Depending on the design, custom headers would be nice and to some extent, maybe even custom backgrounds (although I’m not a huge fan of this one).

Thanks to Max Luzuriaga for the suggestion of the Green Tea name which I got on Twitter.

Let me know what you think of the theme in the comments, I’d love to hear your feedback!

License: Everything is licensed under the GPL, the original template (including CSS and artwork) and the WordPress portion.

Related posts:

1. WP Clean & Green – Free WordPress Theme
2. RS16 – Free WordPress Theme
3. RS11 – Free WordPress Theme

Got a couple requests today to port this template by Mohd Huzairy to WordPress, so I did. As you can see, it’s super simple with a very minimalistic design. In the WordPress theme, I added a few features like a widgetized sidebar and threaded comments.

Related posts:

1. Simple Gray – Free WordPress Theme
2. RS11 – Free WordPress Theme
3. Jungleland – Free WordPress Theme

Today we have yet another a ported WordPress theme originally designed by Roshan of Rambling Soul. It’s pretty much just a standard blog theme with three widgetized areas (404, sidebar, intro text) and threaded comments.

Related posts:

1. RS11 – Free WordPress Theme
2. WP Rambling Soul 7 – Free WordPress Theme
3. Spotlight Blog – Free WordPress Theme

Here’s the first resurrected theme released on Theme Lab. Originally designed by Small Potato back in 2007, I ported it to the Thematic theme framework. It now includes features such as threaded comments as well as many features inherited from the parent theme, Thematic, such as new markup.

As always, remember how to install a WordPress child theme. You will need both Thematic and the Braintied child theme uploaded to your themes directory. Just activate Braintied.

Related posts:

1. Astatic – Free Thematic Child Theme
2. Monochromatic – A Thematic Child Theme
3. Should Child Themes Be Listed on WordPress.org?

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

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.

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.

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

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.

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.

Related posts:

1. Keep It Simple – Free WordPress Theme
2. Blue World – Free WordPress Theme
3. TechJunkie – Free WordPress Theme

It’s been a long time since I’ve released a Thematic child theme. This one is called Astatic, and it’s designed to be a very minimalistic WordPress blog theme with posts formatted in two columns on index pages.

If you remember how to install a child theme, you also need to have Thematic uploaded to your /wp-content/themes/ directory, but activate Astatic.

Notes

• I removed several elements through the functions.php file. I could’ve used display: none; to disable them through CSS, but that kinda freaks me out.
• The blog title will show up wrapped in an H1 tag on non-singular pages. On singular pages, the post title uses the H1 tag. This is to keep the SEO crazies happy since I removed the blog description (see above note) which usually handles the H1 stuff.
• The posts on the index pages are styled in two columns on index pages through the .not-singular selector. Credits go to the body_class function.
• Only three files included in the child theme: screenshot.png, functions.php, and style.css. No images are used in the design at all.

I tried to make the code in functions.php pretty well commented so you can hopefully figure out what’s going on there. I may do a follow up post on my development process.

Credits

Every time I make a new Thematic child theme is a learning experience. Here are a few resources I used to help me out:

• ThemeShaper Forums – This place has a wealth of useful info in their archives. Tip: Use a site specific Google search followed by your query (i.e. site:themeshaper.com/forums/ child theme question).
• The Right Way to Override Theme Functions – A nice tutorial on overriding Thematic functions. This information was probably gone over in some post in the Thematic forums (see above) too.
• Useful Thematic Filters – This post has a nice list of useful Thematic filters (like the title would suggest).

There are also a lot of good info on the ThemeShaper blog, particularly through the How To Modify WordPress Themes The Smart Way series.

Conclusion

Hope you all like the design. It all started when I coded this when I was bored, then I decided to turn it into a Thematic child theme.

Most of you who have seen my “designs” know that there are very few images, mostly because I suck at making them in Photoshop. Hence, they are almost always pure CSS.

I know it’s really simple but I’m sure it could come in handy for something. Let me know what you think in the comments.

Related posts:

1. Dissecting Astatic – Thematic Child Theme Tutorial
2. Braintied – Free Thematic Child Theme
3. Monochromatic – A Thematic Child Theme