Add Style iBloc

The Add Style iBloc enables the application of CSS3 styles to any iRise widget, such as shadows, gradients, 2-D and 3-D transformations, and animated transitions.

Current Version: 2.0
Supported iRise Studio Versions: 8.7 – 8.12
Supported Browsers: IE 9.0+, Firefox 3.5+, Safari 4.0+, Chrome 8.0+, iOS Safari, Android (default browser)
Works in iRise iPhone and iPad apps: Yes

What does it do?

  • Applies a set of styles definitions to any number if iRise page widgets.
  • Can be triggered on page load or by any event.
  • Any changes to style can be animated with transitions.

How do I use it?

  1. Drag the iBloc onto the canvas.
  2. Select the widget(s) to which you want to apply the style(s) using the ‘Target widgets’ property in the properties panel.
  3. Enter your style definitions in ‘CSS Properties’ in the properties panel, using standard CSS stylesheet format, without brackets. Here’s an example that applies a drop shadow to any section, image, or form widget (for the CSS that adds shadows to text, see the CSS3 Generator site):
-webkit-box-shadow: 3px 3px 4px 0px #333333; 
box-shadow: 3px 3px 4px 0px #333333;

You can connect any page widget to this action with any event, but in most cases you’ll want the Add Style effect applied on load. To do this, you have to create a ‘dummy’ action that is associated with the page’s onLoad event. Here’s how to do this, step-by-step:

  1. Select the Page (click on a blank area of the page or an empty part of the canvas).
  2. In the Properties Panel, select the Events tab.
  3. Under “Show events for:”, select “On load”.
  4. Under the Events panel, click “+ Add”, then select “Action”.
  5. In the Set Page Action window that pops up, just click “Done” (leave Show/Hide and Toggle visibility selected, with no widgets checked).
  6. Place an Add Style iBloc onto the canvas near the new Show/Hide Action that you just created (it will be near the right edge of the page).
  7. Drag the Show/Hide action created in step 5 onto the Add Style Action iBloc to connect them.

Tips & Tricks

  • Please note that not all CSS3 properties are supported by all browsers. Any version of IE before 9.0 supports very little. It is recommended that you test your styles on your audience’s browsers.
  • There are free CSS generators on the web that can generate lots of good effects. Here are two good ones:

Feel free to download this and any of our free iBlocs here, and please tell us what you think.

2 replies
  1. Patrick Neiler says:

    I am currently using iRise 8.11. How do I attach the AddStyle event to pageLoad rather than a click?

  2. Eric Romanik says:

    You’ll need to add another ‘dummy’ action to fire on page load (such as a show/hide with no widget selected), and connect that action to the Add Style iBloc. I’ve added step-by-step instructions on how to do this in the page above.