Using and Modifying Style Sheets

Iron Speed Designer design themes use Cascading Style Sheet (CSS) files to specify the styles used for the web pages, panels and controls generated for your application. Every design theme provided by Iron Speed Designer has a set of CSS files to give a standard look-and-feel to your generated application.

The style sheets for each design theme are located in the respective design theme folder, e.g.:

C:\Program Files\Iron Speed\Designer V5.0.0\Design Themes\Alps\Style.css

C:\Program Files\Iron Speed\Designer V5.0.0\Design Themes\Alps\Style.LeftToRight.css

C:\Program Files\Iron Speed\Designer V5.0.0\Design Themes\Alps\Style.RightToLeft.css

When you select your application’s design theme in the Application Wizard, these style sheet files are copied to your application’s folder, e.g.:

…\<MyApp>\Styles\Style.css

…\<MyApp>\Styles\Style.LeftToRight.css

…\<MyApp>\Styles\Style.RightToLeft.css

Your generated application uses only the Style.css style sheet file. However, Style.css is a direct copy of either Style.LeftToRight.css or Style.RightToLeft.css.

Left-to-Right and Right-to-Left Text Direction Style Sheets

Iron Speed Designer supports switching the “text direction” in the generated application. (English and most languages use “left-to-right”, while Arabic, Hebrew, and a few others employ a “right-to-left” text direction.) Accordingly, two separate style sheets, Style.LeftToRight.css and Style.RightToLeft.css, exist to uniquely specify the look-and-feel of the generated application in each of these configurations.

When the text direction is set in the Application Wizard’s Application Information step (by either clicking “Next” or “Finish”), the Style.css file is overwritten with the appropriate left-to-right or right-to-left style sheet version. Subsequently, that Style.css is then used to render your generated application.

Modifying Style Sheets

If you do not foresee a need to switch the text direction and do not foresee switching design themes, then it is safe to make your style sheet changes in your application’s Style.css file, e.g.:

…\<MyApp>\Styles\Style.css

It is strongly recommended that your style changes be made in the direction-specific version of the style sheets (Style.LeftToRight.css or Style.RightToLeft.css). This will ensure that any style modifications you make will not be accidentally overwritten or lost should a “text direction” change indeed happen in the future. (Style.css may be overwritten, but Style.LeftToRight.css and Style.RightToLeft.css will never be overwritten unless you select a different design theme for your application.)

If you plan to change your application’s text direction or plan to generate multi-lingual applications that support languages in both text directions, you should make your style sheet changes in all of your application’s style sheet files, e.g.:

…\<MyApp>\Styles\Style.css

…\<MyApp>\Styles\Style.LeftToRight.css

…\<MyApp>\Styles\Style.RightToLeft.css

If you plan to change your application’s design theme, then make your style sheet changes to the new design theme’s style sheets, e.g.:

C:\Program Files\Iron Speed\Designer V5.0.0\Design Themes\Alps\Style.css

C:\Program Files\Iron Speed\Designer V5.0.0\Design Themes\Alps\Style.LeftToRight.css

C:\Program Files\Iron Speed\Designer V5.0.0\Design Themes\Alps\Style.RightToLeft.css

When you select the new design theme, these style sheet files will be copied into your application’s folder, replacing the old style sheet files.

Data Input Field Styles

In some cases, Iron Speed Designer generates the various HTML controls needed to collect data from the user. For example, Iron Speed Designer generates all of the input fields, such as text boxes and dropdowns, and the style cannot be specified for these in the design theme file – since the text box is generated by Iron Speed Designer at run-time. As such, these styles are specified as pass-through attributes for each of the editable fields.

There is a set of standard styles that Iron Speed Designer uses for the input fields. You can specify the look and feel of these styles in the design theme’s CSS file. If no style is specified, the default style of the browser is used.