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 what happens!
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. 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. Click it NOW and then read on...
This will save your changes to the theme file back onto the server.
This will not save any of your changes and exit the Theme Designer.
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. When you press 'Update Preview Pane', the current CSS settings from the left pane are used to style the Page in the right pane.The one to the left holds all the current Theme style settings and you can drill in and out of the folds to make changes to the Theme you are editing. Nothing is saved until you press 'Save' or 'Save New Copy'.
If the Theme name displays [ACTIVE] next to it, then you are editing the "live" theme that is displaying Pages to all your current site visitors. We recommend that you edit a copy of the active theme instead.
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 content. You can also tweak or completely override these style definitions with your own CSS if necessary.
Styled elements like submit buttons, calendars, form fields, search boxes, etc. are all created by the Theme Designer for you, based on your Primary and Secondary color selections, and other Sitewide selections.
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, but not with Microsoft Explorer. In IE, these features will be ignored so you can still use them, but be aware it is not supported by IE yet.
TIP: You should start with the top level folds and make changes there first and let them cascade down into lower folds since it is 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. Have fun!
If you know HTML / 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.
To view the CSS source that is being created each time 'Update Preview Pane', click on 'View Source'.
If you are going to create your own Theme, we recommend that you print out the View Source screen in the Style Designer and print the View Source of the Theme so you can compare them and quickly see how the two sources are married together. There are CSS classes and ids defined at every level in the HTML to hang your CSS code onto.
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.
IMPORTANT: Please don't open the Theme Designer in two browser windows at the same time or it can get confused and could save one Theme over the top of the other one!