IRM.Net Customization

The IRM.Net is configurable and customizable to a great degree. The documentation contained below is designed to be used by web programmers to configure the IRM.Net. The documentation will be self explanatory to a web programmer. Programmer support is not provided for integrating the IRM.Net. If you are not a web programmer, or you have not hired a web programmer and you would like to customize the IRM.Net, please contact Blizzard Internet Marketing, our preferred provider for IRM.Net configuration.

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 for Modern Browsers
• Change Rounded Boxes for Older Browsers
• Style Details
• Style Names & Associated Style Sheets
• 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.

Also see:

• Style Details
• Style Names & Associated Style Sheets

Custom Theme Per Property Code

The IRM.Net can have custom theme per property code when the property code is pass through from the marketing website.  The marketing website must pass in the property code parameter: /irmnet/res/resmain.aspx?propertycode=01.

This feature requires that the property code drop down NOT display.  This is due to the theme being passed from the marketing website. The IRM.Net does not allow changing the theme on the fly because the stylesheet has already loaded.

To configure different themes per property code:

1. Create the custom for each applicable property code.  See Create Custom Theme for more information.
2. In RDPWin, go to the System main menu --> Table Maintenance --> select Table W0-IRM Settings
3. Click Add Subrecord.
4. In the Subrecord field, enter THEM<xx>, where <xx> is the property code. For example, if a custom theme was created for property 02, the subrecord would be THEM02.
5. In the data field, enter the theme name.
6. Save & Close.

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 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 for Modern Browsers (IE 9 or Higher) Using CSS3

The colored, rounded boxes framing various sections on the IRM.Net pages are accomplished with the use of CCS3. Modern browsers such as Firefox, Chrome, Safari, and IE 9 support CCS3.  When viewing these boxes from IE 8 or earlier, the boxes appear to be square.

Below is an example of CSS rounded corners for solid color boxes. Note: It's the last line that rounds the corners where the border-radius is specified. This sample is a taken from the RDP DefaultBlue theme.

.RoundedBox1 {
background: #94b2d4;
margin: 0 0px 0 10px;
padding: 10px 5px 5px 5px;
border-radius: 10px; -moz-border-radius: 10px; -webkit-boder-radius: 10px;

Below is an example of CSS rounded corners with a light colored box and darker border around it. Note: There are additional attributes for this option. This example is taken from the RDP IslandBlue theme.

.RoundedBox1 {
background: #cfe6f8;
border: 3px solid #1a4093;
margin: 0 0px 0 10px;
padding: 10px 5px 5px 5px;
border-radius: 10px; -moz-border-radius: 10px; -webkit-boder-radius: 10px;

Change Rounded Boxes for Older Browsers (IE 8 and Earlier)

The information listed in this section is to change rounded boxes for older browsers such as IE 8 and earlier. Modern browsers that support CSS3 (Chrome, Firefox, Safari, and IE 9) can utilize CSS to change the boxes. See the section above - Change Rounded Boxes for Modern Browsers for details.

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)

Note: If changes are made to the calendar background colors, a legend can be created to help guests identify which color indicates available vs. unavailable. The HTML legend file resides on the IRM.Net server in C:\INETPUB\WWWROOT\IRMNet\Custom\<RDP Server>\RDP<xx>\UserText\ResCalendarLegend.htm. Include the custom legend in place of the standard one.

Available Room List Styles
(ResStyles.CSS)