Weather icons CSS - SunbirdFrom MozillaZine Knowledge BasePreview: Sample Weather Icons:
/* 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)
*/
|
|
