Weather icons CSS - Sunbird
From MozillaZine Knowledge Base
Jump to navigationJump to search
Sample Weather Icons:
- Sunny, Clear:
- Cloudy, Overcast:
- Partly Cloudy:
- Fog:
- Chance of Rain:
- Rain:
- Thunderstorm:
- Hail, Ice pellets:
- Freezing Rain:
- Chance of Sleet:
- Sleet:
- Chance of Snow:
- Snow Flurries:
- Snow:
/* CalendarWeatherIcons.css * * If you subscribe to a weather forecast calendar, you might like to * see a weather icon on each day's forecast event. (One source of such * calendars is www.wunderground.com [8][9]; each forecast page includes an * [ICAL] icon with the weather forecast in iCalendar RFC2445 format.) * * To show weather icons based on the event titles in these calendars, * save this CSS in your profile [1] chrome directory, * and import this CSS in your userChrome.css [2] (references at end). * * For Sunbird, the userChrome.css path may be something like the following * w2k: %APPDATA%\Mozilla\Sunbird\Profiles\NNNNN.default\chrome\userChrome.css * gnu/linux: ~/.mozilla/sunbird/NNNNNN.default/chrome/userChrome.css * * 1. Save this file in your profile as chrome/CalendarWeatherIcons.css * 2. Download all sample images to the chrome/weather-icons/ subdirectory. * (popup menu, "Save Image As...") * 3. Add the following to profile file chrome/userChrome.css (create if none): * @import url("CalendarWeatherIcons.css"); * 4. Restart Sunbird. * * Now the weather icon should appear on the right side of each weather * forecast event. * * Tested on Sunbird 0.9 with iCalendars from www.wunderground.com. * * Limitations: * - This works for English forecasts where the title includes common weather * summary phrase words [7] such as "Clear", "Overcast", "Rain", "Snow", etc. * It will have to be modified if your forecast uses different wording. * - CSS2 can select either on the whole attribute, or on one or more * space-separated words in the attribute, but not substrings, so it may * not work if your language does not use spaces to separate words. This * code uses words since a forecast title usually contains additional info, * such as temperatures or words for likelyhood of precipitation. [4] * - This displays an icon based on the event title, so the weather icons * may appear in other events that happen to use weather forecast words * in their titles, such as "clear stage". * If this happens to you, consider changing the "CLEAR" line from * label[anonid="event-name"][value~="CLEAR"], * to * .calendar-event-box-container[calendar="weather"] * label[anonid="event-name"][value~="CLEAR"], * where "weather" is the name of your weather calendar. * The calendar name is not available on the event-name label, so the * ancestor .calendar-event-box-container condition must be added. * - CSS permits selectors to depend only on a node, its ancestor nodes, or * previous sibling nodes, so the event title text can only be used to * select the style (icon, size, color, etc.) of the leaf title box itself * (it has no visible siblings). CSS does not permit selectors to depend * on child/descendent nodes, nor on later sibling nodes in the tree, so it * is not possible to change the style of an enclosing event box depending * on a title label box it contains. [5] * - Parsing all the event titles for words on months with large numbers of * events may slow down redisplay a little (~10%?); it might also cause * additional garbage collection pauses (unverified). (Adding the calendar * condition does not prevent the parse on non-weather events because the * conditions are checked bottom up, from the leaves toward the root, so the * title value condition is checked before the calendar name condition. [6]) */ label[anonid="event-name"] { background-position: right top; background-repeat: no-repeat; } calendar-decorated-day-view calendar-header-container label[anonid="event-name"] { /* Leave room for icon to right of text in day view all-day events. (In other views, space is short and text is cropped, so don't reduce text, instead show icon under "...".) */ padding-right: 12px; /* 1px extra for spacing */ } label[anonid="event-name"][value~="CLEAR"], label[anonid="event-name"][value~="CLEARING"], label[anonid="event-name"][value~="SUNNY"] { background-image: url(weather-icons/Sun-11x11.png); } label[anonid="event-name"][value~="CLOUDY"], label[anonid="event-name"][value~="CLOUDS"], label[anonid="event-name"][value~="OVERCAST"], label[anonid="event-name"][value~="HAZE"]{ background-image: url(weather-icons/Cloud-11x11.png); } label[anonid="event-name"][value~="PARTLY"][value~="SUNNY"], label[anonid="event-name"][value~="PARTLY"][value~="CLOUDY"], label[anonid="event-name"][value~="SCATTERED"][value~="CLOUDS"] { background-image: url(weather-icons/Cloudy-sun-11x11.png); } label[anonid="event-name"][value~="FOG"], label[anonid="event-name"][value~="SMOKE"]{ background-image: url(weather-icons/Fog-11x11.png); } label[anonid="event-name"][value~="RAIN"] { background-image: url(weather-icons/Umbrella-open-rain-11x11.png); } label[anonid="event-name"][value~="LIGHT"][value~="RAIN"], label[anonid="event-name"][value~="CHANCE"][value~="RAIN"], label[anonid="event-name"][value~="DRIZZLE"], label[anonid="event-name"][value~="MIST"] { background-image: url(weather-icons/Umbrella-closed-rain-11x11.png); } label[anonid="event-name"][value~="THUNDERSTORM"], label[anonid="event-name"][value~="THUNDERSTORMS"] { background-image: url(weather-icons/Umbrella-open-lightning-11x11.png); } label[anonid="event-name"][value~="CHANCE"][value~="THUNDERSTORM"] { background-image: url(weather-icons/Umbrella-closed-lightning-11x11.png); } label[anonid="event-name"][value~="FREEZING"] { /* rain, mist, drizzle, fog */ background-image: url(weather-icons/Icicles-on-tree-11x11.png); } label[anonid="event-name"][value~="SLEET"], label[anonid="event-name"][value~="ICE"][value~="CRYSTALS"], label[anonid="event-name"][value~="WINTRY"] { background-image: url(weather-icons/Umbrella-open-sleet-11x11.png); } label[anonid="event-name"][value~="ICE"][value~="PELLETS"], label[anonid="event-name"][value~="HAIL"] { background-image: url(weather-icons/Hail-11x11.png); } label[anonid="event-name"][value~="CHANCE"][value~="SLEET"], label[anonid="event-name"][value~="CHANCE"][value~="ICE"], label[anonid="event-name"][value~="CHANCE"][value~="WINTRY"]{ background-image: url(weather-icons/Umbrella-closed-sleet-11x11.png); } label[anonid="event-name"][value~="SNOW"] { background-image: url(weather-icons/Snowman-blizzard-11x11.png); } label[anonid="event-name"][value~="SNOW"][value~="SHOWERS"], label[anonid="event-name"][value~="FLURRIES"] { background-image: url(weather-icons/Snowman-flurries-11x11.png); } label[anonid="event-name"][value~="CHANCE"][value~="SNOW"], label[anonid="event-name"][value~="CHANCE"][value~="FLURRIES"] { background-image: url(weather-icons/Snowflakes-11x11.png); } /* References: * * [1] Where is my profile folder? * (http://kb.mozillazine.org/Profile_folder#Where_is_my_profile_folder.3F) * [2] Customizing Mozilla: User CSS * (http://www.mozilla.org/unix/customizing.html) * [3] CSS 2: Colors and Backgrounds: The Background * (http://www.w3.org/TR/REC-CSS2/colors.html#q2) * [4] CSS 2: Selectors: Attribute Selectors * (http://www.w3.org/TR/CSS2/selector.html#attribute-selectors) * [5] CSS 2: Selectors: Descendent-, Child-, and Adjacent Sibling Selectors * (http://www.w3.org/TR/CSS2/selector.html#descendant-selectors) * [6] HTML and CSS: Layout Engine internals: CSS Selector Matching [talk] * (http://www.youtube.com/watch?v=a2_6bGNZ7bA @ 15:20-22:40, esp @18:00) * [7] Digital Weather Markup Language: Weather Summary Phrases [rule tables] * (http://www.weather.gov/mdl/XML/Design/MDL_XML_Design.htm#_Toc141760781) * [8] Weather Underground blog iCalendar feed announcement * (http://www.wunderground.com/blog/WunderYakuza/comment.html?entrynum=38) * [9] Weather Underground home page (http://www.wunderground.com/) * [scroll down, select region, then country or state, then city]. * This file is at (http://kb.mozillazine.org/Weather_icons_CSS_-_Sunbird) */