Formatting Page Content

Formatting in iRise is a powerful way to increase the visual impact of a simulation. It allows you to build simulations that actually look like “the real thing” in no time at all. Formatting, in this context, includes any visual manipulation of a widget’s properties to achieve a specific look. This includes setting text colors, background colors, borders, rounded corners, etc. Essentially anything that will make the widget look, but not behave, differently, we will consider formatting.

Watch a video

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

Formatting controls in iRise Studio

The formatting controls in iRise are accessed in two places: the Formatting Toolbar and the Formatting Panel.

Formatting Toolbar

The Formatting Toolbar in iRise Studio

Note: Unlike standard widgets, formatting is applied to iBlocs in the Properties panel.

The Formatting Toolbar

The Formatting Toolbar allows you to format your Text widgets (font, font size, font color, bold/italic/underline) as well as setting the background color of widgets, pages, templates or masters.

When you see a small grey triangle in the top left corner of an attribute in the Formatting Toolbar, this means that the attribute is being inherited from a style. You can override the style by applying local formatting to the selected content – local changes always override styles.

The Formatting Panel

Formatting Panel

The formatting panel allows you access to all of the editable formatting properties of a widget, page, template or master.

Tip

A desktop utility such as Pixie can be a useful formatting tool, making it possible to extract a color’s hex code from a web page so you can paste it directly into the color chooser when modifying any color settings in iRise.

Example: Formatting a portlet

In this example, we are going to recreate the portlet below, which will give us an opportunity to use most of the formatting options in iRise.

Portlet with formatting

First, create a new section that is 300 pixels wide x 150 pixels high.Add three Text widgets inside that section:

Portlet unformatted

Now that we have all of our widgets laid out, it is time to add formatting. Using the Formatting Toolbar, set all three text widgets to have a font type of Arial (you can change more than one widget’s formatting by holding down the Ctrl key while you select multiple widgets). Then set the font size of the first text widget (Get Started) to 16pt and the other two widgets to 12pt.

Color chooserOur final font formatting will involve setting the font color of these three widgets. You will use hex codes to specify colors instead of the color swatches in the color chooser. This gives you more control over color selections, and also allows you to extract color information from an existing web page using a tool like Pixie (see note above).

Using the Formatting Toolbar, set the color of the first text widget to #56912b (you can copy and paste this value into iRise Studio if you want) and make the font Bold. Set the color of the second Text widget to #808080.

The third widget has text that is two different colors, so we’ll need to apply the colors to text spans within the widget instead of the entire widget.

First, set the Text widget to have the same color as the second text widget (you can do this easily by using the ‘Recent’ section of the color chooser).

Now set the color of only the words, leaving the color of the dividers unchanged. To make the text editable, double-click the Text widget. Now you can highlight specific text within the widget with your mouse or keyboard the same way you would in a regular text editor. When a word is highlighted, apply the same green that we used earlier for the header using the ‘Recent’ section of the color chooser. Repeat this for all three words in the third text widget.

Your portlet should now look like this:

Portlet partially formatted

Finally, we need to format the background of the portlet. Since most of the changes we make here will require that we use the Formatting Panel, open the panel now by clicking the icon on the far right of the Formatting Toolbar.

First, with the section selected, set the background color to #d1ecbd.

Locate the Borders section of the Formatting Panel and set the borders of the section to have these properties:

Border settings

Corner radius settingsFinally, set rounded corners on the section by clicking the black arrow to show the corner radius for each corner and setting each corner to have a radius of 5 except the top right corner, which will have a radius of 25.

Congratulations! You’ve successfully formatted your portlet to match the styling in the image below.

Portlet with formatting