Sample library.css file: Difference between revisions

From OLPC
Jump to navigation Jump to search
mNo edit summary
(rv remove Category:Uncategorized (this was the only member) so it shows on special pages where it might get a real cat)
 
(20 intermediate revisions by 3 users not shown)
Line 1: Line 1:
Here is the default library.css file:
Here is a sample <tt>library.css</tt> file a collection called <tt>Dictionary</tt>:


<pre>
body {
/* Style sheet for "Dictionary" collection--------------- */
background: #fff;
font-family: "DejaVu Sans", sans-serif;
margin: 0;
}
h1, h2, h3, h4, h5 {
display: block;
color: white;
font-weight: normal;
padding: 5pt 5pt 6pt 10pt;
margin-top: 0;
margin-bottom: 0;
border-bottom: 1px solid gray;
}
/*Books and Reference-------------------------------------------------------*/
.books a.entry:hover {
background: #F2DBA2;
text-decoration: none;
}
.books .metadata > .title {
color: #DE801A;
}
.books a {
color: #DE801A;
text-decoration: none;
}
.books a:hover {
text-decoration: underline;
}
.books h1, .books h2, .books h3, .books h4, .books h5 {
background: #F78F1E;
}
/*Sience and Math-----------------------------------------------------------*/
.science a.entry:hover {
background: #C0EF92;
text-decoration: none;
}
.science .metadata > .title {
color: #569736;
}
.science a {
color: #569736;
text-decoration: none;
}
.science a:hover {
text-decoration: underline;
}
.science h1, .science h2, .science h3, .science h4, .science h5 {
background: #6EBE46;
}
/*Images and Maps-----------------------------------------------------------*/
.images a.entry:hover {
background: #CAE1E8;
text-decoration: none;
}
.images .metadata > .title {
color: #0092CF;
}
.images a {
color: #0092CF;
text-decoration: none;
}
.images a:hover {
text-decoration: underline;
}

.images h1, .images h2, .images h3, .images h4, .images h5 {
background: #0092CF;
}

/*Music and Video-----------------------------------------------------------*/

.music a.entry:hover {
background: #F4BED2;
text-decoration: none;
}

.music .metadata > .title {
color: #E20177;
}

.music a {
color: #E20177;
text-decoration: none;
}

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

.music h1, .music h2, .music h3, .music h4, .music h5 {
background: #E20177;
}

/*Activities and Games------------------------------------------------------*/

.activities a.entry:hover {
background: #DDBADD;
text-decoration: none;
}

.activities .metadata > .title {
color: #670065;
}
.activities a {
color: #670065;
text-decoration: none;
}

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

.activities h1, .activities h2, .activities h3, .activities h4, .activities h5 {
background: #670065;
}
/*Web Links-----------------------------------------------------------------*/
.links a.entry:hover {
background: #F2C8B3;
text-decoration: none;
}

.links .metadata > .title {
color: #D03000;
}

.links a {
color: #D03000;
text-decoration: none;
}

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

.links h1, .links h2, .links h3, .links h4, .links h5 {
background: #D03000;
}

/*Uniwiki-------------------------------------------------------------------*/


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


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


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


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


.uniwiki h1, .uniwiki h2, .uniwiki h3, .uniwiki h4, .uniwiki h5 {
.dictionary h1, .dictionary h2, .dictionary h3, .dictionary h4, .dictionary h5 {
background: #F78F1E;
background: #F78F1E;
}
}
</pre>

== Classes and Selectors ==


The <tt>library.css</tt> file relies on a class that is specific to the collection. The name of the class-- in this case, <tt>dictionary</tt>-- should also be recorded in the <tt>class</tt> field of the [[Sample_library.info_file|library.info file]].
/*Color Chart-----------------------------------------------------------------


:''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.
subject primary secondary tertiary
books #F78F1E #F2DBA2 #DE801A
science #6EBE46 #C0EF92 #569736
images #0092CF #CAE1E8 #000000
music #E20177 #F4BED2 #000000
activities #670065 #DDBADD #000000
links #D03000 #F2C8B3 #000000
uniwiki #F78F1E #F2DBA2 #000000


See [[library.css]] for a description of classes and selectors.
*/

Latest revision as of 04:16, 20 March 2008

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.

See library.css for a description of classes and selectors.