Fixing the weather widget

Do you use the weather widget in OS X? Have you turned on the display of the low temperatures? Do you find the font color for the lows nearly impossible to read against the purple background? Then this is for you.

Warning: this story describes how to modify the CSS file for the weather widget. This requires modifying system file permissions. It may be overwritten by subsequent updates from Apple and you need to be very careful not to make changes to the wrong files. In other words, proceed at your own risk.

I wanted to make the low temp reading easier to see. I succeeded and here’s how I did it. You will be prompted for your admin password several times during the process.

Open a terminal window and type these commands:
cd /Library/Widgets/Weather.wdgt
sudo chmod 666 Weather.css
cp Weather.css ~/Documents/oldWeather.css

Now open Weather.css in an editor. I used Coda which I use for most of my html and css editing. You can use textedit if you don’t have a css editor. To get to the file from Finder:

Open Finder
Click on “MacIntosh HD”
Click on “Library”
Click on “Widgets”
Control-Click on “Weather” and choose “Show Package Contents”
Control-Click on “Weather.css” and use “Open With” to select the editor you will use.

Find the “.low-day-color” and “.low-night-color” items and change the color values to something more readable. I just picked something brighter in Coda’s color picker. I ended up with the following:

.low-day-color {
color: rgba(203,238,255,1);
}

.low-night-color {
color: rgba(206,250,255,1);
}

Save the file to your Desktop and close the editor. (You can’t save to the Weather.wdgt folder directly).
You may need to use the “Duplicate” command on the “File” menu to do this in textedit. If so, be sure to save the file as “Weather.css”

Drag the modified Weather.css from the Desktop to the Weather.wdgt folder you have open in Finder. Choose to replace the existing file and authorize the copy.

Now let’s set the permissions back to where we found them. In Terminal, type the following:

sudo chmod 655 Weather.css

You either restart the system or use the – and + icons in the Widget screen to remove and re-add the Weather widget to see your changes. If you remove and re-add it remember that you’ll probably have to re-enable the display of low temps.

If everything looks good you can delete oldWeather.css from your Documents directory. If there are any problems you can backtrack and use similar commands to rename oldWeather.css to Weather.css and copy it back into the Weather widget’s folder.