Customizing Style Sheets and Page Styles

Using Iron Speed Designer, you can automatically create hundreds of application web pages using one of many page styles provided with the tool.  Page styles applied to menu bars, tables, record fields, and search, pagination, and filter controls provide a consistent look-and-feel shared across pages such.  Following are three examples of the same Table Report page using different page styles provided with Iron Speed Designer.

A Table Report page rendered with the Vinho Verde page style.

 

A Table Report page rendered with the Tequila page style.

 

A Table Report page rendered in the Everest page style.

Page styles are comprised of two main components:

Customizing your application’s cascading style sheet

Every page style provided by Iron Speed Designer has a cascading style sheet (CSS) file that gives your application a standard look-and-feel.  This style sheet file is a part of the current .NET theme applied to your application.  When you select your application’s page style in the Application Wizard, these style sheet files are copied to your application’s folder, e.g.:

…\<MyApp>\App_Themes\<Current_Theme>\BaseStyles.css

Additionally, one other style sheet is created for you to customize as necessary:

…\<MyApp>\App_Themes\<Current_Theme>\Styles.css

Note that your application’s Web.config file contains a reference to the current .NET theme and thus the style sheet is applied automatically as part of the theme.  The cascading style sheets are applied in the order in which they appear within the folder.  For example Styles.css comes after BaseStyles.css within the App_Themes\<Current_Theme> folder, thus the style sheet definitions within Styles.css, in cascading fashion, take precedence over and override those defined in BaseStyles.css.

Styles.css is initially empty and you make your style sheet modifications here by defining new styles or overriding the existing styles in BaseStyles.css.  The custom styles in Styles.css are not affected when switching page styles, since only BaseStyles.css is overwritten with a page style-specific version, while Styles.css is left untouched.

Step 1: Locate the style you want to change in BaseStyles.css, your application's style sheet.

Step 2: Override the style with your customizations in Styles.css.

That’s all there is to it!  Your modified style will apply globally throughout your application.

Customizing your application’s look-and feel

Modifications of your application’s look-and-feel can be “basic”, which involves changes to the application’s styles sheet, or more “advanced”, which additionally requires creating and replacing one or more graphical elements within the application.

Basic customizations involve purely style sheet modifications, either overriding an existing style or creating a new one.  As an example, let’s say you want to change the look-and-feel of the “field labels” in the editable record panel.  The existing style, “fls” (short for “field label on side”) can be updated to accomplish this.

“fls” is defined in BaseStyles.css as:

/* existing definition in BaseStyles.css */

.field_label_on_side, .fls { /* field label on side */

     color: #666666;

     font-family: Verdana, Geneva, ms sans serif;

     font-size: 10px;

     font-weight: bold;

     padding: 4px 3px 4px 3px;

     text-align: right;

     vertical-align: middle;

     white-space: nowrap;    

     }

The record panel renders as:

Modify the style by adding a new “fls” definition in Styles.css, overriding the font’s color (changing it to red), and adding a new attribute to turn all the letters in the “field label” to uppercase:

/* retain existing definition in BaseStyles.css */

.fls { /* field label on side */

     color: #666666;

     font-family: Verdana, Geneva, ms sans serif;

     font-size: 10px;

     font-weight: bold;

     padding: 4px 3px 4px 3px;

     text-align: right;

     vertical-align: middle;

     white-space: nowrap;    

     }

 

/* add new definition in Styles.css */

.fls { /* field label on side */

     color: #ff0000; /* override default attribute */

     text-transform: uppercase; /* add new attribute */

}

The figure shows the effect of the newly added “fls” definition in Styles.css, with the original “color” attribute overridden, and another attribute, “text-transform” added.

That’s all there is to it!  Your modified style will apply globally throughout your application.

Similarly, you can specify an entirely new style definition, “myfls”, to be used instead of using “fls”:

/* new definition in Styles.css */

.myfls { /* field label on side */

     color: #00ff00;

     font-family: Verdana, Geneva, ms sans serif;

     font-size: 11px;

     font-weight: bold;

     padding: 4px 3px 4px 3px;

     text-align: right;

     text-transform: uppercase;

     vertical-align: middle;

     white-space: nowrap;

     }

Use the Tag Attributes dialog to apply your custom style to each of the data grid cells containing the “field labels”. See Configuring Cell, Row and Table Styles for details.

The figure shows the effect of the newly added “myfls” definition in Styles.css, with the original attributes overridden, e.g., “color” changed to blue, font size increased to 12px, and another attribute, “text-transform”, added.

Your newly created style was only applied to selected data grid cells, so the other “field labels” in your application still use the “fls” style.  Styles applied via the Tag Attributes dialog affects only an individual cell.

Modifying style sheets globally for use in new applications

You can customize the underlying style sheets that Iron Speed Designer uses in your application.  To do this, apply your style sheet customizations in the appropriate page style folder in Iron Speed Designer’s installation folder, e.g.:

<Designer Installation Folder>\Design Themes\Alps\BaseStyles.css

<Designer Installation Folder>\Design Themes\Alps\BaseStyles.LeftToRight.css

<Designer Installation Folder>\Design Themes\Alps\BaseStyles.RightToLeft.css

These changes will also apply to newly created applications using the modified page style, i.e., these customized style sheet files will be used when you select the customized page style in Application Wizard.  If your application already exists and you are switching to the customized style, the style sheet files will be copied into your application’s folder, replacing the old style sheet files.

Iron Speed Designer supports switching the “text direction” in your 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, BaseStyles.LeftToRight.css and BaseStyles.RightToLeft.css, exist in the appropriate page style folder in Iron Speed Designer installation folder to uniquely specify the look-and-feel of your 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 BaseStyles.css file is overwritten with the appropriate left-to-right or right-to-left style sheet version.  Subsequently, that BaseStyles.css is used to render your application.

You’ll need to make style changes in the direction-specific version of the style sheets (BaseStyles.LeftToRight.css or BaseStyles.RightToLeft.css) if you need to update the definitions within the base style sheet (e.g., if you want to retain most attributes for a particular CSS class, but need to delete the rest).  This ensures that any style modifications you make will not be accidentally overwritten or lost should a “text direction” change indeed happen in the future.  (BaseStyles.LeftToRight.css and BaseStyles.RightToLeft.css will never be overwritten unless you select a different page style for your application.)

The following table summarizes how the application style sheets are affected by page style-switching and language-direction switching:

Condition

BaseStyles.css

Styles.css

Page Styles changed (e.g., from Alps to Andes)

Overwritten by BaseStyles.css from installation directory (e.g., Andes/BaseStyles.css)

Untouched

Language direction switch to left-to-right

Overwritten by MyApp/BaseStyles.LeftToRight.css from Iron Speed Designer’s installation folder.

Untouched

Language direction switch to right-to-left

Overwritten by MyApp/BaseStyles.RightToLeft.css from Iron Speed Designer’s installation folder.

Untouched

 

Converting non-grid layout to grid layout

If you want to change your favorite theme with non-grid layout to grid layout do the following:
make page, header, menu, page-level buttons span full width of browser:

.pBack, .logoBG, .MLMmenuAlign, .pageButtonsContainer, .floatContainer {
                width: 100%; /* was 1000px */
                }

Collapse panels and tab containers (i.e., so they span minimum width possible, based on column data width):

.dialog_view, .dv, .ajax__tab_xp .dialog_view, .ajax__tab_xp .dv {
                width: auto; /* was 1000px */
                }

Spread table grid column/data further apart (i.e., add more breathing room between adjacent columns):

.tableCellValue {
                padding: 8px; /* was 8px 4px 4px 4px */
                }

make sure you also change panel options for all panels:

 

See Also

Customizing Style Sheets and Page Styles

Creating Your Own Page Style