Community
Builder 		About How it Works Features Communities Resources Login




Create Community Color Themes.

Did you know you can create many different color themes for your community and easily switch between them?
For all of these tasks you will first need to:
  1. Login to your Community Builder admin account.
  2. Click the (Themes and Color Maintenance) button.
Create a new color theme:
  1. Click the (New Color Theme) button.
  2. In the [Theme Name:] field enter a color theme name of your choice.
  3. Make a color selection from all of the drop down lists on the page.
    NOTE: The Start Date and End Date fields are NOT required and will be descrbed below.
  4. Click the (Create a New Theme) button.
  5. Your first set of selected colors is likely to need adjustment. To get an idea of what the current set of selected colors will look like applied as a color theme click the (Show Example of This Theme) button. This will open a page with several of the typical page elements with the selected theme colors applied. You can select a background image to get an even better idea of how your selected theme colors will look when applied to your community.
  6. To make color adjustments to your theme click the (Back to Theme Editor) button. Make your color selection changes to the different screen elements and click the (Save Theme) button.
  7. Click the (Show Example of This Theme) button again to determine if your new color selections work better. Repeat this process until you are happy with the set of selected colors of your theme.
  8. TIP: Don't spend too much time trying to perfect your color theme. You can always edit your theme colors and re-apply the theme very easily. As you gain experience working with Community Builder you will get a better sense of what colors work and which do not. You can also add other colors to your color palette using the (Add Additional Colors) button, which will add new color(s) to all of the drop down list selections on the create theme page.
  9. Once you are reasonably happy with your new color theme click the (Themes and Colors Admin Sub Panel) link at the bottom of the page to return to the main themes admin page.
  10. Click the (Apply a Color Theme) button.
  11. Check the box of one of the rows with the theme you wish to apply to your community.
  12. Click the (Apply the Checked Theme) button.
  13. TIP: You can change the color selections of a theme but this will NOT affect the color theme of your community until you actually apply or re-apply the edited theme.
Adjusting your community colors:
  1. NOTE: A color theme is nothing more than a stored list of colors for all of the HTML screen elements. A color theme will not change any page elements until it is applied! When a color theme is applied the stored list of colors are set in the database for all of the different HTML page elements. However, these can always be changed whenever you think change is necessary.
  2. There are several ways to change the colors of the HTML page elements.
    1. Apply a different color theme.
    2. Edit the color theme and re-apply it.
    3. Change the HTML element colors directly.
  3. Method 3 allows you to change the colors of the HTML page elements directly without editing or applying a color theme. This method is designed to let you tweak the colors of the different page elements in an iterative process to focus in on the best color theme. Once you are pleased with the color tweaks you can save the current HTML page element colors as a new theme.
  4. To change the color(s) of HTML page elements directly click the (Set Community Page Colors) button.
  5. Make your edits to any of the HTML elements using the drop down lists on the page.
  6. Click the (Save Member Site Colors) button. This will immediately change the colors of your community without the need to apply a color theme.
  7. If after viewing a few pages of your community and you approve of the new colors enter a Theme Name in the [New Theme Name] field.
  8. Click the (Save as New Theme) button.
  9. NOTE: You can make the same type of color edits for your Client Admin panel pages by using the (Set Client Account Page Colors) button. In fact the Client Admin pages do not have themes that can be applied to them and can only be adjusted directly.
Copying a color theme:
  1. If you want to create a set of color themes with subtle color differences you can use the (Copy a Color Theme) button. This It is a faster way to build a color theme that has the colors close to the colors you eventually want in the theme rather than building a new color theme from scratch.
  2. To copy a color theme use the following steps:
  3. From the main color themes admin page click the (Copy a Color Theme) button.
  4. In the [Theme Name:] field enter the new color theme name.
  5. Place a check mark next to the color theme you want to copy.
  6. Click the (Copy the Checked Theme) button.
    7. Click the [Themes and Colors Admin Sub Panel] link at the bottom of the page to get back to the main color themes admin page.
  7. Click the (Edit a Color Theme) button to open and edit the new copied color theme.
Switching color themes automatically for a specific date range:
  1. It is easy to setup your community to switch color themes for a specified date range automatically. As an example this useful if you want to change the color theme for a holiday such as Christmas or Halloween.
  2. To setup a color theme to be applied automatically during a specific date range use the following steps.
  3. NOTE: You should set one of your color themes as the default theme as this is the theme that the system will fall back to when the specified date range of a theme expires. You can set a theme as the default theme by simply opening the theme and checking the [Make This Your Default Theme:] box and clicking the (Save the Theme) button.
  4. From the main colors and themes admin panel click the (Edit a Color Theme) button.
  5. Click on the color theme row you want to be applied automatically over a specified date range. NOTE: This should NOT be your default theme as this is likely the theme already in use.
  6. In the [Start Date:] and [End Date:] fields enter valid dates. Make sure the start date is before the end date or you will get an error warning.
  7. Click the (Save the Theme) button.
  8. That's it! The theme with the start and end dates will be automatically applied during those dates and when the date range passes it will re-apply the default color theme.
  9. NOTE: You can have multiple color themes applied automatically for different date ranges as long as the date ranges do not overlap.