October 16th, 2009 by Luis Alves

Forcing footer to bottom of page with just CSS

This is a brief tutorial to explain how you can force the footer to stay in the bottom of the page with just CSS.

I have tested it in Firefox Mac / PC, Safari Mac / PC,  IE7 and IE8. Does not work for IE6 and bellow.

First – In your CSS you have to set the html and Body to 100%

html, body {
height: 100%;
}

Second – Wrap all the content of your website except the footer div in a div with the following code:

#wrapper {
height:auto !important;
margin:0 auto -50px; /*this value is the footer height)*/
min-height:100%;
}

Third – create the CSS of your footer

#footer {
height: 50px;
}

Place your div #footer after the wrapper and that’s it.

October 3rd, 2009 by Luis Alves

How to display link categories description in wordpress sidebar

In wp-includes you’ll find the file bookmark-template.php.This will be done with the tag $cat->description. go to line 227 and change this line:

$output .= "$title_before$catname$title_after\n\t<ul class='xoxo blogroll'>\n";

to:

$output .= "$title_before$catname$title_after\n\t<p>$cat->description</p>\n\t<ul class='xoxo blogroll'>\n";

You can change the place where the description will appear and the html tag that wraps it, for instance:

$output .= "$title_before$catname$title_after\n\t<ul class='xoxo blogroll'>\n\t<h3>$cat->description</h3>\n";
August 19th, 2009 by Luis Alves

Text readability vs Line height

Reading text on the web is a bit harder than doing it on some paper publication. A correct line-height set to paragraphs in CSS is a major help we can give to website readers.

So what line-height should I use?

A good line-height is a value from 150% to 160%. Serifs may require the higher value on this range since visually they occupy a little more space.
Cheers!

August 18th, 2009 by Luis Alves

Colour Contrast Check – Font Vs Background

I found this great tool at Snook.ca to test if a certain font color when placed in a color background is compliant with the W3C rules.

Colour Contrast Checker

June 7th, 2009 by Luis Alves

Can’t save transparent PNG 24 in Fireworks?

24 bit PNG’s don’t have transparency. A 24 bit PNG has 3 channels – Red, Green, and Blue. In a 32 bit PNG you have 4 channels – Red, Green, Blue and Alpha, so the way to save a transparent PNG with high quality anti aliasing in Fireworks is to save it in 32 Bit mode.

But Photoshop doest it!
That’s because Photoshop says it saves in 24 bit when it’s actually saving as 32 bit.