Académique Documents
Professionnel Documents
Culture Documents
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.
9814 Samantha Suzanne Ct Houston, Texas 77025 Tel: (713) 349-0210 Fax: (281) 220-0086 info@presencecg.com
Rightnow,ifyouruntheApplicationWizardagain,yournewcustomizeddesignthemeshowsup underApplicationWizardasoneoftheselection.
9814 Samantha Suzanne Ct Houston, Texas 77025 Tel: (713) 349-0210 Fax: (281) 220-0086 info@presencecg.com
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">
9814 Samantha Suzanne Ct Houston, Texas 77025 Tel: (713) 349-0210 Fax: (281) 220-0086 info@presencecg.com
<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">
9814 Samantha Suzanne Ct Houston, Texas 77025 Tel: (713) 349-0210 Fax: (281) 220-0086 info@presencecg.com
<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.
9814 Samantha Suzanne Ct Houston, Texas 77025 Tel: (713) 349-0210 Fax: (281) 220-0086 info@presencecg.com
**********************************************************************/ .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 info@presencecg.com
9814 Samantha Suzanne Ct Houston, Texas 77025 Tel: (713) 349-0210 Fax: (281) 220-0086 info@presencecg.com
} .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 info@presencecg.com
} .divider { } .footer { color: #FFFFFF; font-family: Verdana, Geneva, ms sans serif; font-size: 10px; padding-top: 6px; } .logoBG { }
10
9814 Samantha Suzanne Ct Houston, Texas 77025 Tel: (713) 349-0210 Fax: (281) 220-0086 info@presencecg.com
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
9814 Samantha Suzanne Ct Houston, Texas 77025 Tel: (713) 349-0210 Fax: (281) 220-0086 info@presencecg.com
FINALRESULTS
ThefollowingscreenshotsarethecustomgraphicsandCSSappliedtodifferentdesignthemes
12
9814 Samantha Suzanne Ct Houston, Texas 77025 Tel: (713) 349-0210 Fax: (281) 220-0086 info@presencecg.com
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