Add Custom CSS
If you have experience styling sites with CSS, you'll enjoy this tool, which is simply a large text box.
Anything you type into it will be added to the end of your site design's CSS file, allowing you to customize any part of your design.
You can also add design elements. For example, you may want to have an image gallery on one of your pages. Style it here, so that if you decide to add another gallery, your styling work is already done.
Warning
Using this tool could cause unpredictable changes to your design. If you add CSS that causes problems (you'll see the changes immediately), simply refresh your browser window (do not click on the Save Style button in Site Designer).
This will revert your Site Design to the way it was before you added your CSS changes, and you can start over.
If you're ready to begin customizing your CSS, add whatever elements you want inside the text box.
If you like to have your CSS indented for easier reading, click on the Beautify button.
When you want to see how your changes look, click on the Add Custom CSS button. This will apply your customizations, close the overlay window, and display your changes in your design.
Note, however, that changes to portions of a page that are not part of your design template (e.g., the gallery mentioned above) will not display here. You will have to save the site design and view the relevant page to see your changes.
If you're happy with your design, click on the Save Style button.
If you're not finished with customizing, click on the Add Custom CSS button again.
If you're not happy with the results, or if you "broke" something in your design, refresh the Site Designer tool page without saving anything. This reverts you to the version of your site design just before you began customizing the CSS.
If you add a widget or other third-party tool, and it doesn't look quite right, you may need to adjust its CSS.
You can style individual containers (add to a page with Container Blocks) by adding CSS class names to Add Custom CSS. The class names must all be one word, which can be a single word (e.g., whitespace) or a hyphenated word (e.g., red-container, red-narrow-container).
If you do not add the styling here, the addition of the class names in the Container Block will not affect the containers the class names apply to.