Blueprint CSS may just be the answer to all our CSS layout woes. Most, if not all, WordPress blog themes use CSS for laying out the design. But as any website or blog developer knows, using CSS for layouts can be one of the causes of early aging, high blood pressure, and sleeplessness.

Blueprint CSS is a CSS framework that you can use to cut down and ease your CSS development time. Here’s what the Google Code page says about Blueprint CSS:

[Blueprint CSS] gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing…

Features:

• An easily customizable grid
• Sensible typography
• Relative font-sizes everywhere
• A typographic baseline
• An extendable plugin system
• Perfected CSS reset
• A stylesheet for printing
• Compressed version
• No bloat of any kind

Here are some more features of Blueprint CSS as listed on the blue flavor site:

1. It performs a mass reset of browser default styles.
2. It sets up sensible defaults for typography, including font families, header sizes, paragraph styles, list styles, a baseline grid, and more. It does all of this with relative sizes, so that it scales well in any browser.
3. It gives you a methodology to use for customizable layout grids. Any number of columns and widths you can dream up is easily achievable.
4. It provides a sensible default print stylesheet.
5. It does all of these things in ways that work elegantly in most browsers your visitors are likely to be using, including Internet Explorer 6 and 7.

See these links to get an idea of what Blueprint can do:

Sample page built with Blueprint CSS

Demonstration of the Blueprint CSS grid

Demonstration of the typography

Blueprint CSS tutorials and tools:

Blueprint CSS wiki tutorial – a quick tutorial that introduces the files and capabilities of Blueprint CSS.

Blueprint CSS 101 – a great introductory tutorial that explains the benefits and methodology behind Blueprint CSS.

Blueprint Grid CSS Generator – This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility.

This post was originally published at Using Blueprint CSS for easier CSS layouts in WordPress on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

Updated Feb. 14, 2008

Deziner Folio has a really useful step-by-step guide to taking your XHTML/CSS layout and converting it to a WordPress theme. They say this whole process can be completed in 30-40 minutes!

Developing a WordPress Theme

Another option is DevBox’s Wireframe WordPress theme, which is available for download on their site. This is basically a barebones theme that you can use to easily take a XHTML/CSS layout and convert it into a WordPress theme.

Test Theme Wireframe WordPress Theme

This post was originally published at Guide to converting your XHTML CSS layout to a WordPress theme on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

SitePoint has reported that IE8 has passed the Acid2 Test. As they explain, this test was developed “as a challenge to browser developers. In a single page, the test makes use of a broad range of features from several different web standards that developers have wanted to have in browsers for some time, and it uses them to display a deceptively simple smiley face.”

In short, passing the test means a browser meets web standards.

If IE8 has passed this test, this may mean the end of annoying hacks and workarounds to get sites to work in IE. An even more exciting result of this could be the end of CSS layouts made with floats etc., and the beginning of the ability to use CSS tables.

SitePoint Blogs » IE8 Passes Acid2 Test, Web Standards Project Dies of Shock

This post was originally published at IE8 Passes Acid2 Test – too good to be true? on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

I haven’t posted anything about free CSS templates for a while, simply because I haven’t seen anything worth mentioning. But CSS Creme, which is yet another CSS gallery site, has released five free CSS templates, which are real eye candy! Use them for your sites, or just for inspiration! One thing they’re missing, though, is a license of any kind. CSS Creme guys – if you’re reading this, I highly recommend putting a TOS (Terms of Service) somewhere on your site, and maybe a license file in the download zip file.

Aside from the free templates, the site has some pretty good stuff on it. First of all, their gallery has some amazing sites in it, which they say they pick themselves. You can browse the gallery according to category or color. They also have some fabulous free wallpaper, which could spice up your desktop, as well as interesting links in their News section.

CSS Creme free CSS templates»

This post was originally published at Five new beautiful (and free) CSS templates on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

You may have certain categories in your WordPress blog that you want to appear differently than other categories. For example, what if you have a category called “Tomatoes” and a category called “Cucumbers,” and you want the titles of every post in the Tomatoes category to be red, and the titles in the Cucumbers category to be green?

There are a few plugins that can help you with this, but they didn’t work so smoothly. The best solution I have found is one provided by Lorelle on her Taking Your Camera on the Road blog. In her post titled “Different Category – Different Look: Creating Multiple Single Posts Looks for Different Categories,” she gives the following directions:

We began by making two back up copies of the single.php page called single1.php and single.2.php.

Inside of the original single.php, delete everything and replace it with this:

<?php
$post = $wp_query->post;
if ( in_category('9') ) {
include(TEMPLATEPATH . '/single2.php');
} else {
include(TEMPLATEPATH . '/single1.php');
}
?>

In the most simple terms, the PHP code issues a query that says “Check the post. If the post is in category ID number 9, display single2.php. If not in category ID number 9, display single1.php.”

In the in_category(), we set the category ID number to 9, the one that holds all of my web page design articles and experiments.

So basically, your main single.php file becomes a conditional file that tells WordPress which template file to use in certain categories. Lorelle also gives the following code you can put in the single.php file that will allow you to create multiple styles for multiple categories:

<?php
$post = $wp_query->post;
if ( in_category('9') ) {
include(TEMPLATEPATH . '/single9.php');
elseif ( in_category('12') ) {
include(TEMPLATEPATH . '/single12.php');
elseif ( in_category('42') ) {
include(TEMPLATEPATH . '/single42.php');
} else {
include(TEMPLATEPATH . '/single1.php');
}
?>

Now you have to get the styles you want to apply to the correct category. Do the following for every category you want to have a certain style for:

1. Create a new style sheet and call it style-9.css (9 is the category ID, but your category ID will likely differ. You can still call it style-9.css, but this is confusing!) If the changes you are making are minor, like changing certain colors or fonts, you should probably just copy style.css and rename it to style-9.css. In that style sheet, create the styles that you want, so for example if you want all h2 items to be red, make those changes in your new style sheet.
2. Style sheets are called in your header.php file. Which means that we need to create a header file that will call your new style sheet. So copy your header.php and rename the copy header-9.php (or whatever you want).
3. In your new header-9.php file, find the lines that look something like this:
   <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css" media="screen" />
   and change where it says style.css to style-9.css.
4. Then, in your single2.php file, replace the following line (which is probably the first line):
   <?php get_header(); ?>
   with this
   <?php include ('header-hebrew.php'); ?>

Do this for every category. If you have a lot of categories you want to appear with different styles, there’s probably some conditional PHP that you can use. Being of little PHP knowledge, I don’t know what this code would be, but the above works quite nicely for people like me with little-to-no knowledge of PHP and only one or two categories that need modifying.

This post was originally published at Displaying single post pages differently in specific categories on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

CSS Design Templates has a great collection of clean and useful CSS templates and WordPress themes.

CSS Design Templates>> 

This post was originally published at Free CSS templates and WordPress Themes on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

Here’s some more free CSS Templates. Solid layouts and simple designs.

Free CSS Templates>> 

This post was originally published at More Free CSS Templates on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

Andreas Viklund has 11 free CSS templates. The designs are clean and smart, and are probably pretty friendly to modifications. Andreas says the following about the templates:

These are my free XHTML/CSS website templates. They are free to use for any purpose without any limitations or obligations. I kindly ask you to keep the small credit link (the line that says “Design by Andreas Viklund”) since it is a nice way of giving something back to me. But that is only a request, not an obligation.

Andreas Viklund Free website templates>>

This post was originally published at Andreas Viklund Free CSS Templates on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

Template World has some really nice Web 2.0ish templates available for free. It’s worth checking out.

Free XHTML/CSS Templates For Web Design>>

This post was originally published at Free XHTML/CSS Templates For Web Design on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

Generating a sitemap for your site is an important step in optimizing it for the search engines. However, they tend to be very unpretty. See the sitemap on this site, for example. Not exactly a thing of beauty.

Chris over at Pearsonified explains how you can stylize your sitemap by using the WordPress page template system. And for those of you using his Cutline theme, he has an XHTML sitemap that is formatted specifically for that theme.

Use an XHTML Sitemap for Better Indexing>>

This post was originally published at Did you know that you can customize your sitemap? on WP Garage - WP Garage - wordpress tricks, hacks, and tips.