Changing Skins With Style Widgets

When you change a skin with Web Studio, you directly change the skin used by a particular section and its subtree. Adding a style widget to a template's Meta area, on the other hand, changes the skin associated with the template, thereby indirectly changing the skin of the sections that use the template. If you change the skin of the config.section template, then you will indirectly set the skin of all sections. If you change the skin of the config.section.sports template, then you will indirectly set the skin of the sports section, but not of the sports section's sub-sections. (However, if any of the sub-sections have empty Meta areas then they will inherit the sports section's Meta area in the usual way, and therefore also inherit the skin setting.)

You can also use a style widget to change the skin used for content items of a particular type by adding a style widget to a config.article.type template (say config.article.type.news).

You can include custom overrides in a style widget that will override CSS styles defined in the skin you select.

To add a style widget to a template, do as follows in Content Studio:

  1. Select File > New > Core Widgets > Style widget.

  2. Configure the widget by entering values in its property fields:

    Title

    Enter a name to identify the widget: Sports Style, for example.

    Skin name

    Select the name of the skin you want to use. Only default skins supplied with the Widget Framework can be selected using this field. Currently, escenic-times is the only default skin.

    Other custom skins may have been created at your installation and can be set using the Custom skin name field.

    Custom skin name

    If custom skins are available at your installation, then you can select one by entering its name here. A skin specified here will override any selection made in the Skin name field.

    Inline style

    If you are competent in CSS, you can enter a set of CSS styles here. The styles will override styles with corresponding names in the skin you have selected, allowing you to customize it.

  3. Click on Save.

  4. Locate the template to which you want to add the style widget, and double-click on it to open it in a section page editor.

  5. Locate the new style widget you have created, and drag it into the template's Meta area.

  6. Click on Save.

Copyright © 2010-2013 Escenic