designing templates for digitalus cms.pdf

8/17/2019 Designing Templates for Digitalus CMS.pdf

1/13

Copyright

Des

This

tuversion

IntrodThe

Digit

from all d

Zend Fra

challengi

version 1.

places

at

This struc

Figure

1:

There are

• T

la

2009, Digita

ignin

orial

expl 1.8.1

ction lus

CMS

tem

irections. Th

ework appli

g to manage

5 (and did n

once.

ture has bee

the

template

2 notable ch

he content t

yout

itself.

lus Media

g a T

ains

how

t

Digitalus

mpl

plate

structu

Zend Fram

cation, while

design mate

t make it int

n completely

structure

in

anges:

mplates hav

o

design

a

CMS Tut

te fo

re

has

been

work purists

designers of

rials. The de

o version 1.8

redeveloped

igitalus

CM

been depre

nd

build

t

rial: Desi

r Dig

n

area

of

a

l

suggest that

ten complain

ign section a

) only added

for version

1.8

cated. You n

mplates

gning Te

talus

ot

of

debate

it should foll

that this dis

nd content t

to the confu

.8, as you ca

ow add cont

or

Digital

plates

CMS

1

s

CMS

with

valid

ar

ow the defa

ointed appro

emplates tha

ion; you had

uments

com

lt structure

ach makes it

t were adde

to work in 4

ing

f a

in

n see in figure 1.

nt controls irectly to th


2/13

Digitalus CMS Tutorial: Designing Templates 2

Copyright

2009,

Digitalus

Media

• You don’t need to build a design in the CMS anymore. Now you create the pages, which are xml

files

that

define

the

page

settings

(stylesheets,

layout,

etc).

We hope that this structure proves to be much easier for designers to adopt. Please let us know what

you

think

on

our

community

forum:

http://community.digitaluscms.com.

Getting

Started

For

this

tutorial

we

are

going

to

use

Grid

960,

simply

because

I

like

it.

You

can

use

any

layout

techniques

you like, from a table based layout to an elegant fluid CSS layout. Grid 960 is a nice middle ground that

creates cross browser compliant CSS layouts with a minimum of hassle.

The design

The first step with any design task is creating the design. This template will use a standard 2 column

layout,

as

in

figure

2.

Figure 2: the basic site design

http://community.digitaluscms.com/http://960.gs/http://960.gs/http://960.gs/http://960.gs/http://community.digitaluscms.com/


3/13


Copyright

2009,

Digitalus

Media

Working with Grid 960

The basic principal of Grid 960 is to streamline web development by adopting a standard page width,

960 pixels. There are two layout choices with Grid 960; 12 column and 16 column. The 12 column layout

has 60 pixel wide columns while the 16 column layout has 40 pixel wide columns. All of the columns

have

10

pixels

of

padding,

which

creates

20

pixel

gutters

between

them.

When

you

build

a

page

with

the

grid

you

create

div

containers,

and

then

specify

how

many

columns

they should span via CSS classes.

Listing

1:

A

four

column

wide

container

content

Creating

the

Template

The

first

thing

you

need

to

do

is

create

the

actual

template.

Create

a

new

folder

in

/templates/public named dark. Then create a folder named layouts in dark

The static layout

To create the basic layout you need to establish where each of the content areas will be on the

template. These correspond to all of the content that should be editable through the CMS. Figure 3

shows the design with the layout boxes in highlighted.


4/13

Digitalus

Copyrigh

Figure 3:

The next

generally

content t

Create a

and add t

Listing 2:

der'

class='

'header_log

lass='inner

grid_12'>

'

class='gr

Content'>

ttp://digit

CMS Tut

hted.

The process

age, and the

layouts folde

layout of th

d_6

alpha'>

luscms.com'

rial: Desi

is similar to

n replace thi

r named de

e dark templ

>

gning Te

riting any H

content wit

ault.phtm

te

plates 4

ML page; I

Digitalus

l. Open this ile

t


5/13


Copyright

2009,

Digitalus

Media

TOP

MAIN MENU

MAIN CONTENT

SIDEBAR CONTENT

Styles and Images

Create two new folders in your template named images and styles. Add two files to the styles folder;

style.css

for

your

basic

styles

and

nav.css

for

the

navigation.

Note that the entire layout is done for you with Grid 960; you simply have to deal with the look and feel.

Implement

the

design,

as

in

listing

3.

Then

copy

the

nav.css

file

from

the

default

template,

and

update

the link colors as in listing 4. Note that this template (including the graphics) is available for download on

our

community

site.

Listing 3: the base page styles in /templates/public/dark/styles/style.css

@CHARSET "ISO‐8859‐1";

body{

font‐family:Arial, san‐serif;

font‐size:13px;


6/13


Copyright

2009,

Digitalus

Media

line‐height:20px;

background:url(../images/body‐bg.png) repeat‐x #000;

}

#page{

margin‐top:10px;

padding‐bottom:20px;

background: url(../images/page‐bg.png) no‐repeat #000;

}

#header{

padding‐top:10px;

padding‐bottom:10px;

}

#header_logo{

}

#header_logo a img{

border:none;

margin‐left:20px;

}

#header_top{

text‐align:right;

color:#fff;

}

#page_body{

background:#222;

min‐height:400px;

color:#fff;

}

#nav{

background:url(../images/nav ‐bg.png) repeat‐x;

height:30px;

}


7/13


Copyright

2009,

Digitalus

Media

h1, h2, h3{

margin:10px;

}

h1{

font‐size:20px;

}

h2{

font‐size:16px;

}

h3{

font‐size:14px;

font‐style:italic;

}

p{

margin:10px;

}

Listing

4:

the

navigation

styles

in

/templates/public/dark/styles/nav.css

@CHARSET "ISO

‐8859

‐1";

ul#menu, ul#subnav, ul#subnav ul{

list‐style:none;

}

ul#menu{

padding:7px 20px 0 20px;

margin:0;

}

ul#menu li{

display:inline;

margin:0 10px;

}


8/13


Copyright

2009,

Digitalus

Media

ul#menu li a{

font‐weight:bold;

text‐decoration:none;

font‐size:14px;

color:#f5f5f5;

}

ul#menu li a:hover{

text‐decoration:underline;

color:#ccc;

}

ul#menu li a.selected{

color:#fff;

}

ul#subnav{

padding:10px;

}

ul#subnav li{

padding:2px 0;

margin:0 5px;

}

ul#subnav a{

text‐decoration:none;

color:#f5f5f5;

font‐weight:bold;

}

ul#subnav

a:hover{

text‐decoration:underline;

color:#ccc;

}

ul#subnav a.selected{

color:#fff;


9/13


Copyright

2009,

Digitalus

Media

}

ul#subnav ul{

padding: 5px;

margin:0;

}

ul#subnav ul a{

font‐weight:normal;

}

The page file

The next step is to create the default page file for your template. A page file is an XML file which tells the

CMS

which

layout

to

use

and

style

sheets

to

load.

This

enables

you

to

mix

and

match

among

your

template resources. You can also import style sheets from a remote location (outside your template

folder).

Create a new folder in your template named pages. Then create a new XML file in this folder named

default.xml. Then set the design name, layout, and style sheets, as in listing 5.

Listing 5: the default template page in templates/public/dark/pages/default.xml

default

default.phtml

styles/grid‐960/styles/960.css

styles/grid‐960/styles/reset.css

styles/grid‐960/styles/text.css

style.css

nav.css

Adding dynamic content

You can add dynamic content to your templates using one of three methods:

• Using good old fashioned PHP

• Using Zend View Helpers (and the Digitalus View Helpers)


10/13


Copyright

2009,

Digitalus

Media

•

Using

Digitalus

Tags

In

this

tutorial

we

will

be

using

Digitalus

tags.

These

tags

are

XML

tags

which

define

dynamic

content

areas. There are four main types of these tags:

• Controls: these are content controls, such as text areas.

• Modules: these render a module action.

• Navigation: these render navigational elements.

• Partial: these render partial scripts.

We will get started by adding the top content areas. You will need one for the header logo and one for

the header top. You can use the FCK editor control for both of these. Replace the static content that is in

these divs with the Digitalus Control tags, as in listing 5.

Next you need to add the main menu to the page. You do this with a Digitalus Navigation tag. Replace

the

static

text

in

the

nav

div

with

the

menu

tag,

as

in

listing

5.

Now you need to add the main content areas. Add a text control for the page headline, then another

FCK control for the main content. Follow this main content with a module selector, so you can render a

module

on

the

page

if

need

be.

The last editable section is the sidebar. The sidebar needs a field for the headline and the content that

goes above and below the submenu. Then you need to add the menu control for the submenu, as in

listing 6.

Listing 6: the dynamic template with the Digitalus Tags


11/13


Copyright

2009,

Digitalus

Media

Template security

You will note that there is an .htaccess file in several of the default template folders. This file denies

access

to

anything

outside

the

CMS

application

for

security

sake.

Copy

the

.htaccess

file

from

the

default

public

template’s

pages

folder

and

paste

it

into

the

pages

and

layouts

folders

in

your

template.

Once this is complete your template is ready to use.


12/13

Digitalus CMS Tut rial: Designing Te plates

Copyrigh

Using

When yo

change th

When

yo

template.

each cont

You will a

require m

the differ

listing 6).

Figure 4:

If you fill

be live no

2009, Digita

he Temp

create a ne

e template o

open

the

p

It did this b

rol tag.

lso notice th

any differen

ent page sec

the page edit

ut the form

w, and shoul

lus Media

late

page you a

n an existing

ge

to

edit

in

searching th

t under the

controls an

ions (as in fi

or with the p

with some s

d look somet

re given the

page by sele

the

CMS

you

e template f

age Options

putting the

ure 4), usin

age form loa

mple data a

hing like Fig

ption to sel

cting the Co

will

see

that

r Digitalus T

there are 3

all on one

the group a

ded

d go to the

re 5.

ct the templ

tent Templa

Digitalus

ge

ags; it then a

ontent secti

age can be

tribute on th

age on the f

ate to use. Y

te option.

erated

a

for

dded a contr

ons. Complic

nwieldy. Di

e Digitalus C

ront end you

u can also

for

your

ol to the for

ted pages c

italus separa

ntrol tags (s

12

for

n

tes

ee

template sh uld

t


13/13

Digitalus

Copyright

Figure 5:

Summ

Digitalus

template

these ne

2009, Digita

Dark templat

ry

.8 brings a r

easier

for

n

tools, creat

lus Media

e screenshot

efactored te

t

so

technic

ing a new te

plate syste

l

people

to

plate for th

CMS Tut

, which aim

evelop.

In

th

CMS.

rial: Desi

s to streamli

is

tutorial

yo

gning Te

e the proces

u

learned

ho

plates 13

s and make t

to

use

som

he

e

of

designing templates for digitalus cms.pdf

Documents