Step 2: Select a Web Page Style

Select a page style for your web pages from a set of attractive options.

Select the page style for your automatically created web pages.  Iron Speed Designer provides a variety of attractive styles from which to choose.  Or, you can add your own page styles to the gallery.

Modern vs. classic page styles

Iron Speed Designer offers three page style families: Modern, Modern Grid, and Classic.  Modern pages have a more contemporary look that matches today’s websites.  For example, modern web pages are more elegant with fewer data elements and visual cues. Although Modern and Classic applications differ significantly in appearance, they share the same application code model and functionality. The major visual differences are:

Caveats:

 

Switching page styles

You can return to the the Application Wizard at any time to select to a different page style for your application.  After selecting the new page style, rebuild your application to see the new page style reflected in the application.

When you switch page styles, your application may display a combination of the old page style and the new page style.  This occurs because the browser cache sometimes does not refresh the page correctly.  To fix this problem, press Control-F5 in your browser to refresh the page completely.  If this does not work, go to the Tools, Internet Options dialog in Internet Explorer and select Delete Files from the Temporary Internet Files section.  Press OK twice and then restart your browser.

You may want to change your application’s master pages to reflect your newly selected page style. Iron Speed Designer does not replace existing master pages but you can delete the master pages you want to replace and rebuild your application.

Custom page styles

To create a new custom page style:

Step 1:  Select the “Design Themes” folder in your Iron Speed Designer installation directory.

Ex: C:\Program Files\Iron Speed\Designer v<Current Version Number>\Design Themes

Ex: C:\Program Files (x86)\Iron Speed\Designer v<Current Version Number>\Design Themes

Step 2:  Select the page style folder you want to use as a base for your new customized page style.

Ex: Zinfandel

Step 3:  Copy and rename the selected folder to a name of your choosing.

Ex: Global Express Shipping

Step 4:  Customize the BaseStyles.css style sheet classes as needed.

Step 5:  Customize the images in the Images subfolder as needed.

User selectable, multi-colored page styles

Iron Speed Designer includes page styles that let application users select the color at application run-time via the Upper Tool Bar.

When you select a multi-colored page style, several different themes are added to your application’s \App_Themes folder.  When an application is opened for the very first time, it uses the default color (‘theme’ attribute) configured in your application’s Web.config file:

 <pages validateRequest="false" theme="Blue">

The first color scheme is set as the default when your application is created.  If you want to change the default, modify the “theme” attribute to the desired theme name from the \App_Themes folder.

The color theme dropdown list is located in Header.ascx.cs (.vb) and has a Text property configured according to the folder name of the theme. At run-time, your application attempts to retrieve the localized name from resource file (RESX) using the key:

Txt:<Folder Name>        (i.e. Txt:Red, Txt:Blue, etc.)

If the resource value is present, it is used in the dropdown list in the Upper Tool Bar.

To change the menu entry in the color theme dropdown list in the Upper Tool Bar, locate the application's language resoure (RESX) files and insert an entry for each color folder, e.g.:

<data name="Txt:{Folder_Name}" xml:space="preserve">

     <value>Localized name</value>

</data>

where {Folder_Name} is the actual folder name (using _ instead of space) of the theme, such as Red, Fire_Engine, Electric_Blue, etc.

See Also

Application Wizard

Step 1: Select the Application Type

Step 2: Select a Web Page Style

Step 3: Select a Database

Step 4: Select Pages to Create

Step 5: Select Virtual Primary Keys and Virtual Foreign Keys

Step 6: Select Language and Localization Settings

Step 7: Name Your Application

Step 8: Build Your Application