Drupal's CMS will divide content from design by maintaining the look and feel through separate Cascading Style Sheet (CSS) files. This means that content authors and editors won't have to worry about the presentation of their pages and can focus on delivering appropriate content for their audience. However, we have prepared this page to present some common site conventions for you to bear in mind as you dig in and start using Drupal.
Exceptions to Header Treatment
Two exceptions have been granted to the way site titles may be displayed in the header of the new University template. These exceptions are for the Belk College of Business and The William States Lee College of Engineering.
When a new University branding initiative was launched in 2008, these colleges were the only two units with a slightly different font treatment for their logos. In order to allow their websites to continue to leverage this branding effort, they are allowed to use caps and italics in their header to be consistent with their marketing materials.
Currently, these are the only two exceptions allowed. For more information, please email the Marketing Department.
Horizontal navigation is an option for primary navigation.
Option 2 (With a “Give Now” Button)
Option 2 (Without “Give Now” Button)
Left navigation can be used as the primary navigation of a site or as the sub-navigation with a primary horizontal navigation.
The sidebars are used to pull out secondary content, such as related links, calls to action, promos, etc.
Sidebar (200 px) – Both left and right sidebars can be used to add static or dynamic content to your website. Sidebars may have special CSS styling while still adhering to approved colors, fonts, and treatments.
Each of these examples shows the different types of content allowed in the sidebar.
Sidebar Background Examples
Each of these examples shows the different options available using standard colors, background images, treatments, and styles. For more information, please see Appendix B.
Dynamic Content in Sidebar
The sidebar is often used to display dynamic content such as news or events, Twitter feeds, FAQs, login information or other types of long form copy and listings.
Graphic Elements in Sidebars
Promos and calls to action are the other types of sidebar items. These are not dynamic and may be full-color images. The left or right sidebar is a good place to add approved sub-brand or legacy logos, or established departmental graphics.
The body is where the main content of the site goes. The design of the center column should be determined based on the type of content that will be presented in this area.
We also recommend that all links should be written using lower case letters and should not include any spaces.
Note: documents being moved as part of migration will retain their file name formatting to minimize broken links. New documents uploaded after migration should comply with these standards. Units may retroactively make changes to legacy content as is appropriate.
Web Communications, in collaboration with other campus teams, has developed the following lexicon to standardize certain terms when used on University websites. Please bookmark this section as it will continue to evolve over time.
Links - Other Guidelines
The use of audio and video content is encouraged on UNC Charlotte websites; embed code from YouTube is supported and content from the University YouTube channel is preferred. Please contact Cindy Tribucher if you wish to have your video uploaded to the University’s YouTube channel. The use of auto-play audio and/or video is not allowed; content authors must also provide player buttons to allow users to pause or stop content from playing. QuickTime files can be used for Virtual Tours in lieu of YouTube.
Contact Us - Individual contacts should be listed on all departmental-level sites. In addition, all departmental-level sites should include a Contact Us form. This form should be located at http://example.uncc.edu/contact and must be accessible via the utilities links at the upper right of the page in the green header (just underneath the contex- tual home link). The following components should be included in the form:
All fields above, with the exception of “send a copy of this message to yourself”, should be required. Instructions for configuring the Contact Us form may be obtained by emailing email@example.com.
Files, Folders and Documents
A directory structure helps you organize similar content in common areas. It also allows you to enter keywords directly into your URL. This assists with search engine optimization and allows your site to be spidered and re-indexed by search engines.
Please contact Cindy Tribucher if you’d like additional tips and resources about setting up your directory structure.
Common Page Elements
All pages should include the following elements:
Many sites utilize a directory to display faculty, staff, students, interns, etc. There are various options when developing a directory for your website.
Directory Listing Page
Directory Detail Page
The directory detail page can be found by clicking on the name of the person from the directory listing page and will include full details about each directory entry. Entries on a directory detail page will have a full-size headshot photo displayed either on the left or right of the directory information.
UNC Charlotte supports the following options for sending email:
Which platform should I use?
Non-University supported email platforms include:
The UNC Charlotte website is set up on a 24 column grid with 30px wide columns and 10px wide gutters. All design element should be applied to this grid.
Background HEX Color: #00703C
Font: Times New Roman Font-size: 20px (1.25em) HEX Color: #FFFFFF (White)
Font: Times New Roman Italic Font-size: 11px (.7em)
HEX Color: #FFFFFF (White)
Font-size: 12px (.74em) HEX Color: #FFFFFF (White)
Cell Width: Divided equally among the 950px Font: Arial
Font-size: 10px (.63em)
HEX Color: #555
Rollover HEX Color: #00703C
Vertical Navigation Width: 200px
Font-size: 14px (.9em) HEX Color: #555
Rollover HEX Color: #00703C
Font-size: 14px (.9em) Font: Times New Roman; HEX Color: #000000
Body Paragraph Font-size: 12px (.75em) Font: Arial
HEX Color: #333
Narrow Sidebar Width: 200px Font: Arial
Font-size: 11px (.7em)
HEX Color: #555
Header HEX Color: #00703C