|
Step 1: Select a design theme as a foundation
I highly recommend selecting a design theme from those supplied to use as a foundation. To minimize work, we
choose a design theme which resembles the preferred layout, thus utilizing Iron Speed Designer’s HTML structure.
Our customizations will be made in the Style Sheet file.
Now select "New Application" from Iron Speed Designer’s main menu. The "Application Wizard" will appear. On the
"Page Style" step, browse the design themes available. In this example, we are going to use Matterhorn.
Step 2: Copy and Build your own design theme
After you have selected your foundation design theme, go into the Design Themes folder under the installation
directory of Iron Speed Designer and copy the selected design them, e.g.:
|
C:\Program Files\Iron Speed\Designer v4.3.0\Design Themes\Matterhorn
|
Copy the whole folder and rename it to the preferred name to appear in the Application Wizard. I use "PresenceConsulting"
in this example.
Now, if you run the "Application Wizard" again, your new customized design theme appears in the Application
Wizard as one of the selections.
Step 3: Understanding the Design Theme file structure and layout
The main page template: Page with Header and Menu.html
This particular HTML file is the template for most of Iron Speed-generated pages and is found in the "Pages"
directory in each of Iron Speed Designer’s "Design Themes" folders. In our case the file path is:
|
C:\Program Files\Iron Speed\Designer v4.3.0\Design Themes\ PresenceConsulting\Pages
|
The highlighted code sections below indicate where the customizations should take place and represent the
table cells for custom graphic placement. These cells belong to the table mark-up of the "shell" which wraps
the inner content generated by Iron Speed Designer.
As you can see, there are CSS classes already declared, and for the most part they are sufficient in this
basic-level customization. Based on the existing CSS classes you can further change background and font properties.
* Page with Header and Menu.html
<body id="Body1" runat="server" class="pBack">
<form id="Form1" method="post" runat="server">
<BaseClasses:ScrollCoordinates id="ScrollCoordinates" runat="server"> </BaseClasses:ScrollCoordinates>
<BaseClasses:BasePageSettings id="PageSettings" runat="server">
</BaseClasses:BasePageSettings>
<GEN:Template Type="Page" Description="A page containing a header, menu and footer."/>
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tr>
<td class="pAlign">
<table cellspacing="0" cellpadding="0" border="0" class="pbTable">
<tr>
<td class="pbTL"><img src="../Images/space.gif" alt=""/></td>
<td class="pbT"><img src="../Images/space.gif" alt=""/></td>
<td class="pbTR"><img src="../Images/space.gif" alt=""/></td>
</tr>
<tr>
<td class="pbL"><img src="../Images/space.gif" alt=""/></td>
<td class="pbC">
<table cellspacing="0" cellpadding="0" border="0" class="pcTable">
<tr>
<td class="pcT" colspan="2">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<GEN:Header Name="PageHeader" File="../Header and Footer/Header.html"/>
</td>
</tr>
</table>
</td>
<td class="pcTR"></td>
</tr>
<tr>
<td class="pcL">
<GEN:Menu name="MenuV" file="../Menu Panels/VerticalMenu.html"/>
</td>
<td class="pcC">
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
<tr>
<td>
<GEN:Menu name="Menu" file="../Menu Panels/HorizontalMenu.html"/>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="pContent">
<a name="StartOfPageContent"></a>
<GEN:Insert/>
<div id="detailPopup" style="z-index:2; visibility:visible; position:absolute;"> </div>
<div id="detailPopupDropShadow" class="detailPopupDropShadow" style="z-index:1;
visibility:visible; position:absolute;"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="pcR"></td>
</tr>
<tr>
<td class="pcBL"></td>
<td class="pcB">
<GEN:Footer Name="PageFooter" file="../Header and Footer/Footer.html"/>
</td>
<td class="pcBR"></td>
</tr>
</table>
</td>
<td class="pbR"><img src="../Images/space.gif" alt=""/></td>
</tr>
<tr>
<td class="pbBL"><img src="../Images/space.gif" alt=""/></td>
<td class="pbB"><img src="../Images/space.gif" alt=""/></td>
<td class="pbBR"><img src="../Images/space.gif" alt=""/></td>
</tr>
</table>
</td>
</tr>
</table>
<asp:ValidationSummary id="ValidationSummary1" ShowMessageBox="true" ShowSummary="false"
runat="server"></asp:ValidationSummary>
</form>
</body>
|
For the next steps you will be working with the CSS files. The style sheets: BaseStyles.css, BaseStyles.LeftToRight.css,
BaseStyles.RightToLeft.css
First change the BaseStyles.css file and then apply these changes to the other two CSS files. BaseStyles.LeftToRight.css
is used for applications generated for languages going from left to right (such as English) while BaseStyles.RightToLeft.css
is used for the ones that read from right to left (such as Arabic.) This is important because Iron Speed Designer will
not load your style sheet if it only applied to one of the three CSS files.
Step 4: Setting the company logo, changing the header and footer
To use the customized company logo, replace the logo.gif file with the company graphic of 400 pixels X 80 pixels under \Design Themes\[New Theme Name]\Images, such as:
|
C:\Program Files\Iron Speed\Designer v4.3.0\Design Themes\PresenceConsulting\Images
|
The logo is set by Iron Speed Designer in its application code and we have to maintain the same file name and dimension.
Under the “Page Center Styles” portion of the CSS, assign the new background for the header and footer. In here you can
also change properties such as background color, font color, font size, height, width, etc. The highlighted code sections
contain the changes. This is an example and styles could be configured more extensively.
/**********************************************************************
* Page Center Styles *
**********************************************************************/
.pcTable {
}
.pcTL {
}
.pcT {
background: url(../Images/logo_bg.gif) repeat-x;
background-color: #666666;
}
.pcTR {
}
.pcL {
}
.pcC {
background-color: #FFFFFF;
border-top: #CCCCCC solid 1px;
vertical-align: top;
width: 100%;
}
.pcR {
}
.pcBL {
}
.pcB {
background: url(../Images/footer_bg.gif) bottom repeat-x;
}
.pcBR {
}
|
Please refer to the diagram below for the table layout. This 9-cell table is a frame which wraps the content generated
by Iron Speed Designer.
The red text in the diagram specifies the class names for the style sheet in different regions.
The customization here is setting sliced images to be used as background for each of those cells. In certain cells the
images need to be set to repeat in order to fill the whole cell, which is a common practice in CSS.
Below is the portion of the CSS called “Page Background Styles” where images are assigned.
/**********************************************************************
* Page Background Styles *
**********************************************************************/
.pageBackground, .pBack {
background-color: #ffffff;
margin: 0px;
}
.pageBorderTL, .pbTL {
background: url(../Images/topleft.gif) no-repeat;
height: 15px;
width: 18px;
}
.pageBorderT, .pbT {
background: url(../Images/topmid.gif) repeat-x;
height: 15px;
}
.pageBorderTR, .pbTR {
background: url(../Images/topright.gif) no-repeat;
height: 15px;
width: 18px;
}
.pageBorderL, .pbL {
background: url(../Images/left.gif) repeat-y;
width: 18px;
}
.pageBorderC, .pbC {
vertical-align: top;
}
.pageBorderR, .pbR {
background: url(../Images/right.gif) repeat-y;
width: 18px;
}
.pageBorderBL, .pbBL {
background: url(../Images/bottomleft.gif) no-repeat;
height: 21px;
width: 18px;
}
.pageBorderB, .pbB {
background: url(../Images/bottommid.gif) repeat-x;
height: 21px;
}
.pageBorderBR, .pbBR {
background: url(../Images/bottomright.gif) no-repeat;
height: 21px;
width: 18px;
}
.page_yellow, .pContent {
background-color: #96C0E6;
height: 30px;
text-align: left;
border-top: #6DA5D9 1px solid;
border-right: #6DA5D9 1px solid;
border-bottom: #6DA5D9 1px solid;
border-left: #6DA5D9 1px solid;
}
.pageAlignment, .pAlign {
vertical-align: top;
}
.borderTable, .pbTable {
margin: 10px auto 50px auto;
}
.divider {
}
.footer {
color: #FFFFFF;
font-family: Verdana, Geneva, ms sans serif;
font-size: 10px;
padding-top: 6px;
}
.logoBG {
}
|
Step 5: Changing colors, fonts, backgrounds and alignment.
Additional CSS classes can always be added although it is recommended to work within the existing classes declared by the
design theme. As shown below, you could center the website, apply different color schemes or hide selected graphics which
doesn’t fit with the new design.
/**********************************************************************
* Added Custom Styles *
**********************************************************************/
body form {
background-color: #0060B6;
}
html {
background-color: #0060B6;
}
img#PageHeader__LeftImage {
display: none;
}
.menu_bg {
background-color: #666666;
}
td.pcC table tr td.nav {
background-color: #666666;
}
td.pcC table tr td table {
margin: 0px auto 0px auto;
}
td.pcB table {
margin: 0px auto 0px auto;
}
.footer img {
display: block;
margin: 0px auto 0px auto;
}
|
We recommend you download the sample “PresenceConsulting” theme folder to examine all changes. It is easier to understand
when actual images and code can be seen in action.
Customization can be done before and after the design theme is loaded. In this tutorial all the work is completed prior to
using the “Application Wizard”. Our goal is to create a ready-to-use Design Theme which can be loaded as one of the selections.
In summary we believe that this customization process is manageable for the majority of Iron Speed Designer users. The steps
are simple enough yet effective in delivering a basic-level customization. Of course more in-depth customization is possible
where we might have to tread into Iron Speed Designer’s territory; that approach should be considered with the level of Iron
Speed Designer expertise on a case-by-case basis.
|
