Sample library.css file

From OLPC
Revision as of 16:17, 17 July 2007 by Lauren (talk | contribs) (Classes and Selectors)
Jump to: navigation, search

Here is a sample library.css file a collection called Dictionary:

/* Style sheet for "Dictionary" collection--------------- */

.dictionary a.entry:hover {
	background: #F2DBA2;
	text-decoration: none;
}

.dictionary .metadata > .title {
	color: #DE801A;
}

.dictionary a {
	color: #DE801A;
	text-decoration: none;
}

.dictionary a:hover {
	text-decoration: underline;
}

.dictionary h1, .dictionary h2, .dictionary h3, .dictionary h4, .dictionary h5 {
	background: #F78F1E;
}

Classes and Selectors

The library.css file relies on a class that is specific to the collection. The name of the class-- in this case, dictionary-- should also be recorded in the class field of the library.info file.

In our dynamically-generated-everything future, you shouldn't have to include the class name in this file (provided that it's included in the library.info file instead). For now, though, you need to include it here, too.
.dictionary a.entry:hover 
a.entry:hover refers to the style of an entry in the collection as you mouse over it.
.dictionary .metadata > .title 
.metadata > .title refers to the style of the title of an entry in the collection.
.dictionary a 
a refers to the style of all linked text in the collection.
.dictionary a:hover 
<t>a:hover refers to the style of linked text as you mouse over it.
.dictionary h1, .dictionary h2, .dictionary h3, .dictionary h4, .dictionary h5 
h1,h2,h3,h4, and h5 refer to the style of various headers-- all the same formatting, but different sizes.