Introduction

While the primary focus of database applications is functionality and efficiency, they are often also required to look presentable and/or match a particular style of corporate branding. Although Iron Speed offers a range of built-in themes to suit a variety of different requirements, more advanced styling changes can be made following application generation. This article will discuss the techniques involved in this process.

Due to the custom nature of this procedure, the styles cannot be packaged as themes or carried across to different applications without modification, and will be affected by any subsequent regeneration of the project in Iron Speed Designer.

Themes/Custom Styling

The themes included with Iron Speed Designer are designed to be reusable and can be selected when generating a project. Custom styling however requires more advanced modification of the page mark-up as well as use of jQuery/JavaScript. As a result the process must be carried out after the application has been generated, and repeated following any further regeneration of the project.

Since the structure and layout of applications can vary greatly depending on the design and the controls used, care must be taken to ensure any styling modifications are tested thoroughly – this is particularly important for sub-items within tables, which can be affected by parent styles.

Prerequisites

In order to carry out advanced styling of Iron Speed applications you will require:

• Iron Speed v7.x.
• jQuery (via download, or an online CDN if the application server has internet access). Please be advised that use of a CDN on a local server may result in application styling problems if the internet connection is lost.
• Firebug (if using Mozilla Firefox), or a similar browser development/inspection tool (such as Developer Tools for Google Chrome or Internet Explorer).
• Image editor (to modify buttons and/or any graphics used).
• Intermediate knowledge of CSS/JavaScript/jQuery.

Implementation

Styling your application

1. Generate the application using Iron Speed Designer, selecting the theme that most closely resembles the required appearance. Alternatively, the default theme may be chosen –for example “Matterhorn”, and this name will be used as an example throughout this guide. You may also want to make a copy of the theme and use the copy.
2. Following generation, the following application CSS files will be created in Application Root / App_Themes / Theme Name (e.g. /App_Themes/Matterhorn):

• BaseStyles.css – Default Iron Speed styles – this file should not be modified.
• Styles.LeftToRight.css – Overrides the default styles, may be generated. If included, this should be identical to Styles.css.
• Styles.RightToLeft.css – May be included after generation. Specifies styles for multilingual applications. If this is included but not required, this should be identical to Styles.css.
• Styles.css – The main CSS file, this should be modified for custom styling.

1. Open the application in Visual Studio.
2. The aim of the styling process is to target table items and their descendants using CSS. Any complex table structure that cannot be targeted using CSS must be manipulated using jQuery (and/or JavaScript). In order to do this, jQuery must first be added to the project. Create a folder in the application root directory named scripts, and place the downloaded jQuery file within it (e.g. /scripts/jquery.min.js). If using a CDN this file is not required, although the scripts folder must still be created.
3. Create an empty text file named theme.js, and place this in the newly created scripts folder. Add the following code to the file:

Any required layout manipulation code can be placed within the pageLoad function. While it is more common to use $(document).ready() with jQuery, pageLoad() ensures that any modifications that are made also occur during postbacks. The line jQuery.noConflict() provides the variable $j for use in place of the regular jQuery $, in order to prevent conflicts with any other JavaScript frameworks (optional).

1. The master pages must now be modified to load the required scripts. In the application root, open the Master Pages directory. This contains a set of .master files, and corresponding .xml files. Open all files with the .master extension, and add the following code between the lines <title></title> and </head> in each file:

Modify the jQuery file path (highlighted in red) to match the filename in your scripts directory (or to point to the appropriate CDN). The file paths should be absolute (beginning with /) in order to ensure they are resolved correctly for all pages in the application.

For example, the <head> section of the Blank.master file might look similar to the following after modification:

1. In Application Root / App_Theme, delete Styles.LeftToRight.css and Styles.RightToLeft.css if they exist. Open the generated Styles.css file (create an empty file with this name if it does not exist) - this file will be used for all custom CSS styling.
2. Run the application in a web browser with Firebug (or an alternative debugging tool) installed. Use the tool to inspect the HTML of a given page to find the elements that need to be targeted by styles. In this example, we will modify the header section to have a blue background, using Mozilla Firefox and Firebug. Right-click any area within the header, and choose Inspect Element:

1. By hovering over each HTML element in the debugging tool, it is clear that the table containing the logo image fills the full width of the header:

10.  The class given to this table is logoBG, and this information may be used to style the header background. In the Styles.css file in Visual Studio, add the following CSS code:

11.  Save the CSS file and refresh the page in the browser. The header will now have changed to the appropriate colour (hexadecimal colour code 1B497C):

12.  The images overlapping the header are .gif files, and in the case of the logo the image does not have a transparent background. It must therefore be modified to match the header.

By inspecting the logo as before (right-click the logo image and choose Inspect Element), we can see the img tag in the html. The src property for this shows the path to the logo file that is being used:

13.  Open this file in an image editor, add a background colour that matches the header, and save it:

14.  Refresh the browser to see the changes:

15.  As an example of the possibilities available with the included jQuery files, modify the contents of the theme.js file created earlier in the scripts folder to the following:

This will add the classes even and odd to alternating rows within all tables on the page.

16.  By inspecting the page, it can be seen that the main body of the table is within the table with class dBody. To prevent conflicts with other pages in the application, care must be taken to choose specific selectors when styling tables. By using inspection in the debugging tool and direct descendant selectors in the CSS, the following selector can be found to target the rows on the main table:

.dBody .tre > table > tbody > tr

This can be extended to target the cells within odd and even rows in the table, using the classes added with jQuery:

.dBody .tre > table > tbody > tr.even > td

.dBody .tre > table > tbody > tr.odd > td

Direct descendants are chosen as Iron Speed Designer uses a series of nested tables for its layout, and it is therefore important to ensure that a parent style does not negatively affect a child item. Table style changes must for this reason be tested across all pages within the application.

17.  Finally, once the correct selectors have been found, the following code can be added to Styles.css:

The odd rows are not styled since in this example the alternating colours will be light blue (even) and the default white (odd):

18.  Once all styling changes are complete, make two copies of the Styles.css file and place these in the same (/App_Themes/Theme Name) folder. Rename the duplicates to Styles.LeftToRight.css and Styles.RightToLeft.css. These files can be further customised for multilingual variations if required.

Conclusion

Although Iron Speed Designer is supplied with a number of built-in templates, the styling possibilities available can be increased considerably with post-generation CSS modifications and inclusion of JavaScript frameworks such as jQuery.

About the author

Tim Titchmarsh is Managing Director of Dot Net Architect, a UK based software house specialising in Iron Speed software design, development and support. With over 5 years experience in all versions of Iron Speed we are ready and waiting to assist you with your next project and to train and support you with your current project.