Theme Designer

The Theme Designer allows you to style all elements and content areas created by the Style Designer. The Theme Designer contains thousands of options, and creates a single CSS file. It's impossible to fully document every field, and you'll learn the most by selecting different options and seeing how it affects your designs.

The Theme Designer has two panes. The one to the left holds all the current CSS settings and you can drill in and out of the folds to make changes to the Theme. Each fold represents areas and regions from within the Style Designer and the Page Style represented in the Preview pane to the right. The Pane to the right is the Preview Pane and displays any Page from your site that uses a System Page Style.

IMPORTANT: There is no UNDO once you 'Save' your Theme, so we recommend that you 'Save New Copy' to hold on to the original before you start playing around with your Themes.

Theme Name

If the Theme name displays [ACTIVE] next to it, then you are editing the "live" Theme that is currently being used to style all Pages using this Page Style to your current site visitors. We recommend that you edit a copy of the active Theme instead of editing the active Theme itself.

View Source

If you are a coder, or just interested in looking at the CSS generated by the Theme Designer, you can click 'View Source' and see exactly what code the Theme Designer is using to display the Page in the Preview Pane at the moment.

Preview Page

The 'Preview Page' displays the current Page being displayed in the Preview Pane. When you press 'Update Preview Pane', the current CSS settings from the left pane are used to style the Page in the right pane. Your Theme is not saved at this point. The pane to the left holds all the current Theme style settings within "folds", making it easy to drill up and down within the folds to make changes to the Theme you are editing. Nothing is saved until you press 'Save' or 'Save New Copy'.

If you want to preview another Page, you will need to save your Theme (if you want to keep any changes) and navigate to another Page you wish to preview and enter the Theme Designer again from that Page's Theme Preview Mode. Remember, Themes style Page Styles, NOT Pages.

Page Style

The 'Page Style' displays the current Page Style being styled to display the Page in the Preview Pane. If you want to preview another Page Style, you will need to save your Theme (if you want to keep any changes) and navigate to another Page that uses the Page Style you wish to preview and enter the Theme Designer again from that Page's Theme Preview Mode.

NOTE: If you are a CSS coder, you will also see the CSS class names for the Page Style are listed for reference in case you want to make CSS changes that affect the Page Style or similar Page Styles.

Folds

'Folds' refer to the accordion menus found in the left pane of the Theme Designer. Folds can contain folds, and styling changes in the parent folds will be inherited by children folds. For this reason, we recommend that you start with the Site Wide Settings and preview your changes as you go to understand how your changes affect the styling created by the Theme. So for example, if you set the font size in the Site Wide fold, there is no need to set the font size in any other fold, unless you want to override the font size for that specific fold. Less is always more when it comes to editing Themes.

The top most folds are always present in the Theme Designer (Site Wide, Site Border or Mobile Border, Site Top, Site Header, etc.). These fold correspond to the areas within the Style Designer. The Style Designer sets up the layout and the content, and the Theme Designer styles it.

TIP: You can see what area the fold options affect by hovering your mouse over the fold to highlight the area of the Preview Page that is affected by the fold's options.

Site Wide

This is the most important fold. It contains the most dramatic styling changes that you will most likely want to change first. Peek inside the 'General' fold within this fold. It is the fold where you can set your Primary and Secondary Colors that will affect all of your Custom Formats. If you are a CSS coder, you will access this fold the most if you are adding your own CSS styling.

Pre Styling

If you know CSS and you want to include your own custom font files and include other CSS files, these elements typically must be at the top of your CSS Theme file to function correctly. This is also where you will find default CSS styling for all Themes that provide a baseline for cross-browser compatibility of your Themes. To access Pre Styling, under the top fold Site Wide > General, click on the "CSS" logo next to Pre Styling.

Primary & Secondary Colors

The most important aspect of the Theme Designer is the concept of Primary and Secondary colors. This concept is similar to a school's colors, the 2-tone paint job on a car, or the colors that make up your organization's logo or brand. By giving you access to set these within your Theme at a top level, all styling (like buttons, etc.) can be created automatically, based on these colors, maintaining design consistency across the entire website. You can set your Primary and Secondary colors in the Site Wide > General fold.

Based on the Primary and Secondary Colors and font styles, the Theme Designer will automatically output a few dozen content formatting selections that are available within the Rich-text Editor for your Content Managers to use to style their content. We call these "Custom Formats" and you can also tweak or completely override these style definitions with your own CSS using the Advanced Styling area.

Advanced Styling

If you know CSS, you can override any styling that is created by the Theme Designer by adding the appropriate CSS elements and inheritance to the Advanced Styling. To access Advanced Styling, under the top fold Site Wide > General, click on the "CSS" logo next to Advanced Styling.

Site Border

The Site Border defines the area outside all your content areas out to the edges of the desktop browser screen that is displaying the Page. For most websites, you typically want this to be centered and a fixed width. However, setting it to "100%" will float all the content from screen edge to screen edge when displaying the Page. The Site Border is present in Desktop Mode and replaced by the Mobile Border whenever the Page is viewed in Mobile Mode. This allows you to define a Desktop width for Pages and a Mobile width for your Pages, all within the same Theme, if desired.

Mobile Border

The Mobile Border defines the area outside all your content areas out to the edges of the mobile browser screen that is displaying the Page. For most websites, you typically want this to be "100%" so your page content will float from screen edge to screen edge and fill up the small mobile phone screen when displaying the Page. The Mobile Border is present in Mobile Mode and replaced by the Site Border whenever the Page is viewed in Desktop Mode. This allows you to define a Desktop width for Pages and a Mobile width for your Pages, all within the same Theme, if desired.

Other Folds

The remaining children folds will be "pulled into" the Theme Designer by the Page Style itself. For example, you might have placed a Common Region into a specific row and column in the Page Style using the Style Designer, so a fold for that row and column will be displayed in the Theme Designer along with a label (which will be the Common Region's name for identification purposes). Now, understand that you are not actually styling the Common Region itself, by it's location within the Page Style (e.g. row and column). So, for example, if you move the Common Region to another location within it's Page Style, any Theme styling you may have added will NOT follow it.

TIP: You should start with the top level folds and make changes there first and let them cascade down into lower folds since folds are designed to inherit from parent folds. Keep in mind, you are styling the System Page Style specified in the left pane and it's content regions, not the actual Page being previewed.

Saving Themes

Themes are not saved back to the web server until your either select 'Save' or 'Save New Copy'. If you don't want to keep your changes, you can click 'Cancel' and your Theme will remain unchanged.

Save

This will save your changes to the theme file back onto the server.

Save New Copy

We recommend that you start with Site Wide Settings and Preview your changes as you go to understand how your changes affect the styling of your Pages.

Cancel

This will not save any of your changes and exit the Theme Designer.

Adding your own CSS

If you need to override any Custom Formats, or add other CSS that is not available within any of the folds, you can add it easily to the Pre Styling Area (CSS to run before the theme's own CSS) and to the Advanced Styling area (CSS to override the theme's CSS). For the most part, you will typically add your CSS to the Advanced Styling area.

You'll notice that the Page Style has a few CSS classes displayed beneath the Page Style's name (e.g. .one_column), and each fold has an equivalent CSS ID value (e.g. #site_header), and each content row and column has it's own CSS class (e.g. .r1c1). These values can be used in conjunction to add any CSS to your Themes. For example, if you want to style the first row and column in the Site Header or all One Column Page Styles using CSS, you would add this to the Advanced Styling area:

.one_column #site_header .r1c1 {css code here}

We recommend you open a code viewer like Firebug plug-in for the Firefox browser and make changes to the Preview Page's CSS using Firebug. When satisfied with the style changes, find the corresponding fold on the left pane to make your changes, and then and click 'Update Preview' to verify your changes. Repeating this process you will quickly learn how to style your own Themes.

NOTE: The Theme Designer allows you to create rounded corners and shadowing without images, but this is a CSS3 feature that works with Mozilla (Firefox) browsers, Chrome, Safari, Mobile Safari, Android, and IE9. Before IE9, these features will be ignored but you can still use them.

NOTE: The Theme Designer can only preview Pages that use System Page Styles. If you attempt to launch the Theme Designer and preview a Page that uses a Custom Page Style, the Theme Designer will instead preview the first Page it finds in the database that uses a System Page Style.

WARNING: The Theme Designer runs in the memory of your browser, so do not open the Theme Designer in two browser tabs (or windows) at the same time or the system can get confused and save one Theme over the top of the other one! You can open it in two different browsers, but be careful to only save the theme in one of the browsers.

WARNING: There is no UNDO once you 'Save' your Theme, so we recommend that you 'Save New Copy' to hold on to the original before you start playing around with your Themes.