Web3 Wrapper System
CSS Documentation: Conditional Stylesheets
Conditional stylesheets are pulled into the Wrapper based upon choices the Unit makes in customizing Wrapper functionality. It is thus possible that your Unit employs all, some, or none of the below CSS files. In addition, the existance of these stylesheets mean that many stylesheet switches can occur for the Unit dynamically.
Note: 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.
uncg-screen-lqd.css
This stylesheet is activated if a Unit chooses a liquid (or fluid) layout over the default fixed width set in the core stylesheet. The default is to redraw the site to be 100% of the screen width, but by utilizing a local css file this attribute could become any relative or fixed value.
| Selector | Initial Values | Description |
|---|---|---|
| #uncgBody | {width:100%;} | Resets the default width of the Unit Web site to resize to fit 100% of the screen size |
uncg-screen-menu.css
When a Unit chooses to employ the Web3 left navigation menu, this stylesheet is implemented. As choosing the Web3 menu implies full buy-in to both the Web3 look and feel and the University Unit Web Site Requirements, this stylesheet turns on several other stylesheet switches in addition to the menu itself.
| Selector | Initial Values | Description |
|---|---|---|
| h1 | {border-bottom:1px dotted #ccc; padding:.35em;} | Applies several Web3 styles to the page header |
| #pagContent | {padding:.75em; font-size:.9em; color:#333; line-height:1.5; background:#fff;} | Sets default look-and-feel options within the Unit content area |
| #unitNav | {margin:0; padding:0; list-style:none; font:.7em normal “Arial”, “Helvetica”, sans-serif;} | Sets default look-and-feel options for the navigation menu as a whole |
| #unitNav li | {border-bottom:1px dotted #ccc; padding:.5em;font-weight:bold;} | Sets default look-and-feel options for each navigation menu line item |
| #unitNav a | {color:#036;} | Color options for all links, in all of their various states, within the navigation menu. |
| #unitNav a:hover, #unitNav a:active, #unitNav a:focus, #unitNav a | {color:#666; text-decoration:none;} | Color options for all links, in all of their various states, within the navigation menu. |
| #unitNav ol | {margin:0; padding:0;} | Sets default options for submenu items in the navigation menu |
| #unitNav ol li | {padding:0 2em; border-bottom:none; margin:0; background: url(“http://www.uncg.edu/global_uncg/images/goBtn.gif”) no-repeat; font-weight:normal;} | Sets default options for submenu line items in the navigation menu |
| #unitNavCrumb | {background:#ececea; color:#666; font-size:.75em; padding:.5em; text-decoration:none;} | Sets default options for the breadcrumb trail |
| #unitNavCrumb a:hover, #unitNavCrumb a:active, #unitNavCrumb a:focus | {color:#333; text-decoration:none;} | Changes link values based upon link state within the breadcrumb trail |
uncg-screen-sidebar.css
The Wrapper includes this stylesheet when a Unit chooses to display the sidebar, a content block that appears on right side of the page, directly underneath the Navy Blue Campus Links dropdown box. This area is by default lavendar with headings backed by clouds per the UNCG look and feel.
| Selector | Initial Values | Description |
|---|---|---|
| #pagStructure | {background-image:url(“http://www.uncg.edu/global_uncg/images/tileBEC0D6.gif”);} | Sets a background image on the sidebar. This image should be 180 pixels wide. |
| #pagSidebar h2 | {font-size:1.35em; color:#003366; text-align:center; border-top:1px dashed #ffffff; padding:.3em; padding-top:1em; margin:0 0 -.5em 1; background: url(“http://www.uncg.edu/global_uncg/images/sidebarBg.jpg”) no-repeat;} | Default header look and feel for the sidebar |
| #pagSidebar h2.first | {border-top-width:0;} | Removes the dashed border from the first header in the sidebar |
| #pagSidebar h2.first | {border-top-width:0;} | Removes the dashed border from the first header in the sidebar |
| #pagSidebar ul | {margin:0 0 1em 0; padding:0; list-style:none; font:.7em normal “Arial”, “Helvetica”, sans-serif;} | The page sidebar tends to be used for lists of links. This sets the default values for unordered lists in the sidebar |
| #pagSidebar li | {margin-bottom:.25em;} | Places a margin underneath each list item |
| #pagSidebar li a | {display:block; padding-left:15px;} | Makes all links within list items block-level elements, and places padding to the left in order to accept an arrow on activation (see below) |
| #pagSidebar li a:hover, #pagSidebar li a:active, #pagSidebar li a:focus | {background:url(“http://www.uncg.edu/global_uncg/images/arrow_blue.gif”) no-repeat; background-position:0% 50%; color:#003366; text-decoration:underline;} | Sets values upon link activation within list items |
| #pagSidebar p | {margin:1em; padding:0;font:.7em normal “Arial”, “Helvetica”, sans-serif;} | Adjusts paragraph styles within the sidebar |