DigitalussCMSTuto

orial:DesiigningTem
mplates

DesigningaTeemplaateforDigiitalussCMS
Thistuttorialexpla
ainshowttodesigna ndbuildteemplatesfforDigitalu
usCMS
version 1.8.1

Introdu
uction
TheDigitaalusCMStem
mplatestructu
urehasbeenaanareaofalo
otofdebatew
withvalidarggumentscoming
fromalldirections.The
eZendFrameeworkpuristssuggestthatitshouldfolllowthedefau
ultstructureo
ofa
meworkapplication,whiledesignersoftencomplain
nthatthisdisjjointedappro
oachmakesitt
ZendFram
challengin
ngtomanage
edesignmateerials.Thedessignsectionaandcontentteemplatesthatwereadded
din
version1..5(anddidno
otmakeitintoversion1.8)onlyaddedtotheconfussion;youhadtoworkin4
placesatonce.
ncompletelyredeveloped
dforversion1
1.8,asyoucanseeinfigurre1.
Thisstruccturehasbeen

Figure1:tthetemplatestructureinD
DigitalusCMSS1.8
Therearee2notablech
hanges:

Th
hecontentte
emplateshaveebeendepreecated.Youno
owaddconteentcontrolsd
directlytothee
laayoutitself.

Copyrightt2009,DigitalusMedia

DigitalusCMSTutorial:DesigningTemplates

YoudontneedtobuildadesignintheCMSanymore.Nowyoucreatethepages,whicharexml
filesthatdefinethepagesettings(stylesheets,layout,etc).

Wehopethatthisstructureprovestobemucheasierfordesignerstoadopt.Pleaseletusknowwhat
youthinkonourcommunityforum:http://community.digitaluscms.com.

GettingStarted
ForthistutorialwearegoingtouseGrid960,simplybecauseIlikeit.Youcanuseanylayouttechniques
youlike,fromatablebasedlayouttoanelegantfluidCSSlayout.Grid960isanicemiddlegroundthat
createscrossbrowsercompliantCSSlayoutswithaminimumofhassle.

Thedesign
Thefirststepwithanydesigntaskiscreatingthedesign.Thistemplatewilluseastandard2column
layout,asinfigure2.

Figure2:thebasicsitedesign

Copyright2009,DigitalusMedia

DigitalusCMSTutorial:DesigningTemplates

WorkingwithGrid960
ThebasicprincipalofGrid960istostreamlinewebdevelopmentbyadoptingastandardpagewidth,
960pixels.TherearetwolayoutchoiceswithGrid960;12columnand16column.The12columnlayout
has60pixelwidecolumnswhilethe16columnlayouthas40pixelwidecolumns.Allofthecolumns
have10pixelsofpadding,whichcreates20pixelguttersbetweenthem.
Whenyoubuildapagewiththegridyoucreatedivcontainers,andthenspecifyhowmanycolumns
theyshouldspanviaCSSclasses.
Listing1:Afourcolumnwidecontainer
<divclass=grid_4>content</div>

CreatingtheTemplate
Thefirstthingyouneedtodoiscreatetheactualtemplate.Createanewfolderin
/templates/publicnameddark.Thencreateafoldernamedlayoutsindark

Thestaticlayout
Tocreatethebasiclayoutyouneedtoestablishwhereeachofthecontentareaswillbeonthe
template.ThesecorrespondtoallofthecontentthatshouldbeeditablethroughtheCMS.Figure3
showsthedesignwiththelayoutboxesinhighlighted.

Copyright2009,DigitalusMedia

DigitalussCMSTuto
orial:DesiigningTem
mplates

Figure3:tthedesignwiiththelayouttboxeshighlig
ghted.
ThenextsstepistowrittetheHTMLfforthepage.Theprocessissimilartow
writinganyHTTMLpage;I
generallystartwithstaaticcontento
onanHTMLp
page,andthenreplacethisscontentwith
hDigitalus
contenttaags.
Createan
newfileinthe
e/templates//public/dark//layoutsfoldeernameddef
fault.phtml
l.Openthisffile
andaddthemarkupfrromlisting2ttothepage.
MLmarkupfo
orthedefaulttlayoutoftheedarktempla
ate
Listing2:thestaticHTM
<divid='
'page'class=
='container_
_12'>
<div
id='page_wra
apper'>
<
<divid='head
der'class='grid_12'>

<divid='
'header_logo
o'class='gri
id_6alpha'>
>

<divc
class='innerC
Content'>

<ahref='h
http://digita
aluscms.com'>

Copyrightt2009,DigitalusMedia

DigitalusCMSTutorial:DesigningTemplates

<imgSrc='/templates/public/dark/images/logo.png'
alt='PoweredbyDigitalusCMS'/></a>

</div>

</div>

<divid='header_top'class='grid_6omega'>TOP</div>

<divclass="clear"></div>

</div>
<divclass="clear"></div>
<divid='inner_page_wrapper'class='grid_10alphaomegaprefix_1suffix_1'>
<divid='page_body'class='grid_10alphaomega'>

<divid='nav'class='grid_10alphaomega'>MAINMENU</div>

<divclass="clear"></div>

<divid='main_image'class='grid_10alphaomega'>

DigitalusCMS'/>

<imgsrc='/templates/public/dark/images/mainimage.png'alt='Poweredby

</div>

<divclass="clear"></div>

<divid='main_content'class='grid_6alpha'>MAINCONTENT</div>

<divid='sidebar_content'class='grid_4omega'>SIDEBARCONTENT</div>

<divclass="clear"></div>

</div>
</div>

<divclass="clear"></div>

</div>
</div>

StylesandImages
Createtwonewfoldersinyourtemplatenamedimagesandstyles.Addtwofilestothestylesfolder;
style.cssforyourbasicstylesandnav.cssforthenavigation.
NotethattheentirelayoutisdoneforyouwithGrid960;yousimplyhavetodealwiththelookandfeel.
Implementthedesign,asinlisting3.Thencopythenav.cssfilefromthedefaulttemplate,andupdate
thelinkcolorsasinlisting4.Notethatthistemplate(includingthegraphics)isavailablefordownloadon
ourcommunitysite.
Listing3:thebasepagestylesin/templates/public/dark/styles/style.css
@CHARSET"ISO88591";
body{
fontfamily:Arial,sanserif;
fontsize:13px;

Copyright2009,DigitalusMedia

DigitalusCMSTutorial:DesigningTemplates

lineheight:20px;
background:url(../images/bodybg.png)repeatx#000;
}

#page{

margintop:10px;

paddingbottom:20px;

background:url(../images/pagebg.png)norepeat#000;

#header{

paddingtop:10px;

paddingbottom:10px;

#header_logo{
}

#header_logoaimg{

border:none;

marginleft:20px;

#header_top{

textalign:right;

color:#fff;

#page_body{

background:#222;

minheight:400px;

color:#fff;

#nav{
background:url(../images/navbg.png)repeatx;
height:30px;
}

Copyright2009,DigitalusMedia

DigitalusCMSTutorial:DesigningTemplates

h1,h2,h3{
margin:10px;
}

h1{
fontsize:20px;
}

h2{
fontsize:16px;
}

h3{
fontsize:14px;
fontstyle:italic;
}

p{
margin:10px;
}
Listing4:thenavigationstylesin/templates/public/dark/styles/nav.css
@CHARSET"ISO88591";

ul#menu,ul#subnav,ul#subnavul{
liststyle:none;
}

ul#menu{
padding:7px20px020px;
margin:0;
}

ul#menuli{
display:inline;
margin:010px;
}

Copyright2009,DigitalusMedia

DigitalusCMSTutorial:DesigningTemplates

ul#menulia{
fontweight:bold;
textdecoration:none;
fontsize:14px;
color:#f5f5f5;
}

ul#menulia:hover{
textdecoration:underline;
color:#ccc;
}

ul#menulia.selected{
color:#fff;
}

ul#subnav{
padding:10px;
}

ul#subnavli{
padding:2px0;
margin:05px;
}

ul#subnava{
textdecoration:none;
color:#f5f5f5;
fontweight:bold;
}

ul#subnava:hover{
textdecoration:underline;
color:#ccc;
}

ul#subnava.selected{
color:#fff;

Copyright2009,DigitalusMedia

DigitalusCMSTutorial:DesigningTemplates

ul#subnavul{
padding:5px;
margin:0;
}

ul#subnavula{
fontweight:normal;
}

Thepagefile
Thenextstepistocreatethedefaultpagefileforyourtemplate.ApagefileisanXMLfilewhichtellsthe
CMSwhichlayouttouseandstylesheetstoload.Thisenablesyoutomixandmatchamongyour
templateresources.Youcanalsoimportstylesheetsfromaremotelocation(outsideyourtemplate
folder).
Createanewfolderinyourtemplatenamedpages.ThencreateanewXMLfileinthisfoldernamed
default.xml.Thensetthedesignname,layout,andstylesheets,asinlisting5.
Listing5:thedefaulttemplatepageintemplates/public/dark/pages/default.xml
<?xmlversion="1.0"encoding="UTF8"?>
<design>

<name>default</name>

<layout>default.phtml</layout>

<styles>

<stylesheetimport='true'>styles/grid960/styles/960.css</stylesheet>

<stylesheetimport='true'>styles/grid960/styles/reset.css</stylesheet>

<stylesheetimport='true'>styles/grid960/styles/text.css</stylesheet>

<stylesheet>style.css</stylesheet>

<stylesheet>nav.css</stylesheet>

</styles>

</design>

Addingdynamiccontent
Youcanadddynamiccontenttoyourtemplatesusingoneofthreemethods:

UsinggoodoldfashionedPHP
UsingZendViewHelpers(andtheDigitalusViewHelpers)

Copyright2009,DigitalusMedia

DigitalusCMSTutorial:DesigningTemplates

10

UsingDigitalusTags

InthistutorialwewillbeusingDigitalustags.ThesetagsareXMLtagswhichdefinedynamiccontent
areas.Therearefourmaintypesofthesetags:

Controls:thesearecontentcontrols,suchastextareas.
Modules:theserenderamoduleaction.
Navigation:theserendernavigationalelements.
Partial:theserenderpartialscripts.

Wewillgetstartedbyaddingthetopcontentareas.Youwillneedonefortheheaderlogoandonefor
theheadertop.YoucanusetheFCKeditorcontrolforbothofthese.Replacethestaticcontentthatisin
thesedivswiththeDigitalusControltags,asinlisting5.
Nextyouneedtoaddthemainmenutothepage.YoudothiswithaDigitalusNavigationtag.Replace
thestatictextinthenavdivwiththemenutag,asinlisting5.
Nowyouneedtoaddthemaincontentareas.Addatextcontrolforthepageheadline,thenanother
FCKcontrolforthemaincontent.Followthismaincontentwithamoduleselector,soyoucanrendera
moduleonthepageifneedbe.
Thelasteditablesectionisthesidebar.Thesidebarneedsafieldfortheheadlineandthecontentthat
goesaboveandbelowthesubmenu.Thenyouneedtoaddthemenucontrolforthesubmenu,asin
listing6.
Listing6:thedynamictemplatewiththeDigitalusTags
<divid='page'class='container_12'>
<divid='page_wrapper'>
<divid='header'class='grid_12'>
<divid='header_logo'class='grid_6alpha'>
<digitalusControltype='fckeditor'id='header_logo'cols='60'rows='4'
group='header'/>
</div>

<divid='header_top'class='grid_6omega'>

rows='4'group='header'/>

<digitalusControltype='fckeditor'id='header_top'cols='60'

</div>

<divclass="clear"></div>

</div>
<divclass="clear"></div>
<divid='inner_page_wrapper'class='grid_10alphaomegaprefix_1suffix_1'>
<divid='page_body'class='grid_10alphaomega'>

Copyright2009,DigitalusMedia

DigitalusCMSTutorial:DesigningTemplates

11

<divid='nav'class='grid_10alphaomega'>

</div>

<digitalusNavigationid='menu'type='menu'levels='1'/>

<divclass="clear"></div>

<divid='main_image'class='grid_10alphaomega'>

group='main'/>

<digitalusControltype='fckeditor'id='content_top'cols='60'rows='4'

</div>

<divclass="clear"></div>

<divid='main_content'class='grid_6alpha'>

<h1><digitalusControltype='text'id='headline'required='true'
size='50'group='main'/></h1>

<digitalusControltype='fckeditor'id='content'required='true'
cols='60'rows='4'group='main'/>
<digitalusControltype='moduleSelector'id='module'group='main'/>

</div>

<divid='sidebar_content'class='grid_4omega'>

group='sidebar'/></h2>

<h2><digitalusControltype='text'id='sidebar_headline'size='50'

<digitalusControltype='fckeditor'id='sidebar_top'cols='60'
rows='4'group='sidebar'/>

<digitalusNavigationid='subnav'type='submenu'levels='2'/>

<digitalusControltype='fckeditor'id='sidebar_bottom'cols='60'
rows='4'group='sidebar'/>

</div>

<divclass="clear"></div>

</div>
</div>

<divclass="clear"></div>

</div>
</div>

Templatesecurity
Youwillnotethatthereisan.htaccessfileinseveralofthedefaulttemplatefolders.Thisfiledenies
accesstoanythingoutsidetheCMSapplicationforsecuritysake.Copythe.htaccessfilefromthedefault
publictemplatespagesfolderandpasteitintothepagesandlayoutsfoldersinyourtemplate.
Oncethisiscompleteyourtemplateisreadytouse.

Copyright2009,DigitalusMedia

DigitalussCMSTuto
orial:DesiigningTem
mplates

12

Usingt
theTemplate
Whenyou
ucreateanew
wpageyouaregiventheo
optiontoseleectthetemplatetouse.Yo
oucanalso
changeth
hetemplateo
onanexistingpagebyseleectingtheCon
ntentTemplatteoption.
Whenyou
uopenthepaagetoeditintheCMSyou
uwillseethatDigitalusgen
neratedaform
mforyour
template..Itdidthisbyysearchingth
hetemplatefo
orDigitalusTags;itthenaddedacontroltotheform
mfor
eachconttroltag.
YouwillalsonoticethaatundertheP
PageOptionssthereare3ccontentsectio
ons.Complicaatedpagescaan
requirem
manydifferenttcontrolsand
dputtingthem
mallononep
pagecanbeu
unwieldy.Diggitalusseparates
thediffereentpagesecttions(asinfiggure4),usinggthegroupatttributeonth
heDigitalusCo
ontroltags(see
listing6).

Figure4:tthepageedittorwiththep
pageformloaded
Ifyoufillo
outtheformwithsomesaampledataan
ndgotothep
pageonthefrontendyoutemplatesho
ould
beliveno
ow,andshouldlooksometthinglikeFigu
ure5.

Copyrightt2009,DigitalusMedia

DigitalussCMSTuto
orial:DesiigningTem
mplates

13

Figure5:D
Darktemplatescreenshot

Summa
ary
Digitalus1
1.8bringsare
efactoredtem
mplatesystem
m,whichaimsstostreamlin
netheprocesssandmaketthe
templatesseasierforno
otsotechnicaalpeopletod
develop.Inth
histutorialyoulearnedhow
wtousesom
meof
thesenew
wtools,creatinganewtem
mplatefortheeCMS.

Copyrightt2009,DigitalusMedia