GoLightly

Default Community Branding: Design Guidelines & Matching Existing Website

  #1  
Old February 16th, 2009, 10:31 AM
Dale John M.'s Avatar
Dale John M. Dale John M. is offline
Administrator
 
Join Date: Oct 2006
Posts: 82
Dale John M. is on a distinguished road
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)
Editing your Welcome Page
Editing your CSS or Community Logo


Last edited by Dale John M.; August 11th, 2010 at 01:50 PM..
Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules

You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On

 

Powered by vBulletin® Version 3.8.1
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
version 2.31.25 :: gl-005-app.golightly.com
Desktop View
Dale John McGrewDale John McGrew, 1st GradeEva KonigsbergEva Konigsberg, 1st GradeJill TempletonJill Templeton, 1st GradeJoe EvansJoe EvansJohn TempletonJohn Templeton, 3rd GradeJulia VcherashnyJulia Vcherashny, BabySarah GolightlySarah Golightly, 4 years oldTristan NaramoreTristan Naramore