Upload
khinzab
View
47
Download
5
Embed Size (px)
Citation preview
9814 Samantha Suzanne Ct Houston, Texas 77025
Tel: (713) 349-0210 Fax: (281) 220-0086
1
Create Your own Company’s Design Theme
A simple yet effective approach to custom design theme
INTRODUCTION
Iron Speed Designer out of the box already gives you a good collection of design themes, up to 27 dif‐
ferent look‐and‐feels with the Enterprise Edition. But in today’s corporate world, every company has its
own logo, color scheme and fonts to carry its own branding.
In this article, we demonstrate how easy it is to create a unique design theme which uses your com‐
pany’s logo and extends that branding into the web applications you are building. We are going to pre‐
sent a simple yet effective basic‐level customization process.
Remember, this article only applies to the Enterprise Edition because this is the version that allows the
users to upload their custom design themes.
The customization process can be summarized in 2 parts.
Part 1: Create a custom “frame” and background
The Iron Speed Designer’s generated design theme has created a “shell” which wraps the content;
we should examine the structure and use that as our foundation. Style sheets will be modified for
placing the custom images, changing site background and modifying font properties.
Part 2: Create a custom logo, header and footer
Create the logo graphics and the background for the logo and footer area in the embedded content
of the layout.
Note that you will be working with style sheets and creating graphics. A good working knowledge of
Cascading Style Sheet and familiarity with graphic are required. Or this can be accomplished by collabo‐
rating with a web designer. In this basic‐ level customization you will not have to change anything in
Iron Speed’s page templates nor program files.
(Please note that this article is based on Iron Speed 5.2. There are minor changes from the previous ver‐
sion in terms of how Iron Speed Designer structure and communicate with the design themes.)
9814 Samantha Suzanne Ct Houston, Texas 77025
Tel: (713) 349-0210 Fax: (281) 220-0086
2
IMPLEMENTATION
Step 1: Browse and pick a design theme as a foundation
It is highly recommended to pick a design theme from those supplied selections and use it as a founda‐
tion. To minimize work, we choose a design theme which resembles the preferred layout, thus utilizing
Iron Speed’s HTML structure. Our customization will be in the Style Sheet.
Now you should select “New Application” from Iron Speed Designer main menu. The “Application Wiz‐
ard” will appear. On the “Page Style” step, browse and see the design themes available. In this exam‐
ple, we are going to use Matterhorn.
Step 2: Copy and Build your own design theme
After you have picked the foundation design theme, go into the Design Themes folder under the instal‐
lation directory of Iron Speed Designer. The default is C:\Program Files\Iron Speed\Designer v5.2.1
\Design Themes. Made a copy of the whole folder and rename it to the preferred name to show up in
your Application Generation Wizard. In this example, I am renaming it to “PresenceConsulting”.
9814 Samantha Suzanne Ct Houston, Texas 77025
Tel: (713) 349-0210 Fax: (281) 220-0086
3
Right now, if you run the “Application Wizard” again, your new customized design theme shows up
under Application Wizard as one of the selection.
9814 Samantha Suzanne Ct Houston, Texas 77025
Tel: (713) 349-0210 Fax: (281) 220-0086
4
Step 3: Understanding the Design Theme file structure and layout
The main page template: Page with Header and Menu.html
This file can be found under the “Pages” directory in each of Iron Speed “Design Themes” folder. In our
case the file path is C:\Program Files\Iron Speed\Designer v5.2.1\Design Themes\ PresenceConsult‐
ing\Pages. This particular HTML file is the template for most of Iron Speed‐generated pages.
The highlighted code sections below indicate where the customization 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.
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">
9814 Samantha Suzanne Ct Houston, Texas 77025
Tel: (713) 349-0210 Fax: (281) 220-0086
5
<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; posi-tion: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">
9814 Samantha Suzanne Ct Houston, Texas 77025
Tel: (713) 349-0210 Fax: (281) 220-0086
6
<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 make changes to the BaseStyles.css file and then all changes must be duplicated and applied to
the other 2 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 1 of the 3 CSS files.
Step 4: Setting the company logo, changing the header and footer
To use the customized company logo, we need to replace the file logo.gif with the company graphic of
dimension of 400 pixels X 80 pixels under \Design Themes\[Theme Name]\Images, such as
“C:\Program Files\Iron Speed\Designer v5.2.0\Design Themes\PresenceConsulting\Images”. The logo is
set by Iron Speed Designer in its application code and we only have to maintain the same file name and
dimension.
9814 Samantha Suzanne Ct Houston, Texas 77025
Tel: (713) 349-0210 Fax: (281) 220-0086
7
Under the “Page Center Styles” portion of the CSS, you will 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 lines of code are the changes. This is an example and styles could be
set in a much extensive manner.
/**********************************************************************
* 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 {
}
9814 Samantha Suzanne Ct Houston, Texas 77025
Tel: (713) 349-0210 Fax: (281) 220-0086
8
Please refer to the diagram above for the table layout. This 9‐cells table is a frame which wraps the
inner content generated by Iron Speed Designer. The red colored 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 should be 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;
9814 Samantha Suzanne Ct Houston, Texas 77025
Tel: (713) 349-0210 Fax: (281) 220-0086
9
}
.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;
9814 Samantha Suzanne Ct Houston, Texas 77025
Tel: (713) 349-0210 Fax: (281) 220-0086
10
} .divider { }
.footer { color: #FFFFFF; font-family: Verdana, Geneva, ms sans serif; font-size: 10px; padding-top: 6px; } .logoBG { }
The result should show a layout similar to the following screen shot
Step 5: Changing colors, fonts, backgrounds and alignment.
Additional CSS classes could 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; }
9814 Samantha Suzanne Ct Houston, Texas 77025
Tel: (713) 349-0210 Fax: (281) 220-0086
11
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 to download the sample “PresenceConsulting” theme folder to examine all
changes. It is easier to understand when actual images and codes in action could be seen.
Customization can be done before and after the Design theme is loaded. In this tutorial all the work is
completed prior to 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 De‐
signer’s territory; that approach should be considered with the level of Iron Speed expertise on a case‐
by‐case basis.
9814 Samantha Suzanne Ct Houston, Texas 77025
Tel: (713) 349-0210 Fax: (281) 220-0086
12
FINAL RESULTS
The following screen shots are the custom graphics and CSS applied to different design themes
9814 Samantha Suzanne Ct Houston, Texas 77025
Tel: (713) 349-0210 Fax: (281) 220-0086
Company Background
Presence Consulting Group, located in Houston Texas, is an established
technical consulting firm servicing a wide range of clients, ranging from
land management company to direct mail marketers.
Our services include .NET consulting, Iron Speed Designer training, data-
base modeling, creative website design, and project management.
For more information, please visit
http://www.presencecg.com
or contact