Create A Custom Iron Speed Design Themes

9814 Samantha Suzanne Ct Houston, Texas 77025 Tel: (713) 349-0210 Fax: (281) 220-0086 info@presencecg.
com
CreateYourownCompanysDesignTheme
Asimpleyeteffectiveapproachtocustomdesigntheme
INTRODUCTION
IronSpeedDesigneroutoftheboxalreadygivesyouagoodcollectionofdesignthemes,upto27dif ferentlookandfeelswiththeEnterpriseEdition.Butintodayscorporateworld,everycompanyhasits ownlogo,colorschemeandfontstocarryitsownbranding. Inthisarticle,wedemonstratehoweasyitistocreateauniquedesignthemewhichusesyourcom panyslogoandextendsthatbrandingintothewebapplicationsyouarebuilding.Wearegoingtopre sentasimpleyeteffectivebasiclevelcustomizationprocess. Remember,thisarticleonlyappliestotheEnterpriseEditionbecausethisistheversionthatallowsthe userstouploadtheircustomdesignthemes. Thecustomizationprocesscanbesummarizedin2parts. Part1:Createacustomframeandbackground TheIronSpeedDesignersgenerateddesignthemehascreatedashellwhichwrapsthecontent; weshouldexaminethestructureandusethatasourfoundation.Stylesheetswillbemodifiedfor placingthecustomimages,changingsitebackgroundandmodifyingfontproperties. Part2:Createacustomlogo,headerandfooter Createthelogographicsandthebackgroundforthelogoandfooterareaintheembeddedcontent ofthelayout. Notethatyouwillbeworkingwithstylesheetsandcreatinggraphics.Agoodworkingknowledgeof CascadingStyleSheetandfamiliaritywithgraphicarerequired.Orthiscanbeaccomplishedbycollabo ratingwithawebdesigner.Inthisbasiclevelcustomizationyouwillnothavetochangeanythingin IronSpeedspagetemplatesnorprogramfiles. (PleasenotethatthisarticleisbasedonIronSpeed5.2.Thereareminorchangesfromthepreviousver sionintermsofhowIronSpeedDesignerstructureandcommunicatewiththedesignthemes.)
9814 Samantha Suzanne Ct Houston, Texas 77025 Tel: (713) 349-0210 Fax: (281) 220-0086 info@presencecg.com
IMPLEMENTATION
Step1:Browseandpickadesignthemeasafoundation Itishighlyrecommendedtopickadesignthemefromthosesuppliedselectionsanduseitasafounda tion.Tominimizework,wechooseadesignthemewhichresemblesthepreferredlayout,thusutilizing IronSpeedsHTMLstructure.OurcustomizationwillbeintheStyleSheet.
NowyoushouldselectNewApplicationfromIronSpeedDesignermainmenu.TheApplicationWiz ardwillappear.OnthePageStylestep,browseandseethedesignthemesavailable.Inthisexam ple,wearegoingtouseMatterhorn. Step2:CopyandBuildyourowndesigntheme Afteryouhavepickedthefoundationdesigntheme,gointotheDesignThemesfolderundertheinstal lationdirectoryofIronSpeedDesigner.ThedefaultisC:\ProgramFiles\IronSpeed\Designerv5.2.1 \DesignThemes.Madeacopyofthewholefolderandrenameittothepreferrednametoshowupin yourApplicationGenerationWizard.Inthisexample,IamrenamingittoPresenceConsulting.
Rightnow,ifyouruntheApplicationWizardagain,yournewcustomizeddesignthemeshowsup underApplicationWizardasoneoftheselection.
Step3:UnderstandingtheDesignThemefilestructureandlayout Themainpagetemplate:PagewithHeaderandMenu.html ThisfilecanbefoundunderthePagesdirectoryineachofIronSpeedDesignThemesfolder.Inour casethefilepathisC:\ProgramFiles\IronSpeed\Designerv5.2.1\DesignThemes\PresenceConsult ing\Pages.ThisparticularHTMLfileisthetemplateformostofIronSpeedgeneratedpages. Thehighlightedcodesectionsbelowindicatewherethecustomizationshouldtakeplaceandrepresent thetablecellsforcustomgraphicplacement.Thesecellsbelongtothetablemarkupoftheshell whichwrapstheinnercontentgeneratedbyIronSpeed. AsyoucanseethereareCSSclassesalreadydeclaredandforthemostparttheyaresufficientinthis basiclevelcustomization.BasedontheexistingCSSclassesyoucanfurtherchangebackgroundand fontproperties.
*PagewithHeaderandMenu.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>
ForthenextstepsyouwillbeworkingwiththeCSSfiles. Thestylesheets:BaseStyles.css,BaseStyles.LeftToRight.css,BaseStyles.RightToLeft.css FirstmakechangestotheBaseStyles.cssfileandthenallchangesmustbeduplicatedandappliedto theother2CSSfiles.BaseStyles.LeftToRight.cssisusedforapplicationsgeneratedforlanguagesgoing fromlefttoright(suchasEnglish)whileBaseStyles.RightToLeft.cssisusedfortheonesthatreadfrom righttoleft(suchasArabic.)ThisisimportantbecauseIronSpeedDesignerwillnotloadyourstyle sheetifitonlyappliedto1ofthe3CSSfiles. Step4:Settingthecompanylogo,changingtheheaderandfooter Tousethecustomizedcompanylogo,weneedtoreplacethefilelogo.gifwiththecompanygraphicof dimensionof400pixelsX80pixelsunder\DesignThemes\[ThemeName]\Images,suchas C:\ProgramFiles\IronSpeed\Designerv5.2.0\DesignThemes\PresenceConsulting\Images.Thelogois setbyIronSpeedDesignerinitsapplicationcodeandweonlyhavetomaintainthesamefilenameand dimension.
UnderthePageCenterStylesportionoftheCSS,youwillassignthenewbackgroundfortheheader andfooter.Inhereyoucanalsochangepropertiessuchasbackgroundcolor,fontcolor,fontsize, height,width,etc.Thehighlightedlinesofcodearethechanges.Thisisanexampleandstylescouldbe setinamuchextensivemanner.

/********************************************************************** * 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 { }
Pleaserefertothediagramaboveforthetablelayout.This9cellstableisaframewhichwrapsthe innercontentgeneratedbyIronSpeedDesigner.Theredcoloredtextinthediagramspecifiestheclass namesforthestylesheetindifferentregions.Thecustomizationhereissettingslicedimagestobe usedasbackgroundforeachofthosecells.Incertaincellstheimagesneedtobesettorepeatinorder tofillthewholecell,whichisacommonpracticeinCSS. BelowistheportionoftheCSScalledPageBackgroundStyleswhereimagesshouldbeassigned.

/********************************************************************** * 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 { }
Theresultshouldshowalayoutsimilartothefollowingscreenshot Step5:Changingcolors,fonts,backgroundsandalignment. AdditionalCSSclassescouldalwaysbeaddedalthoughitisrecommendedtoworkwithintheexisting classesdeclaredbythedesigntheme.Asshownbelow,youcouldcenterthewebsite,applydifferent colorschemesorhideselectedgraphicswhichdoesntfitwiththenewdesign.

/********************************************************************** * Added Custom Styles * **********************************************************************/ body form { background-color: #0060B6; }
10
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; }
WerecommendyoutodownloadthesamplePresenceConsultingthemefoldertoexamineall changes.Itiseasiertounderstandwhenactualimagesandcodesinactioncouldbeseen. CustomizationcanbedonebeforeandaftertheDesignthemeisloaded.Inthistutorialalltheworkis completedpriortotheApplicationWizard.OurgoalistocreateareadytouseDesignThemewhich canbeloadedasoneoftheselections. InsummarywebelievethatthiscustomizationprocessismanageableforthemajorityofIronSpeed Designerusers.Thestepsaresimpleenoughyeteffectiveindeliveringabasiclevelcustomization.Of coursemoreindepthcustomizationispossiblewherewemighthavetotreadintoIronSpeedDe signersterritory;thatapproachshouldbeconsideredwiththelevelofIronSpeedexpertiseonacase bycasebasis.
11
FINALRESULTS
ThefollowingscreenshotsarethecustomgraphicsandCSSappliedtodifferentdesignthemes
12
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, database modeling, creative website design, and project management. For more information, please visit http://www.presencecg.com or contact info@presencecg.com

Create A Custom Iron Speed Design Themes

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Create A Custom Iron Speed Design Themes

Uploaded by

Copyright:

Available Formats

9814 Samantha Suzanne Ct Houston, Texas 77025 Tel: (713) 349-0210 Fax: (281) 220-0086 info@presencecg.

UnderthePageCenterStylesportionoftheCSS,youwillassignthenewbackgroundfortheheader andfooter.Inhereyoucanalsochangepropertiessuchasbackgroundcolor,fontcolor,fontsize, height,width,etc.Thehighlightedlinesofcodearethechanges.Thisisanexampleandstylescouldbe setinamuchextensivemanner.

You might also like