Creating and Using Styles

The Styles capability built into iRise is a very helpul and powerful tool that can be used when designing custom simulations. Styles are reusable formatting attributes that can be saved and applied to any page widget within your simulation. By default, iRise comes with several pre-defined styles such as ‘Heading 1’, ‘Heading 2’, ‘Footer’, etc. You can choose to use these styles in your simulation or create your own custom styles based off of existing widgets.

This tutorial covers both the application and creation of styles in iRise.

Watch a Video

Watch this video for a brief demonstration of the concepts covered in this tutorial.

Style inheritance

The concept of Styles relies heavily on the idea of inheritance. Manually applying formatting to a widget only applies those properties to that specific widget. On the other hand, applying a style to a widget applies every formattingStyle Inheritance example property in the style to that widget as well as all of its children. For example, if you had a style called ‘Header’ applied to a section called Section 1, every child widget (every widget inside Section 1) would then also inherit the properties of the ‘Header’ style and would remain that way until you changed them.

This concept is important to grasp because it allows the user to condense many different formatting properties for different types of widgets into one style. This decreases the overall amount of work necessary to create a high-fidelity simulation and also allows for formatting changes to be made easily at the style level rather than the individual widget level.

Importing a style

Although styles are unique to the project in which they were created or modified, they can be brought into other projects via the import capabilities of iRise Studio. If you import an element of a project from an iDoc or another project, iRise will bring along any styles that are associated with the elements that you import.

For instance, say you imported a styled portlet from an iDoc. Upon import, not only would you see the portlet appear in the project directory, but you would also see the style applied to that portlet show up in your Style Manager. You can now use that imported portlet style throughout your entire project.

Applying a style

To apply an existing style to the widget that is currently selected in your workspace, simply expand the Styles dropdown list in the Formatting Toolbar and select a style (note that by default, all widgets are set to the ‘Normal’ style unless you change them). Selecting a new style from the dropdown will automatically override any existing style that you have set on the widget.

Style menu

Keep in mind that if you have no widget selected in your workspace, the style will be applied to the entire page.

Creating a new style

There are three ways to create a new style:

We’ll cover the first two methods in this tutorial.

Design a new Style in the Style Editor

To open the Style Manager, click the icon to the left of the Styles dropdown:

Style toolbar

To create a new style, click the Add Style button in the Style Manager. Enter a name for your new style and click ‘OK’. With your new style selected, click the Edit button on the right side of the Style Manager.

The Style Editor is a tabbed version of the Formatting Panel. Here you can individually set properties for different types of widgets.

Once you’ve set all your properties you can click OK and use your newly created style throughout your simulation.

Create a style based off of a formatted widget

Save as new styleTo create a style off of an existing widget you will first have to format the widget to look the way you want. Once the widget has been formatted, right-click inside the widget and choose Save as New Style.

After entering a name for your new style and clicking OK, the Style Editor will open, allowing you to add new formatting properties to the style if you like.

Now you will be able to use your newly created style throughout your project.

Tip

If you wish to remove all styles from a widget AND all formatting, choose Format > Clear Formatting to remove all formatting attributes from the widget and return it back to a stock, Normal style.

Example: Applying styles

Now let’s try an example using some of the pre-defined styles that come with iRise Studio and applying them to a sample Portlet Section.

First, create a new section that is 400px wide and 200px high. Within that section, create two text widgets – one for the header and one for the content area. Input the text as you see in the image below.

Portlet no formatting

Apply a header style to the first Text widget by selecting the Text widget and then choosing the Heading 1 style from the Styles dropdown. The formatting attributes associated with the Heading 1 style will now be applied to the Text widget.

Now when you select your Portlet Header text widget, you will see Heading 1 in the Styles dropdown rather than the default Normal style. Note the small shaded triangle in the top left corner of the Font, Font Size and Font Color attributes – these indicate that the widget is inheriting its formatting from a style rather than being applied locally to that widget.

Inherited formatting attributes