Realizzare un Template per un sito creato in Typo3
In rete troviamo alcuni tutorial per creare passo per passo un template con Typo3. Un esempio è il Modern template building (in lingua inglese, spagnola, francese e tedesca).
Per essere sincero, l'ho trovato un po complicato nonostante sia ben definito ed i programmatori abbiano fatto un buonissimo lavoro. Ho deciso di spiegare a modo mio e il più semplice possibile come creare un Template per Typo3 includendo un esempio di Typoscript, di CSS e di Layout, posizionando già diversi Markers.
Nel Layout ho già inserito anche una rootline (Breadcrumbs), alcuni markers per richiamare un contenuto a piacere e un piede della pagina suddiviso in 4 campi.
Siete liberi di usare gli esempi di Layout e di Typoscript per creare un template a vostro piacere; questa guida dovrebbe servire per iniziare a capire come si crea un Template in Typo3, dalla trasformazione di un file HTML fino alla sua esposizione in rete in versione Typo3.
Imparare Typo3: cosa ci server per creare un template
Per creare questo esempio di template per il vostro sito, avete bisogno di un paio di cose:
- nozioni di base del CMS Typo3
- creare un file di CSS esterno che metteremo nella cartella: fileadmin/css/
- creare un file di index,html che metteremo nella cartella fileadmin/templates/
il file di CSS serve come esempio. In Typoscript definirò alcune "classi" e "id" cosichè tramite CSS sarà più semplice creare velocemente il Layout per il menu di navigazione a diversi livelli. Oltretutto dovrete poi completare il CSS a vostro piacere.
Spiegazione del template ed del suo Layout.
Il template è costituito da:
Colonna sinistra dove apparirà il menu di navigazione. Sotto il menu di navigazione, richiameremo oltretutto i "records" (contenuti che immetteremo nel backend) delle pagine che immetteremo nelle colonne sinistre.
Colonna di destra con, oltre a richiamare i "records" della colonna di destra nelle pagine del backend, avremmo anche la possibilità di esporre un contenuto a piacere che appaia su tutte le pagine del sito.
La testa del Sito: un records a piacere che apparirà su tutte le pagine del sito. Questo lo definiremo in un "records" nel Backend richiamando il contenuto centrale di una pagina
che definiremo in Typoscript tramite numero di identificazione (ID).
Il piede della pagina, footer. Qui il piede si suddivide in:
parte superiore di larghezza completa e parte inferiore diviso in 4 campi o aree dove possiamo inserire dei contenuti a piacere che appaino su tutte le pagine. Questi contenuti vanno inseriti direttamente nel file di Index.html.
Se desiderate anche qui avere un contenuto che potete richiamare da un recrods dal backend, ho scritto una breve definizione su come richiamare un contenuto posizionato su una pagina a piacere tramite ID: records e contenuti tramite page ID.
Parte centrale della pagina: il contenuto del sito. Qui appariranno tutti i records che nel Backend inseriremo nella colonna centrale.
Qui potete vedere due Screenshots del Template e la loro suddivisione. Il primo è in formato HTML mentre nel secondo rimangono solamente i markers che servono per creare il template in Typo3.
I colori come per es. lo sfondo, le colonne e il footer, servono solo per avere un'idea della suddivisione del Layout. Nel file di CSS si possono togliere o cambiare a piacere.
- Es. Template HTML per Typo3
- Es. Typo3 Template con markers
Preparazione del file HTML per Typo3.
Per preparare il template a Typo3, dobbiamo diciamo ripulire il file di HTML.
Cancellando tutte le cose che non servono dal Layout, lasciamo solo i markers racchiusi dentro i "div" del Layout, che serviranno a richiamare i diversi contenuti che immetteremo nel Backend.
I markers sono stringe che iniziano e finiscono con 3 simboli "#": esempio ###CONTENUTO###.
Eccovi qui il codice HTML pulito e preparato per il template:
-
Il file di HTML per il nostro Template
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout CSS Typo3</title>
<link rel="stylesheet" type="text/css" href="esempio.css" />
</head>
<body>
<!-- ###DOCUMENTO### begin -->
<div id="contenuto-esterno">
<div id="rootline">
###ROOTLINE###
</div>
<div id="header">
###HEADER###
</div>
<div id="leftcolumn">
###NAV_SINISTRA###<br><br>
###SINISTRA###
</div>
<div id="content">
###CONTENUTO###
</div>
<div id="rightcolumn">
###DESTRA###<br><br>
###CONT_DESTRO###
</div>
<div id="footer">
<div id="copyright">###FOOTER###</p></div>
<div id="footer-tabs"><p>footer primo contenuto</p></div>
<div id="footer-tabs"><p>footer secondo contenuto</p></div>
<div id="footer-tabs"><p>footer terzo contenuto</p></div>
<div id="footer-tabs"><p>footer quarto contenuto</p></div>
</div>
</div>
<!-- ###DOCUMENTO### end -->
</body>
</html>
Inizio e fine del documento
Come noterete oltre ai markers, abbiamo aggiunto nel file anche le subparts, cioè l'inizio e la fine del documento tramite due stringe:
<!-- ###DOCUMENTO### begin -->
<!-- ###DOCUMENTO### end -->
-
File di CSS necessario per il template
-
* { padding: 0; margin: 0; }
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-top:10px;
margin-bottom:10px;
background-color:#000000;
}
p {
padding:0px;margin:0px;
}
#contenuto-esterno {
margin: 0 auto;
width: 1024px;
background-color:#ffffff;
}
#content {
float: left;
color: #333;
background: #FFFFFF;
height: 350px;
width: 614px;
display: inline;
margin:10px 10px 20px 10px;
}
#header {
color: #333;
width: 1014px;
float: left;
height: 75px;
background: #f1eee4;
padding:5px 5px 5px 5px;
}
#rootline {
float: left;
width: 1014px;
height: 21px;
color: #333;
background: #eaeaea;
padding:5px 5px 0px 5px;
font-size:11px;
}
#leftcolumn {
color: #333;
background: #ebd7cb;
height: 350px;
width: 200px;
float: left;
padding:10px 5px 20px 5px;
}
#rightcolumn {
color: #333;
background: #c7c4bc;
height: 350px;
width: 170px;
float: left;
padding:10px 5px 20px 5px;
}
#footer {
font-size:11px;
text-align:center;
width: 1014px;
height: 140px;
clear: both;
color: #333;
background: #c8cbdb;
padding:5px 5px 5px 5px;
}
#copyright {
width:1014px;
font-size:11px;
text-align:center;
clear:both;
height:20px;
background: #d3b8c2;
padding:2px;
}
#footer-tabs{
width:233px;
float:left;
background:#6b6659;
height:90px;
padding:5px;margin:5px;
text-align:left;
color:#ffffff;
}
Una volta trasformato il file HTML e preparato il file di CSS e posti tramite FTP nell'apposita cartella sul Webserver, possiamo passare alla definizione del TS (Typo Script).
Nel Backend di Typo3 andiamo sotto la voce "web" e clicchiamo su "tempate" poi passiamo alla colonna di lato dove troviamo l'albero con la pagina iniziale chiamata "root".
Qui schiacciamo su: "Create Template for a New Site", o in caso abbiate già un template, allora cliccare su: "Click here to Edit the whole template record".
Sotto "Template title" possiamo inserire un titolo del template.
La voce "Rootlevel" deve essere cliccata, cosi da definire che questo template è il template principale del sito.
Sotto la Tab "include" troviamo: "include static (from extensions)" . Qui dobbiamo includere: "CSS styled content" semplicemente cliccandoci sopra una volta.
È possibile che nell'ultima versione di Typo3 dopo l'installazione queso file sia già incluso automaticamente o che con l'ultima versione, non servano più. Orientarsi alla versione che si sta usando.
Quello che a noi ora interessa è la voce "Setup". Questo campo è la cosa più importante dove avviene la configurazione del Template tramite Typoscript.
I commenti in Typoscript si scrivono ponendo davanti al testo il simbolo "#" e, molto importante, mai nella stessa riga di una stringa di codice. Per ogni riga di commento, deve essere aggiunto davanti il simbolo #.
Ed ora possiamo inserire il nostro codice di Typoscript nel campo di Setup. Ho immesso alcuni commenti che vi aiuteranno a capire a cosa appartengono le diverse stringe di codice.
Il codice di Typoscript necessario per il template
-
Codice Typo Script per il nostro Template
-
# ---------------------------- PAGE START
page = PAGE
page {
#------- Impostazioni generali della pagina
bodyTag = <body>
#richiamiamo il file di CSS posizionato in fileadmin/css/
stylesheet = fileadmin/css/main.css
#------- definire i MetaTags
meta.AUTHOR = nome dell'autore
meta.description = TEXT
meta.description.field = description
meta.keywords = TEXT
meta.keywords.field = keywords
meta.robots = TEXT
meta.robots = index, follow
#------- integrare il design
10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/template/index.html
10.workOnSubpart = DOCUMENTO
10.marks {
#------- Navigazione di sinistra
NAV_SINISTRA = HMENU
NAV_SINISTRA {
stdWrap.required = 1
stdWrap.prepend = TEXT
stdWrap.prepend {
wrap = <div class="leftboxmenu"><h3> |</h3>
data = leveltitle:1
}
wrap = |</div>
entryLevel = 1
1 = TMENU
1 {
wrap = <ul>|</ul>
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
ACT = 1
ACT.wrapItemAndSub= <li>|</li>
CUR = 1
CUR.wrapItemAndSub= <li class="leftmenu_aktiv">|</li>
CUR.allWrap = <p>|</p>
CUR.doNotLinkIt = 1
SPC = 1
SPC {
before.dataWrap = <li class="spacer"><div class="menuespacer"> </div></li>|
doNotShowLink = 1
}
}
2 <.1
2 {
wrap = <ul class="submenu">|</ul>
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
ACT = 1
ACT.wrapItemAndSub= <li class="submenu_act">|</li>
CUR = 1
CUR.wrapItemAndSub= <li class="submenu_act">|</li>
CUR.allWrap = <span>|</span>
CUR.doNotLinkIt = 1
SPC = 1
SPC {
before.dataWrap = <li class="spacer"><div class="menuespacer"> </div></li>|
doNotShowLink = 1
}
}
3 <.2
}
#------- Rootline
ROOTLINE = COA
ROOTLINE {
#------- richiamare la rootline in posizione 20
20 = HMENU
20 {
special = rootline
special.range = 1|-1
includeNotInMenu = true
1 = TMENU
1 {
noBlur = 1
NO.allWrap= |*| | » |*| |*|
CUR = 1
CUR.doNotLinkIt = 1
}
}
}
#------- richiamare il contenuto centrale del sito
CONTENUTO = CONTENT
CONTENUTO {
table = tt_content
select.orderBy = sorting
select.where = colPos = 0
select.languageField = sys_language_uid
}
#------- richiamare il contenuto sotto la navigazione di sinistra
SINISTRA = CONTENT
SINISTRA {
table = tt_content
select.orderBy = sorting
select.where = colPos = 1
select.languageField = sys_language_uid
}
#------- richiamare il contenuto sulla colonna di destra
DESTRA = COA
DESTRA.10 = CONTENT
DESTRA.10 {
table = tt_content
select.where = colPos = 2
select.orderBy = sorting
select.languageField = sys_language_uid
}
#------- richiamare un contenuto posizionato su una pagina
#------- a piacere tramite ID
CONT_DESTRO.20 = CONTENT
CONT_DESTRO.20 {
table = tt_content
select.orderBy = sorting
#------- richiamiamo il contenuto centrale della pagina
#------- con ID 5 per la colonna destra
select.pidInList = 5
select.languageField = sys_language_uid
}
#------- richiamare un contenuto posizionato su una pagina a
#------- piacere tramite ID da immettere nell'header della pagina
HEADER.40 = CONTENT
HEADER.40 {
table = tt_content
select.orderBy = sorting
#------- richiamiamo il contenuto centrale della pagina con ID 6
select.pidInList = 6
select.languageField = sys_language_uid
}
#------- chiusura marks
}
#------- chiusura page
}
Ed eccoci al risultato finale del tutorial
Una volta immesso il codice di Typoscript, caricato sul server il file di CSS e il file di index.html, possiamo vedere nel backend il risultato.
Quello di cui ora abbiamo bisogno è il creare le pagine singole. Creando ogni pagina noteremo che esse appariranno nel menu di navigazione sinistro.
Non ci resta poi che cambiare a piacere il file di CSS per creare un Layout personalizzato ed iniziare a immettere i nostri contenuti.
Con la versione di Typo3 4.4 è possibile durante l'installazione avere già un Layout di base. Molto consigliato per coloro che non hanno ancora esperienza e desiderano iniziare subito con la presentazione del proprio sito in rete. Questo template è poi possibile cambiarlo usando i rispettivi marker o modificando il file di CSS e il codice di Typoscript che si trova nel template principale della pagina Root.