designing templates for digitalus cms.pdf
TRANSCRIPT
-
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
-
8/17/2019 Designing Templates for Digitalus CMS.pdf
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/
-
8/17/2019 Designing Templates for Digitalus CMS.pdf
3/13
Digitalus CMS Tutorial: Designing Templates 3
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.
-
8/17/2019 Designing Templates for Digitalus CMS.pdf
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
-
8/17/2019 Designing Templates for Digitalus CMS.pdf
5/13
Digitalus CMS Tutorial: Designing Templates 5
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;
-
8/17/2019 Designing Templates for Digitalus CMS.pdf
6/13
Digitalus CMS Tutorial: Designing Templates 6
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;
}
-
8/17/2019 Designing Templates for Digitalus CMS.pdf
7/13
Digitalus CMS Tutorial: Designing Templates 7
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/17/2019 Designing Templates for Digitalus CMS.pdf
8/13
Digitalus CMS Tutorial: Designing Templates 8
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;
-
8/17/2019 Designing Templates for Digitalus CMS.pdf
9/13
Digitalus CMS Tutorial: Designing Templates 9
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)
-
8/17/2019 Designing Templates for Digitalus CMS.pdf
10/13
Digitalus CMS Tutorial: Designing Templates 10
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
-
8/17/2019 Designing Templates for Digitalus CMS.pdf
11/13
Digitalus CMS Tutorial: Designing Templates 11
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.
-
8/17/2019 Designing Templates for Digitalus CMS.pdf
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
-
8/17/2019 Designing Templates for Digitalus CMS.pdf
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