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?
- Drag the iBloc onto the canvas.
- Select the widget(s) to which you want to apply the style(s) using the ‘Target widgets’ property in the properties panel.
- 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:
- Select the Page (click on a blank area of the page or an empty part of the canvas).
- In the Properties Panel, select the Events tab.
- Under “Show events for:”, select “On load”.
- Under the Events panel, click “+ Add”, then select “Action”.
- In the Set Page Action window that pops up, just click “Done” (leave Show/Hide and Toggle visibility selected, with no widgets checked).
- 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).
- 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: