Community Branding: Design Guidelines & Matching Existing Website

[Dale John M.]

Your community branding package includes all of the HTML/CSS work needed to emulate an existing design. While most of our clients want branding that matches their primary website, you may want your community to have a slightly different design than any of your existing web properties. If that is the case your designer/design firm can provide a visual design (an image in photoshop for example) before the HTML/CSS is implemented.

This Learning Center entry is designed to provide the professional web designer with all of the specifics needed to create a community-specific visual design. NOTE: If you just want to know what GoLightly needs to emulate an existing web property, see: What GoLightly Needs to Start Website Development

Matching Your Existing Design

We start by looking at your existing website top header (the area across the top of your website that is consistent across all pages). Our goal in most cases is to make your GoLightly community top header match this, and we often include the top navigation options that exist on your website across the top of our community (not including drop-down menus).

Some existing website designs don't match the navigation scheme our community software uses. In these cases, we ask that your designer create treatment of your brand for the community, given the following constraints:

• GoLightly uses top navigation to allow people to navigate to major sections
• GoLightly uses left navigation within these major sections
• Your community can be configured to expand with a browser window, or use a fixed width. If fixed width, the minimum width supported is 850px.

Header Template

Header Elements

1. Main Header
   
   
   
   1. Background color
   
   
   2. Border color
   
   
   3. If you wish to use a background for your Main Header, please include image
   
   
   
   
2. Organization Logo
   
   
   
   1. Include your organization's image, ideally as vector art (specifically .PNG, .AI, or .PSD file formats)
   
   
   
   
3. Logged in User Info & Admin Links
   
   
   
   1. Background color (optional)
   
   
   2. Border color (optional)
   
   
   3. If you wish to use a background for your Logged in User Info & Admin Links element, please include image
   
   
   4. Text color
   
   
   5. Link text on, off, and at state colors
   
   
   
   
4. Oranization's existing top navigation
   
   
   
   1. Your organization's existing navigation can be included in the GoLightly Community if it conforms to a horizontal element size like the example pictured.
   
   
   2. If your community relies on left navigation as primary navigation, we suggest that the left-most Community Top navigation item (section 5 below) be called "<< Home" and have that take you back to your primary web site
   
   
   3. Please note: When your organization's existing top navigation is replicated, we do not replicate your drop-down navigation
   
   
   
   
5. Community Top Navigation Tabs
   
   
   
   1. Background color (optional)
   
   
   2. Border color (optional)
   
   
   3. Top nav on, off, and at state
   
   
   4. If you wish to use images for your tabs, please include images in desired on, off, and at states
   
   
   
   
6. Community Sub Navigation
   
   
   
   1. Background color (optional)
   
   
   2. Border color (optional)
   
   
   3. Sub Nav on, off, and at state
   
   

Header Template Examples

Click here to preview large version of this image.





Click here to preview large version of this image.

Left Navigation Elements

1. GoLightly Community Left Navigation
   
   
   
   1. GoLightly's left navigation elements are output here
   
   
   2. Style changes to the Left Navigation are not required
   
   
   3. Background color (optional)
   
   
   4. Border color(s) (optional)
   
   
   5. Left Navigation on, off, and at state
   
   
   6. If you wish to use a background for your Left Navigation, please include image
   
   

Left Navigation Example

Click here to preview large version of this image.

Footer Elements

1. Footer
   
   
   
   1. Background color
   
   
   2. Border color
   
   
   3. Text color
   
   
   4. Link on, off, and at state colors
   
   
   5. If you wish to use a background for your Footer, please include image
   
   

Footer Examples

Click here to preview large version of this image.


See also:

Community Branding Decisions (Header & Footer)

• What GoLightly Needs to Start Website Development
• ADVANCED: Modifying Footer HTML

Editing your Welcome Page

• Community Branding: Example Welcome Pages
• OPTIONAL: Using welcome_highlights_template
• OPTIONAL: Custom Welcome Page Templates

Editing your CSS or Community Logo

• ADVANCED: Changing Community CSS and Image Files
• ADVANCED: Changing Community Logo