Home	Sales	Training	Contact Us
RDP Support		Open a Web Support Ticket Connect to Support with WebEx
RDPWin KB	RDP-DOS KB	IRM and IRM.Net KB	Crystal KB

Added:  12/2/07
Updated:  8/1/08

Style Sheets

The IRM.Net uses themes (a combination of a skin and a style sheet) to change the colors, font face, font size on all pages.  Themes can be complicated to the average web user and should be maintained by a qualified web designer familiar with themes in order to match the IRM.Net pages with unique marketing sites. 

Themes: Group of files (CSS, Skins, Images) that define the look-and-feel of Web Pages.  Themes can get very complex and a working knowledge of HTML and web design is essential. It is best to have the web designer of your marketing site help with themes. RDP Support cannot help with the mechanics of theme changes.

Before customizing your IRM.Net using any themes or skins, Step 1 should be to update your version of IRM.Net.

• Create a Custom Theme
• Customizable Style Sheets
• Change Button Images
• Change Rounded Boxes
• Style Details  New***
• Style Names & Associated Style Sheets New***
• Customize Text, Color Schemes, Room Lists & Descriptions

Create a Custom Theme

1. Create a new folder under c:/Inetpub/wwwroot/IRMNet/App_Themes for the new theme such as c:/inetpub/wwwroot/IRMNet/App_Themes/MyThemes.
2. Copy all files from IRMNet/App_Themes/DefaultBlue to the new theme folder created in Step 1.  Give "write access" to the stylesheet (*.css) and skin (skin.skin) files in the new folder.

3. Make the desired changes to the stylesheets and skin in the new theme folder.
   
   Note:  Any new folders created are not replaced by IRM.Net updates. Do not change the default theme files shipped by RDP. You can create additional style sheets in your custom theme folder.  All style sheets in the folder are included.

In order for the IRM.net to use the new theme, follow the steps provided under Color Schemes.

Customizable Style Sheets

The following is a list of the customizable style sheets and a description of which areas of IRM.net they affect.

Please also review:

• Style Details  New***
• Style Names & Associated Style Sheets New***

Change Button Images

The images used to display the buttons on the IRM.Net Reservations pages can be changed.  The button images referenced in the RDP themes reside in the IRMNet/App_Themes/<theme_name>/Images/Buttons folder.  RDP recommends recommend creating a new folder for any custom button images; since future IRMNet updates may overwrite the contents of the RDP Buttons folders.  For example, create a folder IRMNet/App_Themes/MyTheme/Images//zButtons for the new custom button images.

Each button on the Reservations pages is identified by a SkinID.  Modify the skin.skin file in the new theme folder and change the ImageURL property for the buttons to reference the new button images.

Change Rounded Boxes

The colored boxes framing various sections on the IRM.Net pages are accomplished with HTML <DIV> tags and the colors can be customized.  Optionally, image files can be used to create the rounded corners on the boxes. The website http://www.roundedcornr.com generates corner images to accomplish this effect.  A small fee is required for the use of the generated images.

To change a solid colored box (i.e., RoundedBox4 which is used on the reservation entry page ResEntry.aspx):

1. To change the background color of the box, change RoundedBoxes.css in the desired theme folder (IRMNet/App_Themes/themename).  Find the section with the style name .RoundedBox4 and set the background color to the desired color.  The style should look like this, with the desired color specified:

.RoundedBox4 {
background: #CCCCCC;
margin: 0 0px 0 10px;
}

2. To add rounded corners, create the image files for the four corners of the box and save them in the Images folder in your theme (for example IRMNet/App_Themes/MyTheme/Images).  The images supplied by RDP were generated at http://www.roundedcornr.com.
   
   Specify the corner radius (smaller number is a sharper curve) and colors. For example:
   

   Corner Radius: 15
   background color: FFFFFF (should match the background color of your page)
   Box color: CCCCCC
   Then click 'Generate RoundedCornr'

   At the bottom of the page, download the four corner image created (one for each corner of the box) into your theme's Images folder. The HTML and CSS code listed can be ignored as it is already in the stylesheet and pages.  RoundedCornr.com does request a small fee for the use of the generated images.
   
   Finally, in your RoundedBoxes.css stylesheet, modify the URL for each of the four corner images to reference the new image files just created. For example, the styles for RoundedBox4 should now look like (with the new Theme folder specified where this sample indicates 'MyTheme' and the new image names specified as they were saved):
   

   .RoundedBox4 {
   background: #94b2d4;
   margin: 0 0px 0 10px;
   }
   .RoundedBox4 td {
   padding: 0px 3px 0px 3px;
   }
   .RoundedBox4Top div {
   background: url(/IRMNet/App_Themes/MyTheme/Images/new_tl.htm) no-repeat top left;
   }
   .RoundedBox4Top {
   background: transparent url(/IRMNet/App_Themes/MyTheme/Images/new_tr.htm) no-repeat top right;
   }
   .RoundedBox4Bottom div {
   background: url(/IRMNet/App_Themes/MyTheme/Images/new_bl.htm) no-repeat bottom left;
   }.
   RoundedBox4Bottom {
   background: transparent url(/IRMNet/App_Themes/MyTheme/Images/new_br.htm) no-repeat bottom right;
   }.
   RoundedBox4Top div, .RoundedBox4Top,.RoundedBox4Bottom div, .RoundedBox4Bottom {
   width: 100%;height: 15px;
   }
   

Style Details

Click the links below for detailed information on styles effecting items on each IRM.net page, as shown in this example.  Once a style name is known, see the name/stylesheet cross-reference to determine in which stylesheet to find the style.  All stylesheets reside in the /IRMNet/App_Themes/<theme_name>/ folder.

Style Names and Associated Style Sheets

The colors, font type and sizes of many feature of the IRM.net pages can be customized by changing their associated styles.

Below is an alphabetical list of style names and style sheet in which they are found.  Style sheets are found in the theme folder: c:/inetpub/wwwroot/IRMNet/App_Themes/<ThemeName>.

Calendar Styles
(Calendar.CSS)

Available Room List Styles
(ResStyles.CSS)