Premium Retro Car Blog WP template collected at iWordpressThemes. Download New WP Designs. Retro Car theme download, Retro Car Cool theme, Simple Retro Car layout.

$0,99

Buy with PayPal Now

Premium Development Blog WP template collected at iWordpressThemes. Download New WP Designs. Development theme download, Development Cool theme, Simple Development layout.

$0,99

Buy with PayPal Now

Premium Paints Blog WP template collected at iWordpressThemes. Download New WP Designs. Paints theme download, Paints Cool theme, Simple Paints layout.

$0,99

Buy with PayPal Now

$0,99

Buy with PayPal Now

Premium  Bubbles Blog WP template collected at iWordpressThemes. Download New WP Designs. Bubbles theme download, Bubbles Cool theme, Simple Bubbles layout.

$0,99

Buy with PayPal Now

Download: vintagemedical.zip (461 KB)

Download: Fashionista.zip (302 KB)

If you’re still not following me on Facebook or Twitter, you probably haven’t heard that I’m speaking at another WordPress DC meetup.

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

TimThumb, an image resizing script commonly used in WordPress themes (especially paid ones), is being exploited through a zero day vulnerability. If you think your WordPress theme may use the TimThumb script, please pay attention.

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

After I released the most recent Theme Lab redesign, I had a number of comments on the “bio dropdown” box I have up in my navigation bar. I coded it with just a few lines of CSS along with a background image.

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