MozillaZine

Weather icons CSS - Sunbird

From MozillaZine Knowledge Base

Preview: Image:Sunbird-0.9-multiweek-view-with-weather-icons.png

Sample Weather Icons:

  • Sunny, Clear: Image:Sun-11x11.png
  • Cloudy, Overcast: Image:Cloud-11x11.png
  • Partly Cloudy: Image:Cloudy-sun-11x11.png
  • Fog: Image:Fog-11x11.png
  • Chance of Rain: Image:Umbrella-closed-rain-11x11.png
  • Rain: Image:Umbrella-open-rain-11x11.png
  • Thunderstorm: Image:Umbrella-open-lightning-11x11.png
  • Hail, Ice pellets: Image:Hail-11x11.png
  • Freezing Rain: Image:Icicles-on-tree-11x11.png
  • Chance of Sleet: Image:Umbrella-closed-sleet-11x11.png
  • Sleet: Image:Umbrella-open-sleet-11x11.png
  • Chance of Snow: Image:Snowflakes-11x11.png
  • Snow Flurries: Image:Snowman-flurries-11x11.png
  • Snow: Image:Snowman-blizzard-11x11.png
/* 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)
 */