Sample library.css file: Difference between revisions
Jump to navigation
Jump to search
m (New page: →* * Basic styles for ICDL library, accessible by old browsers like NN4 * Refer to with <link> clause in header so NN4 can see it * Author: Hilary Hutchinson *: /* styles for ...) |
(rv remove Category:Uncategorized (this was the only member) so it shows on special pages where it might get a real cat) |
||
| (23 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
Here is a sample <tt>library.css</tt> file a collection called <tt>Dictionary</tt>: |
|||
/** |
|||
* Basic styles for ICDL library, accessible by old browsers like NN4 |
|||
* Refer to with <link> clause in header so NN4 can see it |
|||
* Author: Hilary Hutchinson |
|||
**/ |
|||
<pre> |
|||
/* styles for main elements */ |
|||
/* Style sheet for "Dictionary" collection--------------- */ |
|||
| ⚫ | |||
font-family: "arial unicode ms", arial, helvetica, sans-serif; |
|||
margin: -10px 0px 0px -10px; |
|||
font-size: 100%} |
|||
.dictionary a.entry:hover { |
|||
TD,DIV,SPAN,P,A {font-family: "arial unicode ms", arial, helvetica, sans-serif} |
|||
| ⚫ | |||
FORM {padding:0; border:0; margin:0} |
|||
| ⚫ | |||
} |
|||
.dictionary .metadata > .title { |
|||
/* link styles */ |
|||
color: #DE801A; |
|||
} |
|||
A:visited {color: #555555} |
|||
A:hover {color: #000000} |
|||
A:active {color: #000000} |
|||
.dictionary a { |
|||
/* background colors for major elements */ |
|||
color: #DE801A; |
|||
| ⚫ | |||
.headercolor {background-color: #99BB77} |
|||
} |
|||
.whitecolor {background-color: #FFFFFF} |
|||
.dividercolor {background-color: #CC6611} |
|||
.lightorangecolor {background-color: #EEBB88} |
|||
.lightbrowncolor {background-color: #CC9966} |
|||
.loginjoinbox {background-color: #EEBB88; border-top: 5px solid #cc6611; padding: 5px; margin-top: 10px} |
|||
.simpleresultsbox {background-color: white} |
|||
.bookshelfbox {background-color: white; border-top: 5px solid #996633} |
|||
.registerAdultSection {border-top: 2px solid #99bb77; padding: 5px; font-weight: bold; font-size: 120%} |
|||
.dictionary a:hover { |
|||
/* layout for some major elements */ |
|||
text-decoration: underline; |
|||
.bookimg {text-align: center; white-space: nowrap} |
|||
} |
|||
.divider {height: 5px; font-size: 2%; width: 100%; text-align: center} |
|||
.maincontentleft {float: left; text-align: left; padding: 10px} |
|||
.maincontentright {float: right; text-align: right; padding: 10px} |
|||
.dictionary h1, .dictionary h2, .dictionary h3, .dictionary h4, .dictionary h5 { |
|||
/* styles for links with no underline or hilite */ |
|||
background: #F78F1E; |
|||
| ⚫ | |||
} |
|||
| ⚫ | |||
</pre> |
|||
A.nolinkdec:active {color:black; text-decoration: none;} |
|||
A.nolinkdec:visited {color:black; text-decoration: none;} |
|||
== Classes and Selectors == |
|||
A.nolinkdec:hover {color:black; text-decoration: none;} |
|||
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]]. |
|||
:''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. |
|||
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.