Web3 Wrapper System
CSS Documentation: Required Stylesheets
There are three stylesheets included in every implementation of the Wrapper. These each provide all of the necessary minimal functionality to run the Wrapper system in different media or environments. Each stylesheet may be overridden in part or whole at the Unit level through the implementation of a local CSS file. Included here are those selectors within each stylesheet that may be safely manipulated by individual Units without breaking their Wrapper implementation.
uncg-screen.css
uncg-screen.css drives the core functionality of the Wrapper as a whole. In addition to maintaining the look and feel of the system on computer monitors, uncg-screen.css also provides the base functionality for the system across all environments and media, with subsequent stylesheets overriding the core one on a case-by-case basis.
As there are many selectors within each stylesheet that should not be overridden, only those selectors or selector values which may be safely changed are included.
| Selector | Initial Values | Description |
|---|---|---|
| a:link | {color:#069;} | Sets the default color values for all unvisited links |
| a:visited | {color:#036;} | Sets the default color values for all visited links |
| a:hover, a:active, a:focus | {color:#999;} | Sets the default color values for various link states: hover (mouse), active (on click), and focus (tab focus, selection, etc.) |
| code, kbd | {font:1.25em “Courier New”, monospace;} | Creates relative font options for code and keyboard input text |
| h1 | {color:#036; font:1.8em normal “Book Antiqua”, “Times New Roman”, serif; margin:0;} | Site header look and feel. |
| h2, h3 | {color:#036; font:1.8em normal “Book Antiqua”, “Times New Roman”, serif; margin:0;} | Default settings for page (h2) and second tier (h3) headings |
| h2 + p, h3 + p, h4 + p, h5 + p, li > p | {margin-top:0;} | Overrides header settings based upon their use with various other elements |
| q | {font-style:italic;} | Makes all inline quotations italic. This is used in order to address a stylesheet bug in Internet Explorer. |
| .b | {font-weight:bold;} | Makes non-emphasised text bold. |
| .center | {text-align:center;} | Aligns text centered. |
| .exitUNCG | {background: transparent url(“http://www.uncg.edu/global_uncg/images/externallink.png”) no-repeat 100% 50%; padding-right:15px;} | Sets a background image to the right of links to denote them as external to the UNCG domain. |
| .i | {font-style:italic;} | Renders non-emphasised text italic. |
| .left | {float:left; margin:.5em;} | Aligns elements such as images to the left of the text flow and sets spacing. |
| .right | {float:right; margin:.5em;} | Aligns elements such as images to the right of the text flow and sets spacing. |
| .u | {text-decoration:underline;} | Underlines selected text. |
| #pagContent | {margin:0px;padding:5px 10px;font-size:.8em;} | Options for the content area of the Unit document |
| #uncgAdmin | {text-align:right; float:right;width:50%;} | Options to style the Unit admin area of the page footer |
| #uncgFooter | {font-size:.65em; background-color:#fff; border-top:1px dotted #ccc;} | Options to style the page footer |
| #uncgFooter p | {padding:0 .5em; color:#999; margin:0; text-align:right;} | Options to style paragraphs within the page footer |
| #uncgFooter address | {color:#036; padding:.25em; font-style:normal; line-height:1.5em; margin-left:10px;} | Options to style the Unit address in the page footer |
| #uncgLogo | {background-image: url(“http://www.uncg.edu/global_uncg/images/inspire_change.gif”);} | Sets the background image in your Unit page header. The default is the Inspire. Change.tagline |
uncg-print.css
The uncg-print.css file delivers default settings for the printing of web pages within the Wrapper system. Note that only Selectors whose values change from the defaults within uncg-screen.css are included in the print stylesheet.
| Selector | Initial Values | Description |
|---|---|---|
| #uncgAccessNav, #uncgNav, #uncgSubNav, #unitNav, #unitNavCrumb, #pagSidebar, #unitAdmin | {display:none;visibility;hidden;} | Hides all of these Wrapper elements from printing |
| h1, #pagContent, #uncgFooter | {margin-left:.5in;} | Adjusts placement of these Selectors based upon printer-friendly needs and loss of other elements |
| li | {margin-bottom:.1in; page-break-inside:avoid;} | Disallows page breaks within list items |
| a:link, a:hover, a:active, a:focus, a:visited | {color:#000; text-decoration:none;} | Forces hyperlinks to take on the attributes of non-linked text |
| a:link:after, a:visited:after | {content: “ (“ attr(href) ”) ”; font-size: 90%;} | Shows the appropriate hyperlink after the link element in parenthesis |
| #uncgLogo a:link:after, #uncgLogo a:visited:after | {content: “”;} | Removes above parens from UNCG logo |
uncg-handheld.css
Currently this is a blank stylesheet, and will be employed in the future application of the wrapper in small and alternate screen environments such as via PDA or cellphone.