Web3 Wrapper System

  1. About the Wrapper
  2. Get Started
  3. Unit Customization
  4. Page Customization
  5. Content Components
  6. Presentation/Style
    1. Tagline
  7. CSS Documentation
  8. User Support
  9. Units Implemented

Custom Style: Tagline

The wrapper system allows the web developer to include customized stylistic preferences on all pages of a unit or on individual pages of a unit.

The Tagline image is a presentational preference of the wrapper system. By default, an image containing the UNCG Tagline, "Inspire.Change." is placed in the background of the block containing the University Logo: uncgLogo. The CSS to do this so is located in the UNCG GLOBAL stylistic Preference files:

#uncgLogo {
   margin:0;
   background:#ffffff url("http://www.uncg.edu/global_uncg/images/inspire_change.gif") no-repeat 100%;
   height:55px;
   width:100%;
   padding:0;
   border-bottom-width:1px solid;
   border-right:solid #fff 1px;
}
http://www.uncg.edu/global_uncg/style/uncg-screen.css

To override (or cascade over) this preference, a unit may create a CSS command dictating its own preference:

#uncgLogo {
   background:#ffffff url("PATH TO YOUR IMAGE") no-repeat 100%;
}
unit-screen.css

Place the file in your unit's inc_unit/style/ directory.

Be sure to modify your unit's HTML header file to incorporate the stylesheet:

<!-- UNIT STYLESHEETS -->
<link rel="stylesheet" type="text/css" media="screen" href="PATH TO UNIT SCREEN STYLESHEET" />
<link rel="stylesheet" type="text/css" media="print" href="PATH TO UNIT PRINT STYLESHEET" />
unit_header.html

Learn more about Implementing Custom Unit HTML Head

Learn more about Implementing Custom Page HTML Head

Case Scenario

The Office for Left-handed Students

Having decided to not utilize the default values for the Tagline, and properly understanding the Web3 Unit Requirement's restrictions, the Office for Left-hand Students creates a custom Tagline across their unit:

#uncgLogo {
   background:#ffffff url("/olh/images/students.gif") no-repeat 100%;
}
/olh/inc_unit/style/olh-screen.css

And Implements a reference to their unit stylesheet in Unit's HTML Head:

<meta name="author" content="Lew Leftward, OLH, UNCG" />
<link rel="shortcut icon" href="http://www.uncg.edu/favicon.ico" />
<!-- UNIT STYLESHEETS -->
<link rel="stylesheet" type="text/css" media="screen"
      href="http://www.uncg.edu/olh/inc_unit/style/olh-screen.css" />
<link rel="stylesheet" type="text/css" media="print"
      href="http://www.uncg.edu/olh/inc_unit/style/olh-print.css" />
/olh/inc_unit/unit_header.html

The Office for Left-handed Students implements the UNIT_ADMIN variable in its unit_variables.html page and designates the file via it's path as the value of the variable.

<!--#set var="DEPT_NAME"      value="Office for Left-Handed Students" -->
<!--#set var="DEPT_ADDRESS"   value="EUC Suite 101" -->
<!--#set var="DEPT_PHONE"     value="336.344.LEFT" -->
<!--#set var="DEPT_FAX"       value="336.344.1111" -->
<!--#set var="DEPT_EMAIL"     value="lefty@uncg.edu" -->
<!--#set var="UNIT_NAME"      value="Left-Handed Students" -->
<!--#set var="UNIT_URL"       value="htp://www.uncg.edu/olh/" -->

<!--#set var="UNIT_HEADER"   value="/olh/inc_unit/unit_header.html" -->
/olh/inc_unit/unit_variables.html
unit tagline example
 

Page updated: 10-May-2005

Accessibility Policy

Web Oversight Committee/Web3 Group
The University of North Carolina at Greensboro
Greensboro, NC 27402-6170