First up is this yellow navigation bar PSD, screenshot is below. Click it to download.

(Background image isn’t included in the actual PSD, I just lifted it from my site to make the preview graphic more Theme Lab-esque.)

I’m planning on writing the following tutorials to go along with this as well, and will link to them from here when ready.

• How to code the yellow navigation bar in HTML/CSS
• How to implement the yellow navigation bar in a WordPress theme

Let me know what you think in the comments!

Related posts:

1. RichWP WordPress Themes – Free for a Limited Time
2. RedPepper – Free WordPress Theme

Click on the logo text on the top right corner to cycle through the different layouts. Or just download it to try it out for yourself.

It’s a fairly simple template, and certainly not limited to car-related websites. Just switch out a couple images, and it could be used for whatever you want.

Quick Facts

• Valid HTML/CSS
• Uses the Titillium font (via Google Web Fonts)
• Utilizes CSS :nth-of pseudo-selectors

There’s three layouts included in the download: a homepage, listing page, and details page. Click through the live demo pages to see them all.

Let me know what you think in the comments.

Related posts:

1. Bravissimo – Free PSD + XHTML/CSS Template
2. Corporate Blue – Free XHTML/CSS Template
3. Your Blazing App – Free XHTML/CSS Template

• IceChimp is a free “coming soon” theme for WordPress.
• It’s designed to work with the official MailChimp plugin.
• It utilizes WordPress’ Theme Customization API to change stuff.
• It’s based off an older theme I released called Ice Breaker.
• Here’s the download link. Here’s the live demo.

Story

I was browsing through my WordPress.org profile the other day and came across the Ice Breaker theme, a theme I released over two years ago, and decided it was time for an update.

Ice Breaker is a “domain parking” theme that was pretty deeply integrated into FeedBurner, specifically their RSS email subscription service. Again, the original theme was over two years ago, and times have changed.

Some Twitter followers might have noticed I asked a question on Twitter a couple weeks ago:

Do people still use RSS?

— Theme Lab (@themelab) December 28, 2012

I received mixed answers, some use it, others don’t. The general consensus was that the technology of RSS itself was not dead, far from it actually.

But what I really should’ve asked is if FeedBurner was dead or not. Although the service is still active, articles like The FeedBurner Deathwatch Continues showed that FeedBurner isn’t exactly Google’s top priority.

Therefore, I decided to take Ice Breaker in a completely new direction.

Enter MailChimp. And IceChimp.

I’ve been quietly using MailChimp for a while now (there’s a signup form on the Theme Lab homepage if you want to join my newsletter).

I also think it’s good for a public release theme because you can sign up for a MailChimp account for free, with no credit card required. You only pay if your list reaches a certain amount of subscribers. So I decided to replace the FeedBurner integration with MailChimp.

Although I looked into some more advanced API implementations, I decided the most practical method was just using what was already available: the official MailChimp for WordPress plugin.

And since I was pretty much redoing this theme from the ground up, I decided a name change was in order: IceChimp.

MailChimp for WordPress

This theme requires the MailChimp for WordPress plugin installed and activated if you want to use IceChimp’s MailChimp-specific features. It’s free from the WordPress.org plugin directory, which means you can install it right from your WordPress dashboard.

Without it installed, you basically just get a static template with an email subscribe form in the middle. With some basic HTML knowledge you could implement any subscription service you wanted, but that’s not the point of this theme.

Upon MailChimp plugin activation, the form on the theme will begin to look completely different.

Now accommodating MailChimp’s default First Name, Last Name, and Preferred Format inputs.

You’ll find that the theme has styles for pretty much every combination of setting you can think of within the MailChimp for WordPress plugin backend.

After inputting your MailChimp API key (you’ll need an account for this) you can select which list you want the form to link to.

The only settings it won’t recognize are the “custom CSS” settings, as I deregistered the default plugin styles in the functions file so IceChimp could take over those.

But that’s not all

In the original Ice Breaker theme, I included four custom color scheme stylesheets. I used some Theme Options code I found on the web (I believe on ThemeShaper) in order to allow users to change the color scheme without touching the code.

The screenshot above shows the four color schemes (with the default form layout, no MailChimp plugin) present in the original Ice Breaker theme, which were carried over to IceChimp as well, although the way of altering the color scheme has changed.

Customizer

Again, this was over two years ago, and some new ways of allowing users to customize themes have come along since then.

Yes, I’m talking about Customizer, introduced in WordPress 3.4.

With the Customizer options included in IceChimp, you can instantly change the color scheme, as well as input your Twitter username, custom logo, custom background, along with the standard Site Title and Tagline options.

A screenshot of the customizer options is to the left. I’ll go over that (as well as other MailChimp-specific options in the video below.

IceChimp Video Guide

Below is a quick Screenr video covering all the options in IceChimp (excuse the crappy mic).

The video shows you how to quickly and easily set up a custom MailChimp-powered “coming soon” page with WordPress.

Wrapping Up

Many thanks to Otto and his Theme Customizer tutorial, which I referred to more than a few times when getting IceChimp’s Customizer to work right.

Also many thanks to MailChimp for their cool email service, and their official WordPress plugin which would have made this theme a lot more difficult to make without it.

Also, I’m planning on submitting this theme WordPress.org so you’ll hopefully be able to grab everything you need (theme and plugin) to get this working right from your WordPress backend.

Let me know what you think in the comments.

Related posts:

1. Ice Breaker – Free WordPress Domain Parking Theme
2. Photabulous – Free WordPress Theme
3. Bluish – Free WordPress Theme

It will be on Tuesday, August 9th at 7 PM located at Fathom Creative‘s office in DC. More details on location, parking, etc. can be found on the meetup page (linked previously).

What I’ll Be Talking About

Similar to my last presentation at WordPress DC, I will be discussing CSS. Unlike last time, however, the CSS tips I’ll be going over aren’t necessarily WordPress-specific, and can apply to nearly any type of site. The official description:

You’ll learn some useful and practical CSS tips and tricks. These could include tips on speeding up development time, general optimizations, and other cool things. Also, these aren’t necessarily limited to WordPress, but could apply to nearly any HTML/CSS based site. Beginner to intermediate CSS knowledge would be nice but not absolutely required.

Slides

These are in the same format as my previous slides (but less crammed so it’s easier to see on the TV).

Theme Lab T-Shirts

This will be the premiere of the limited edition Theme Lab t-shirts! Okay, they’re not really limited editions, I can print more if needed. I’ll be bringing various shirts in S/M/L sizes. A picture of them is below.

I’ll figure out some way to give them away at the meetup.

Andy Stratton’s Presentation

Also speaking at the same WordPress DC meetup is Andy Stratton, who I got to know pretty well at WordCamp Raleigh earlier this year. I saw his presentation there called Diet Pills, SEO and Theme Frameworks, which he’ll also be presenting here. Trust me, it’s one you won’t want to miss.

Conclusion

Looking at the meetup page, it looks like spots are filling up pretty quickly. If you want in, you should RVSP ASAP.

Related posts:

1. WordPress DC Presentation – Leveraging CSS to Change Your Theme

Quick Fix

The easiest way to fix it would be to delete any instance of timthumb.php on your sites. It is also commonly named thumb.php (this is what WooThemes uses). I’d imagine this also applies to inactive themes.

As outlined in the previously linked post on Mark Maunder’s blog, the next best quick fix would be to remove all the “Allowed Sites” in the array.

Before:

$allowedSites = array (
	'flickr.com',
	'picasa.com',
	'img.youtube.com',
	'upload.wikimedia.org',
);

Change to:

$allowedSites = array();

Also make sure the following constant is set to false, otherwise removing the “allowed sites” won’t really matter, since every site would be allowed if it wasn’t:

define( 'ALLOW_EXTERNAL', false );

What’s the big deal?

You might be thinking, “lolz, Flickr or Wikipedia is gonna hack my site? Yeah right!” Wrong.

The problem is flickr.com.lamehackersite.info would be just as “allowed” as flickr.com, which is where the real vulnerability lies.

Theme Providers that Use TimThumb

Some WordPress theme providers that bundle TimThumb in their themes to resize images include WooThemes and ElegantThemes, two very popular commercial theme vendors that have tons of sites using themes with the vulnerable TimThumb script.

As far as WooThemes goes, it appears they’re aware of the issue according to the following tweet:

Let’s not forget theme marketplaces (*cough* ThemeForest *cough*) where countless authors have produced countless themes used on countless sites, a lot of which probably use the TimThumb script. I’d imagine this would be a much messier situation than with a single vendor.

Theme Lab Themes

In the name of transparency, there are three themes on Theme Lab that use the TimThumb script. They have been updated to the latest version (with allowed sites removed).

• Newsworthy
• Jungleland
• Photabulous

If you use any of these themes, please update the /scripts/timthumb.php file ASAP. This advice can also apply to any other theme that uses the timthumb script, obviously.

Why only three? Because I discovered a better way to include thumbnail functionality in WordPress themes.

Use add_image_size Please!

WordPress has a great, built-in API for resizing images that can effectively replace the need for timthumb on WordPress sites. It’s called add_image_size.

For some live examples on how to use this in your own themes, check out the Green Tea, Cool Blue, or SongSpace themes here at Theme Lab.

This feature has been built into WordPress since version 2.9, which was released on December 19, 2009 (well over a year and a half ago).

Mark Jaquith posted a great tutorial on including this feature in your themes, so I can’t think of many other excuses for not including this in new themes.

A Note on the TimThumb Developer

I noticed that the TimThumb developer, Ben Gillbanks, was getting directly and indirectly “bashed” pretty hard in the comments of the original vulnerability post.

Yes, it turns out the TimThumb script isn’t the most secure script in the world, but at least the developer is sticking around and supporting it for free.

I believe the script was released with nothing but the best intentions, and to see this “bashing” take place against someone who is doing all he can to help the situation is a bit bewildering, to say the least.

Over the years I’ve seen him respond to lots of TimThumb support requests on Twitter, something he’s certainly not obligated to do for a free script, but he does it anyway.

After all the profit that’s been made from the script (like commercial themes using it to make sure their fancy Jquery slider images are resized nicely) you’d think you’d see a little gratitude, but what else is new?

Conclusion

Obviously this is a pretty messy situation, a lot of users probably won’t have any idea they’re vulnerable until they’re hacked. It’s important to understand how widely used this script has been bundled with WordPress themes over the years.

Jayvie has also posted his thoughts on the issue in his post titled Timthumb zero day vulnerability: time to get back to basics.

What do you have to say about it? Let me know in the comments.

Related posts:

1. WordPress Security Alert – Vulnerability in 2.3.3
2. WordPress 2.8.3 Security Fix: Admin Password Reset
3. Newsworthy – Free WordPress Theme

In this CSS tip post, I’ll go over how you can have a similar hover effect on your own sites.

The Example

In this example, I’ll be using a text widget in the Twenty Eleven theme, the new default as of WordPress 3.2.

Basically, once you hover over the div that contains the widget, a “hidden” div will appear which will be our bio dropdown box.

Note in the picture to the left, the gray bio box will not appear unless you hover the div containing the “Bio Hover” heading.

The Selector

It’s not that important to have a unique CSS selector to style the div you want to put your bio dropdown box in. Basically this is because if you don’t have the accompanying markup in that div, nothing would show up anyway in the event of a hover state.

Although in the case of Twenty Eleven, we could get away with just styling the “aside” class, chances are you only want a bio dropdown box on one of your divs anyway, so we’ll get more specific.

Luckily with WordPress, it spits out a ton of unique CSS selectors you can use. In this example, it spits out #test-3 which we’ll use from now on.

Note: This may vary depending on your WordPress installation. Use something like Chrome Developer Tools to easily find the selector.

HTML Markup

In this example, the HTML markup can be placed directly into the WordPress text widget. This is what you’d put in:

<div class="bio-dropdown">
<img class="photo"  alt="Leland!" src="http://www.themelab.com/wp-content/themes/themelab5/images/leland-medium.png" />
<p>Hello. I am Leland Fiegel and I am the creator and founder of Theme Lab. I love to write code, especially HTML, CSS and for WordPress.</p>
</div>

Unless you want to steal my identity, you’ll probably want to replace the photo with a picture of yourself. You can also optionally remove it.

Since we’re using a WordPress widget, the outlying markup is already generated for us. This is what it is in total.

<aside id="text-3" class="widget widget_text">
<h3 class="widget-title">Bio Hover</h3>
<div class="textwidget">
<div class="bio-dropdown"><img class="photo"  alt="Leland!" src="http://www.themelab.com/wp-content/themes/themelab5/images/leland-medium.png" /><p>Hello. I am Leland Fiegel and I am the creator and founder of Theme Lab. I love to write code, especially HTML, CSS and for WordPress.</p></div>
</div>
</aside>

If you’re doing this on a raw HTML site, you’ll need some sort of wrapper (like this one is the aside) for the bio dropdown with something else in it, otherwise there’s nothing to hover over to drop down.

Real-life example: My bio dropdown div is inside an li tag in my navigation menu.

First Two Lines of CSS

The first two lines really set up the rest of it, so I put this in its own section.

#text-3 { position: relative; }
.bio-dropdown { display: none; }

Explanation

• First line: We set the wrapper of the bio dropdown to have relative positioning. This makes it easier to absolutely position the bio dropdown box closer to the original wrapper.
• Second line: This essentially makes the bio dropdown box invisible by default. It’s only supposed to show up when you hover over something, remember?

Note: If you’re not a fan of display: none; or think it hurts your SEO or something, you can also use something along the lines of position: absolute; left: -100000em; which will basically move it so far off the page, noone would ever see it anyway.

The Rest of the CSS

The following CSS code handles the look and feel of the bio dropdown box.

#text-3:hover .bio-dropdown {
display: block; z-index: 99;
position: absolute; top: 25px;
background: #ccc; padding: 10px 10px 0 10px;
font-size: 11px; line-height: 18px; color: #666;
}

Explanation

This is where we finally use the #text-3 selector along with the :hover pseudoclass to make the bio dropdown box show up only when you hover over the text widget.

• First line: The display: block; makes the bio dropdown box visible. The z-index: 99; ensures that the box will be displayed over everything else, unobstructed.
• Second line: This positions the box below the aside about 25 pixels.
• Third line: These are just some cosmetic styles, setting the background to a light gray with decent padding.
• Fourth line: This is all self-explanatory typography.

Note: About the first line, if you’re using the position: absolute; left: -100000em; technique instead of display: none; like I explained above, using display: block here wouldn’t be necessary (since divs are already assumed to be block level elements anyway). Instead you’d have to use left: 0; to move the div back onto the page.

And for the image, just a simple float and right margin.

.bio-dropdown .photo { float: left; margin-right: 10px; }

WordPress Integration

I can’t think of a good way to integrate this into a dynamic WordPress menu (wp_nav_menu) without filtering the crap out of something. The easiest way may be to hard code your navigation and get over it (which I do on all of my sites).

If you have any techniques on how to insert markup into a WordPress menu item, which is required for this, I’d love to hear about it in the comments. I’m sure it’s possible but it goes beyond the scope of this CSS tip post.

Conclusion

Yes, I realize you probably wouldn’t want to put a bio dropdown in your sidebar, you’d put it in a place with limited space that doesn’t have room for it to be fully displayed (like a cramped navigation bar).

Fortunately, you can use this teqhnique just about anywhere. I just wanted to go over a basic technique on how to display a whole div on hover.

It’s not too complicated and you don’t need any fancy Javascript stuff to do it, although if you wanted some high-tech fading effect, you’d probably have to use some Javascript.

Related posts:

1. Seamless Image Rollovers Using CSS
2. Make A Custom Twitter Widget Without A Plugin
3. Guide to Styling the WP-PageNavi WordPress Plugin

The Homepage

Probably the most prominent feature in the new design is the homepage design, which is notably different than the blog-style homepage of the previous design.

At the top are the three latest posts, then below a few featured articles to the left of a subscription area. Below are the latest five themes displayed in an interesting non-slidery way.

The Rest

Most of the rest of the features of the site are more are less the same, including threaded comments, tag pages for different types of themes, etc.

There’s a bit less emphasis on social media stuff, especially on the single post pages where I’d have share icons for MySpace, Technorati, and other sites you probably don’t even use.

There’s still a simple Facebook/Twitter link on the left side of the content area on single posts though. If you really feel the need to share a link on MySpace, however, feel free to do that as you normally would, but without the aid of a social networking icon link here.

Recommended Products

On every non-post page (except the homepage) I have a listing in the sidebar for “Recommended Products,” which are basically just affiliate links to paid WordPress themes and plugins I would recommend to others.

On single posts, this area is replaced with a “Related Posts” section.

Conclusion

So that’s about it. There may be a few kinks here and there, if you notice anything feel free to let me know in the comments (that are still threaded, by the way).

Oh and also, if you’re using IE6, this site probably looks like garbage because I use a lot of transparent PNG images, and I don’t intend on fixing it either. View it in a modern browser.

Let me know what you think in the comments! Oh yeah, and hire James McDonald for all your design needs, and hopefully me to code it.

Related posts:

1. New Theme Lab Design by James McDonald
2. Brand New Design on Theme Lab
3. Simply Minimal WordPress Theme Review

Like I outlined in my Thank You theme post, I’ve been a bit busy the past year off at school, hence the lack of posts. In the rest of the post, I’ll outline some future plans for the site.

The Future

First of all, a new site design is in the works. In fact, it’s already been designed. You can probably spot a few teasers on James McDonald’s Dribbble page, who was also the designer of the current theme you see here.

There are a few more theme releases in the works, which may or may not be commercial.

Conclusion

I hope to have some new themes and tutorials published in the coming weeks. Thanks for sticking with me so long, even through the times of not so much activity (like the past few months).

Related posts:

1. Theme Lab is 2 Years Old – Another Year In Review
2. Theme Lab Is 3 Years Old Today – Massive Three-For-All Giveaway
3. The Best of Theme Lab in 2009

This year looks like it’ll be a great follow-up with a great lineup of speakers. If you’re going to be there, let me know. I’d love to meet you and/or see you again. I should be arriving Friday and will stay until Sunday.

If you haven’t registered yet, and would like to, there are still tickets available as of publishing this post at $45 each. Below is a link to register.

P.S. If you don’t know what I look like, see the video interview linked to above. My appearance hasn’t changed that much since a year ago.

Related posts:

1. Video Interview at WordCamp Raleigh
2. I Am Attending WordCamp Raleigh
3. I Was Interviewed At 1stwebdesigner

I’m participating in my school’s Relay for Life program. For those who don’t know, it’s a fundraiser for the American Cancer Society, culminating in a 12-hour event throughout the night. There are 5 days until the event.

I don’t ask for much here, but I wanted to make a quick solicitation here for donations. In return, I’ve developed a pretty simple Twenty Ten child theme that I’ve entitled, Thank You.

More About the Theme

• Coded in almost entirely CSS, the only image is for the sidebar list item backgrounds
• Makes use of WordPress 3.0 menus, supports descriptions too
• Widgetized sidebar
• Check out the demo

Being coded in almost all CSS makes it really easy to customize the colors. Also make sure to utilize the WordPress 3.0 menus with descriptions, otherwise the menus will look weird.

How To Donate

It’s pretty simple, just go to my personal Relay for Life page and click the “Donate” button. You’ll be taken to a page which will let you donate by credit card, directly to the American Cancer Society. There is a minimum donation of $5 (set by them, not me).

There is also an option to mail in your donation but credit card would probably be more convenient. Any donation is greatly appreciated.

P.S. To any Jersey Shore fans, the “DTF?” on my shirt stands for “Down to fight?” and not what you’re probably thinking.

How To Get the Thank You Theme

After you’ve donated, simply e-mail me directly at lelandf@gmail.com or my contact form with the full name you donated under. I get a notification of all new donations so I’ll know who donated what.

I’ll respond with the child theme as an attachment. I’ll be trying my best to monitor my email box throughout the day.

Support Policy

You should think of this theme as a simple token of my appreciation for donating, not like you’re purchasing a premium theme with support expected.

I have tested this theme pretty thoroughly with theme unit tests and such. And keep it mind it’s a Twenty Ten child theme, so the core theme should always be up-to-date with the latest WordPress standards.

Of course, if there’s some grievous error within the theme, just let me know via comment or email and I’ll look into it. Anything customization related, however, I really can’t offer support for it.

License

GPL. Once you have hold of the theme, you can do pretty much whatever you want with it.

Conclusion

I’m not a big fan of apology posts, and only like to post if I have something actually worth posting. All I have to say is, expect some more activity this summer when I have more time.

And keep following me on Twitter, as I still do check it every day, despite my evident lack of regular tweets.

Most importantly, thanks so much for supporting this cause. If you have any questions or comments feel free to shoot me an email or leave a comment below.

Related posts:

1. Page.ly Free Site For Life Giveaway Contest
2. Resurrected Themes – Bringing Old WordPress Themes Back to Life
3. Theme Lab is 4 Years Old Today