Learning Center

Managing Styles

This document has been written for designers and developers who are setting up an editable website for a customer. End-user documentation for the style manager is available in the Content Managers' section. View end-user style manager documentation. 

The style system in TypeRoom Professional is designed to allow developers and designers to give clients a pre-designed library they can re-use while creating content for the site. 

Using it has several benefits: 

  • It helps prevent visual inconsistencies when content is added by non-technical users.
  • It keeps the designer in control of the look-and-feel, even for newly created content.
  • It allows for styles to be easily updated over time since they are based on global CSS classes.

Creating Styles

To create a new style...

  1. Open the Style Pallet by clicking the "Format" link in the toolbar.
  2. Click on the "Open Style Manager" link at the bottom of the Style Pallet.
  3. On the style manager, click on the a "Create Style" button. This will open the style creator.
  4. Once you are here, there are two ways to create a style:

One way is to use the buttons and functions provided by TypeRoom Professional to create a new style. 

The other way is to enter the CSS directly for a style. To do this, click the blue "Show CSS" link just above the "Style Preview" box.

This will shorten the window and will allow you to just copy / paste or type in a CSS style directly.

Note that once a style is entered directly via CSS, editing it requires editing the CSS (in this same interface). The wizard-style layout will not show any more for this particular style.

Managing Styles

Styles can be edited and deleted through the Style Manager (available via the link at the bottom of the Style Palette).

If you place your mouse over any of the styles, you should see a pencil and trash can appear on the right which allows you to edit and delete.

Stylesheet and Style Manager Overlap

For simplicity sake, we recommend not having overlapping class names in your site's global stylesheet and the style manager. 

You can transfer the any client-usable styles out of the global stylesheet simply by copying and pasting them into the Style Creator in CSS mode.

If the same class exists in both the style manager and your stylesheet, the standard rules for CSS inheritance will apply (with the Style Manager's style's being inserted after the global stylesheet's styles). 

Powered by Olark