iRise color harmony that anyone can use.
There is a little known feature in iRise that enables you to import a Cascading Style Sheet (CSS) and instantly update all elements across all pages to perfect color harmony.
NOTE: Click the “Change Quality” button on the YouTube player and change to 720HD
Below, you will find five CSS stylesheet color palettes that can easily be imported into iRise. This will benefit iRise users that are starting a new simulation or customizing an existing one.
| Color Palette Names | Links to CSS | Palettes |
|---|---|---|
| Active | Style Sheet Link |  |
| California | Style Sheet Link |  |
| Corporate | Style Sheet Link |  |
| Prosys | Style Sheet Link |  |
| Vintage America | Style Sheet Link |  |
There are 15 customized style elements in each stylesheet (basic HTML elements like h1, h2, borders etc…) that will appear in the dropdown in iRise when imported. We can also create an unlimited number of these elements for quicker, high-fidelity setups.
How to use the easy color palette feature
To import a CSS file:
- Either choose File > Import > Styles from CSS… from the Main Menu or click the Import CSS button in the Style Manager.
- Select the CSS file to import. It is recommended that you inspect the file before import to double-check its compatibility with iRise (see Rules for Styles and Attributes below).
- The Import Confirmation dialog displays the number of styles found in the file and indicates if any names match existing style names. Click Import to add the styles to your project.
Replacement Options
Clicking Replacement Options in the Import Confirmation dialog allows you to control which styles are imported and if they replace existing styles.
Replace
Exchanges an existing style with one being imported. Select the existing style in the destination column. The name of the existing style is maintained.
New Style
Creates a new style from the one being imported. You can modify the name in the destination column.
Delete
Excludes the style from being imported.
In the example below, the user has specified that the footer style defined in the style sheet should replace the Footer Style currently defined in the project.
Link pseudo-classes (:link, :hover, :active, :visited) must be written as .mystyle:link in order for iRise to recognize them correctly. The four pseudo-classes will be organized into a single style, based on the class name. In the case above, the style would be called mystyle.
Note: Menu styles and Form styles cannot be defined by importing a style sheet they must be defined in Studio.
Attributes and Some Limitations
Most CSS attributes can be used in iRise. Out of these attributes, some are editable and WYSIWYG in Studio. Others are only visible in the Reader, when the simulation is launched. Simulation-only attributes appear in the Other Attributes section of the Style Editor. Outside of the supported set of attributes, some attributes overlap with the way simulations are built. For instance, in iRise, positioning is set via drag-drop, so position attributes are deleted on import. Attributes deleted on import include:
ruby-align
ruby-overhang
ruby-position
min-height
word-wrap
clear
float
table-layout
bottom
height
left
position
right
top
visibility
width
z-index
display
page
pageBreakAfter
pageBreakBefore
@import
An unlimited number of color palettes can be created. Leave a comment to request a custom CSS color palette for your iRise simulation.
