Thursday, February 14th, 2008
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:
- It performs a mass reset of browser default styles.
- 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.
- It gives you a methodology to use for customizable layout grids. Any number of columns and widths you can dream up is easily achievable.
- It provides a sensible default print stylesheet.
- 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.
![[Slashdot]](http://slashdot.org/favicon.ico)
![[Digg]](http://digg.com/favicon.ico)
![[Reddit]](http://reddit.com/favicon.ico)
![[del.icio.us]](http://del.icio.us/favicon.ico)
![[Facebook]](http://www.facebook.com/favicon.ico)
![[Technorati]](http://technorati.com/favicon.ico)
![[Google]](http://www.google.com/favicon.ico)
![[StumbleUpon]](http://www.stumbleupon.com/favicon.ico)
Posted in Tips | Tags: Blueprint CSS, CSS | 4 Comments »
Sunday, February 10th, 2008
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
Posted in Shorties, Themes | Tags: CSS | No Comments »
Monday, December 10th, 2007
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»
Posted in CSS Templates | Tags: CSS, inspiration | 13 Comments »
Sunday, July 15th, 2007
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:
- 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.
- 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).
- 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.
- 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.
Posted in Tips | Tags: categories, CSS | 17 Comments »
