CSS3 PIE makes some CSS3 features work in IE6 – 9. It supports border-radius, box-shadow, and linear-gradient. It works great and is super easy to set up. Unless you use it in WordPress. After some Google searching, a fair amount of testing, and a lot of grumbling I got it working in a WordPress site. It is really simple. I hope that this will save others from some headache.

1. Put the PIE.htc file in the WP Root directory and then reference it in your css as – behavior: url(“PIE.htc”);
2. All the elements that use CSS3 features will need either position: relative or position: block on them

Lets say that a client decided they would like the background of every other <li> tag to be darker than the rest. This <li> is created dynamically. In the past I would have to go contact a Back End Dev and have him write some code to put a class on every other <li>. Then I would go style those with the new class. With the use of the nth-child pseudo selector I can do this with the CSS alone. Here’s how:

ul li:nth-child(2n+1) { background:#212121; }

The expression 2n+1 will match the first, third, fifth, seventh, and so on, elements if they exist. 2n+1 isn’t the only expression you can run. Here is a list of a few possibilities:

• 4n+1 would select the first, fifth, ninth, thirteenth…
• 4n would select fourth, eighth, twelfth, sixteenth…
• -n+5 would select fifth, fourth, third, second, first, none

If this isn’t making perfect sense yet just run the math loop in your head and it will. Lets take the first example again. 2n+1

• 2*0+1=1
• 2*1+1=3
• 2*2+1=5
• 2*3+1=7

Before we go out and use this everywhere I should point out that IE doesn’t support this in any of its versions. The saving point to this though is that jQuery does support all CSS selectors so if you are using jQuery you should be fine. For examples of how the nth-child works with jQuery see this page. Happy Coding.

http://weather.yahoo.com/forecast/USUT0078.html

changes to

http://weather.yahoo.com/united-states/utah/farmington-2402466/

Sorry took so long to get this posted.

In my previous post I talked about what I have been doing to my desktop the last little while. I had quite a few email or IM me asking about how the GeekTool scripts I used. Just take these scripts and copy the lines you want into the command area of a Geeklet. Most of these were written by Mac Newbold. Enjoy!

CPU Usage

top -n1 -l1 | grep "Load Avg" | sed 's/.*usage: //; s/ user.*//;'
top -n1 -l1 | grep "Load Avg" | sed 's/.*user, //; s/ sys.*//;'
top -n1 -l1 | grep "Load Avg" | sed 's/.*sys, //; s/ idle.*//;'


Memory

top -n 1 -l 1 | grep PhysMem | sed 's/.* inactive, //; s/ used.*//;'
top -n 1 -l 1 | grep PhysMem | sed 's/.* used, //; s/ free.*//;'


Month

date +%B

Date

date +%d

Day

date +%A

Time

date +%I:%M

AM / PM

date +%p

Weather

curl --silent "http://xml.weather.yahoo.com/forecastrss?p=USUT0078&u=f" | grep -E '(Current Conditions:|F<BR)' | sed -e 's/Current Conditions://' -e 's/<br \/>//' -e 's/<b>//' -e 's/<\/b>//' -e 's/<BR \/>//' -e 's/<description>//' -e 's/<\/description>//'

Look for the ‘UT0078′ here and replace it with the city code you want to display. Get the city code by going to Yahoo Weather and searching for your city. Once found look in the url and you will see your city code at the end of the url.

Weather Image

Create a new Shell Geeklet and use this as the command:

curl --silent "http://weather.yahoo.com/forecast/USUT0078.html" | grep "forecast-icon" | sed "s/.*background\:url(\'\(.*\)\')\;\ _background.*/\1/" | xargs curl --silent -o /tmp/weather1.png\

Replace the city code with your city code. ( same steps to get city code as above )

Then create a new Image Geeklet and use this as the url:

file:///tmp/weather1.png

Not having a dock at all has taken some getting used to. I use Quicksilver for just about everything now. I do have a pull down docklike thing at the top middle in case I ever need it. Here is a list of tools I have used to create my new desktop.

CandyBar – Change all the folders icons and HD icons.
Magnifique – Change the folder and App nav areas to black
GeekTool – Add time, weather, and computer status to the desktop.

GeekTool was by far the most fun. You can do much more with it than what I have done here. If you come up with something good for you I’d love to see it.