LinkedIn
Copied!

Table of Contents

Adding CSS helper classes

Version:

Only available versions of this content are shown in the dropdown

If you need to define an additional helper class, you can add a Cascading Style Sheet (CSS) file to your application skin. You can define a helper class for a cell, a layout, or both. The helper class that you define is then available from the helper class picker on the Properties panel.

Review the existing, standard CSS helper classes to make sure that the additional helper class is necessary. For more information, see Reviewing standard CSS helper classes.
  1. Create the CSS helper class in a CSS file.

  2. For each helper class, add a comment before the CSS Selector:

    1. For the type, enter helper-class.

    2. Enter a name.

    3. Enter a category of layout or cell. If the helper class can be used for either category, enter layout,cell.

    4. Enter a description on a single line, as shown in the following example:

      /************** Type: Helper-class Name: text-primary Category: cell Description: primary styling for text **************/

  3. On the Included styles tab of the Skin form, attach the CSS file as an additional style sheet in your application skin. For more information, see Included styles.

  • CSShelper classes

    Rather than creating a new skin format, apply standard, predefined Cascading Style Sheet (CSS) helper classes to make a minor formatting change to a cell or dynamic layout. Using CSS helper classes saves development time, reduces maintenance by limiting the number of customized skin formats, and improves the consistency of the look and feel of you

  • Adjusting cell styling with helper classes

    Apply a Cascading Style Sheet (CSS) helper class to a cell to alter its default styling or behavior in a small way, without creating a new skin format. For example, use a helper class to center an element in a cell.

  • Adjusting layout styling by using CSS helper classes

    Apply a Cascading Style Sheet (CSS) helper class to a dynamic layout to alter the default styling or behavior in a small way, without creating a new skin format. For example, use a helper class to apply twice the standard margin to the right side of an item in the layout.

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.