Se stai leggendo questo articolo, molto probabilmente perché sei stanco di template responsive gratuiti, pieni di bug, sviluppati con sintassi HTML e CSS poco pulita, pieni di errori del codice, e spesso con link degli sviluppatori nel footer, collegati a siti web di bassa reputazione difficili da rimuovere.
In questa guida cercherò di illustrarti in modo semplice ma al tempo stesso dettagliato, le tecniche e i passaggi fondamentali per creare un template responsive da zero per joomla 3.8 con del codice pulito e come installarlo nel CMS, ti spiegherò anche la struttura di base, i file che lo compongono e le righe di codice necessarie per le funzioni tipiche per un sito web con design responsivo.
Prima di iniziare, per comprendere meglio questo tutorial, dovresti conoscere, le basi dei principali linguaggi HTML, CSS e PHP.
Puoi vedere la demo del template responsive realizzato con il framework Bootstrap 3 al seguente link. Il sito web è in joomla 3.8, come puoi vedere ha una grafica minimale, uno stile essenziale, spogliato dal superfluo, per dare massimo spazio alla struttura degli elementi.
- A cosa serve il Framework Bootstrap 3
- Sviluppo rapido del layout con Bootstrap 3
- Convertire il layout in un template joomla 3.6
- Inserire le posizioni modulo nel template
- Abbellire l’aspetto estetico del sito web con i file CSS
- Risoluzione dei problemi che possono verificarsi con l’uso di Bootstrap 3
- Come installare il template nel CMS Joomla
- Tool per verificare se un sito è compatibile con i principali browser e dispositivi mobili
A cosa serve bootstrap 3
Bootstrap è un framework, contenente una serie di elementi e funzioni basati su HTML, CSS e JS per la creazione di interfacce Web dal design responsive e mobile-first. Bootstrap 3 rappresenta una delle soluzioni più utilizzate per creare layout che si adattano dinamicamente, in base al dispositivo utilizzato, sia esso desktop, tablet o smartphone.
In questo post non ti spiegherò le basi del framework Bootstrap 3, per un motivo molto semplice, è stato trattato innumerevoli volte, ma voglio consigliarti un tutorial sul sito w3schools.com/bootstrap, che può aiutarti a muovere i primi passi con il framework Bootstrap 3.
Sul sito web getbootstrap.com puoi trovare la documentazione e i link per il download dell’ultima release ufficiale.
Sviluppo rapido del layout bootstrap
Utilizzare Bootstrap in un layout non è molto complicato, ma richiede la conoscenza di regole e sintassi dei principali linguaggi HTML, CSS, esistono però degli editor online che permettono di generare tutta la struttura grafica, senza dover scrivere una riga di codice css e html, e integrarlo con Bootstrap in modo semplice, veloce e automatico.
Voglio consigliarti un editor chiamato Layoutit, uno strumento online utilizzabile gratuitamente, con cui è possibile realizzare in modo automatico, un layout basato su Bootstrap con estrema facilità.
Collegati al sito layoutit.com e clicca sul pulsante START NOW WITH BOOTSTRAP 3 per accedere ad un nuovo progetto, se vuoi creare una schermata nuova, clicca sul pulsante clear.
L’interfaccia dell’editor layoutit si divide in due aree principali:
- L’area di lavoro, che genera in tempo reale l’anteprima del layout, permettendo di selezionare, modificare, cancellare, ogni elemento, contenuto o struttura, presente nell’area di lavoro
- La barra laterale sinistra, suddivisa in quattro tab principali: Grid system, Base CSS, Components, Javascript, dove vengono elencati griglie, immagini, form, pulsanti, Breadcrumb, Thumbnails, Carousel, che possono essere utilizzati nell’area di lavoro, semplicemente utilizzando l’interfaccia Drag And Drop.
Voglio soffermarmi sulla tab Grid system, perché è proprio quella che dovrai utilizzare per creare il layout web.
In questa sezione è possibile selezionare e trascinare le griglie all’interno dell’area contenuti, le griglie non sono altro che una suddivisione di righe e colonne collocate all’interno di un contenitore. L’utilizzo della griglia è dovuto al framework Bootstrap, che si basa su un sistema composto da 12 colonne con una larghezza espressa in percentuale.
Bene, ora che ho fatto un’introduzione e una panoramica sulle funzionalità dell’editor Layoutit, inizio ad elencare le principali sezioni del layout.
la struttura grafica ha bisogno di quattro righe principali:
Header sezione formata da due colonne: nella colonna di sinistra, verrà inserito un contenuto grafico o testuale, formato dal nome o dal logo del sito web. La colonna di destra, includerà la barra di navigazione, contenente link alle pagine principali del sito web.
Slideshow, area formata da una singola colonna, contenente il modulo per la sequenza di immagini che scorrono automaticamente.
Content, è la parte principale del layout, formata da due colonne, la prima è l’area contenuti, la seconda riservata alla barra laterale (sidebar).
Footer questa sezione è formata da una sola colonna, è conterrà le Informazioni del copyright, indirizzo e dati societari e posta elettronica.
È arrivato il momento di inserire le griglie che corrispondono agli elementi del nostro layout.
Ogni elemento viene inserito tramite Tab Grid System.
Il primo elemento è l’header, utilizzando l’interfaccia drag & drop, trascina dal grid system, una griglia 6/6, cioè formata da una riga e da due colonne, nel punto desiderato dell’area contenuti e precisamente all’interno del Container.
Il secondo elemento è lo Slideshow, con la funzionalità del drag and drop sposta una griglia 12, formata da una riga e da una colonna sempre all’interno del contenitore.
Il terzo elemento è il Content, sempre con il drag & drop aggiungi una griglia 8/4, formata da una riga e da due colonne, con larghezza diversa, all’interno dell’area contenuti.
Il quarto e ultimo elemento è il Footer, inserisci una griglia 12 nel layout.
Il risultato sarà questo
Il layout è terminato, premendo il tasto Download comparirà un popup, con il codice sorgente, copialo e incollalo in un file nominato index.php.
<div class="container-fluid">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
Come trasformare il layout HTML in un template joomla 3.8
Creata la struttura grafica del sito web, bisogna apportare alcune modifiche e inserire il codice necessario per trasformarla in un markup joomla.
Con un editor di testo (Blocco note, Notepad++, ecc) apri il file index.php.
Inserisci la prima stringa , che verifica se il file viene richiamato all’interno del CMS Joomla, serve per aumentare la sicurezza del template.
<?php defined( '_JEXEC') or die('Restricted access');?>
Successivamente inserisci la stringa, che fornisce le informazioni sul tipo di documento, nel nostro caso HTML5.
<!-- /wp:html -->
<!-- wp:paragraph -->
<p>Crea il <strong>tag html</strong>, i parametri all'interno del tag definiscono la lingua del sito.</p>
<!-- /wp:paragraph -->
<!-- wp:html -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
Dopo la dichiarazione del tag html, devi creare la sezione head, al suo interno, inserisci la seguente stringa
<jdoc:include type="head"/>
che include nella pagina, il title, meta tag, e alcuni file javascript.
Sempre all’interno del tag head copia questa riga di codice
<meta name="viewport" content="width=device-width, initial-scale=1">
che consente alla pagina di adattarsi ai browser dei dispositivi mobili.
Le seguenti righe di codice collegano il layout ai fogli di stile.
Queste due stringhe sono i file css di sistema.
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
Questa istruzione inserisce il file template.css, che raccoglie le regole che definiscono gli attributi di formattazione (colore, font, bordi etc etc) applicabili al template.
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
É arrivato il momento di integrare nel file index i fogli di stile di Bootstrap 3,
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.min.css" type="text/css" />
Esiste un’altra soluzione per utilizzare il framework Bootstrap in un sito web, ed è quella di includere i file richiamandoli da una CDN(Content Delivery Network), ovvero da un server che mette a disposizione questi file per il pubblico. Il vantaggio di utilizzare questa soluzione e la riduzione del tempo di caricamento delle pagine.
questa riga di codice permette di richiamare il file Bootstrap da CND
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Per sfruttare le novità introdotte da HTML5, e permettere una migliore resa dei vari elementi HTML nei diversi browser (cross-browser), ti suggerisco di includere un piccolo file CSS chiamato Normalize.css. Scarica l’ultima versione dal sito: necolas.github.io/normalize.css/, copialo in un file chiamato normalize.css e inseriscilo nella cartella CSS del template.
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/normalize.css" type="text/css" />
anche questo file può essere richiamato da una CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css ">
Ora non ti resta che chiudere il tag head.
La sezione head verrà in questo modo.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/normalize.css" type="text/css" />
</head>
con istruzioni CDN
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css ">
</head>
A questo punto non resta che impostare il body, per inserire i file javascript, consiglio sempre di metterli alla fine del tag.
il primo file è quello di bootstrap
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/bootstrap.min.js"></script>
per richiamarlo da una CDN
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
il secondo file è scripts.js
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
la sezione body verrà in questo modo.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/bootstrap.min.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/scripts.js"></script>
</body>
con istruzioni CDN
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/scripts.js"></script>
</body>
Inserire le posizioni modulo nel template del CMS
Le posizioni, non sono altro che dei segnaposti che permettono di posizionare in determinate aree all’interno della pagina, i contenuti dinamici generati dai componenti o moduli installati del template.
Bene. Adesso vediamo come inserire queste speciali istruzioni.
Il codice che devi inserire è definito Jdoc statements,
<jdoc:include type="modules" name="mainmenu" style="none" />
Questo è un tipico jdoc statement che puoi trovare in un classico tema di joomla, i vari attributi presenti in questa riga di codice sono:
- L’attributo type specifica che tipo di oggetto deve essere inserito nella posizione, accetta i seguenti valori:
- module, utilizzato per creare una posizione, a cui verranno associati i moduli.
- component, adoperato per visualizzare i contenuti generati dai componenti installati in joomla, per citarne alcuni gli articoli, gallerie di foto.
- head, questo elemento è stato già trattato, permette di inserire nella pagina web, il title, e i meta tag.
- message usato per mostrare i messaggi di errore ed i rendering di sistema generati dal CMS.
- L’attributo style, modifica l’output HTML generato dal modulo, ammette i seguenti valori: rounded, none, horz, table, xhtml, outline e html5, per maggiori informazioni visita questa pagina web docs.joomla.org/Standard_Module_Chromes
-
L’attributo name, identifica la posizione e serve da riferimento per la disposizione dei moduli, dal backend di Joomla.
Questo è l’html della sezione body, con i vari jdoc statements. Come puoi vedere nel markup HTML sono stati aggiunti alcuni attributi Id, che serviranno per gestire il file css.
<body>
<div class="container-fluid">
<div class="row" id="header">
<div class="col-md-6" id="logo"><h1>Nome Sito Web</h1></div>
<div class="col-md-6" id="headermenu"><jdoc:include type="modules" name="mainmenu" title="Main Menu" style="none"/></div>
</div>
<div class="row" id="slideshow">
<div class="col-md-12"><jdoc:include type="modules" name="slideshow" title="slideshow" style="html5"/></div>
</div>
<div class="row" id="areacontent">
<div class="col-md-8" id="content">
<jdoc:include type="modules" name="breadcrumb" title="Percorso di navigazione" style="none"/>
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div class="col-md-4" id="sidebar_right"><jdoc:include type="modules" name="sidebar" title="Menu sidebar" style="html5"/></div>
</div>
<div class="row" id="footer">
<div class="col-md-12"><jdoc:include type="modules" name="footer" title="Footer" style="html5"/></div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/scripts.js"></script>
</body>
Creare il file templateDetails.xml
Il templateDetails è un file XML che fornisce informazioni sul template, contiene al suo interno l’elenco delle posizioni dei moduli, le cartelle e i file necessari per il tema.
Un esempio completo di questo file è il seguente:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3.6" type="template" client="site">
<name>miotemplatebootstrap</name>
<creationDate>07-27-2016</creationDate>
<author>Francesco Di Giovanni</author>
<authorEmail>francescodigiovanni@example.com</authorEmail>
<authorUrl>http://www.fdigweb.it/</authorUrl>
<copyright>Francesco Di Giovanni 2016</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>Joomla Template bootstrap</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>images</folder>
<folder>css</folder>
<folder>js</folder>
<folder>fonts</folder>
</files>
<positions>
<position>breadcrumb</position>
<position>slideshow</position>
<position>mainmenu</position>
<position>sidebar</position>
<position>footer</position>
</positions>
</extension>
il file templateDetails si divide in tre sezioni principali:
La prima sezione contiene le seguenti informazioni, nome del template, data di creazione, informazioni di contatto (nome, email, sito web dell’autore), numero di versione e una breve descrizione.
La seconda sezione include tutti i file e le cartelle presenti nella root principale della directory del template.
La terza sezione contiene l’elenco delle posizioni definite nel codice html della pagina index.php
Abbellire l’aspetto estetico del sito web con i file CSS
Quello che manca ora è il foglio di stile, ovvero il file CSS (Cascading Style Sheets), al cui interno sono elencate le regole che servono a migliorare l’aspetto della pagina web. Attraverso i CSS si possono definire colori, dimensioni, immagini di sfondo e tutto quello che concernere l’aspetto visuale degli elementi presenti nel sito web.
Ti segnalo una guida dedicata all’uso dei fogli di stile, che possono aiutare ad approfondire la tua conoscenza sull’argomento.
www.w3schools.com/css/default.asp
Crea il file template.css in una cartella chiamata CSS e aggiungi le seguenti classi e righe di codice all’interno del documento.
Le seguenti istruzioni CSS, puoi prenderle come punto di partenza e modificarli come meglio credi, adattandoli ai tuoi gusti.
#logo{
padding:20px;
}
#header {
height: 90px;
background-color:#000;
color:#999;
text-align:center;
}
#areacontent {
max-width:1200px;
margin:20px auto;
}
#sidebar_right {
text-align: center;
min-height: 400px;
}
#footer {
min-height: 200px;
background-color:#000;
color:#999;
text-align:center;
padding-top:20px;
}
@media only screen and (min-width: 768px) {
#header #menuprincipale>ul > li{
display: inline;
}
#header #menuprincipale>ul>li>a{
display: inline;
}
#header #menuprincipale.collapse {
display: inline;
}
#headermenu{
margin-top: 35px;
}
#content {
text-align: left;
min-height: 400px;
border-right: 2px solid #999999;
}
/* §§§§§§§§§§§§§§§§§§§§§§§§ - Form Contatti - §§§§§§§§§§§§§§§§§§§§§§§§ */
#areacontent .form-horizontal .control-label {
text-align: left;
}
/* §§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ */
}
@media only screen and (max-width: 767px) {
#titleicon{
display: block;
}
#header {
height: 140px;
}
#logo{
padding:10px;
}
#headermenu .navbar-toggle{
border: 2px solid #fff;
margin:0;
float:none;
}
#headermenu{
z-index: 6;
padding:0;
}
#txtnavbartoggle{
width:90px;
float:right;
margin-top: -4px;
}
#txtnavbartoggle p{
margin:0 0 0 30px;
font-size:18px;
}
}
Personalizzare il menu principale
Creata la veste grafica del template, bisogna affrontare più nello specifico il menù principale, il classico menu orizzontale, generalmente posizionato nelle vicinanze dell’header.
Per la barra di navigazione bisogna creare gli stili css e gli scripts js, che permettono di modificare l’aspetto ma soprattutto renderlo cross-device.
Nel file index.php bisogna modificare l’html della sezione body.
<body>
<div class="container-fluid">
<div class="row" id="header">
<div class="col-md-6" id="logo"><h1>Nome Sito Web</h1></div>
<div class="col-md-6" id="headermenu">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menuprincipale">
<div id="txtnavbartoggle"><p>MENU</p></div>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="menuprincipale" class="collapse">
<jdoc:include type="modules" name="mainmenu" title="Main Menu" style="none"/>
</div>
</div>
</div>
<div class="row" id="slideshow">
<div class="col-md-12"><jdoc:include type="modules" name="slideshow" title="Slideshow" style="html5"/></div>
</div>
<div class="row" id="areacontent">
<div class="col-md-8" id="content">
<jdoc:include type="modules" name="breadcrumb" title="Percorso di navigazione" style="none"/>
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div class="col-md-4" id="sidebar_right"><jdoc:include type="modules" name="sidebar" title="Menu sidebar" style="html5"/></div>
</div>
<div class="row" id="footer">
<div class="col-md-12"><jdoc:include type="modules" name="footer" title="Footer" style="html5"/></div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/scripts.js"></script>
</body>
La modifica ha interessato il div con l’id headermenu che costituisce la barra di navigazione, formata da due sezioni:
La prima sezione contiene il pulsante con la classica icona ad hamburger, che permette l’attivazione del menu sui dispositivi mobili, mentre su desktop rimane invisibile, come puoi notare ho inserito varie classi e attributi che permettono al pulsante di interagire con i file css e js di bootstrap, per esempio class=”navbar-toggle” data-toggle=”collapse” e data-target=”#menuprincipale” il valore di quest’ultimo attributo deve corrispondere all’ID del menu.
La seconda sezione, quella con l’id “menuprincipale” gestisce il menu vero e proprio.
Se vuoi approfondire le classi di bootstrap ti linko una risorsa interessante http://getbootstrap.com/javascript/
Questo è il codice CSS del menu, da inserire nel file template.css
/* §§§§§§§§§§§§§§§§§§§§§§§§ - MENU PRINCIPALE - §§§§§§§§§§§§§§§§§§§§§§§§ */
#menuprincipale a:link, #menuprincipale a:visited, #menuprincipale a:hover{
font-size:20px;
}
.icon-bar{
background-color: #fff;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
}
#menuprincipale .nav>li>a:focus, #menuprincipale .nav>li>a:hover{
text-decoration: none;
background-color: #000;
padding-bottom:30px;
padding-top:30px;
color:#fff;
}
#menuprincipale .nav>li.active>a{
text-decoration: none;
color:#fff;
}
#menuprincipale .nav-child>li>a:focus, #menuprincipale .nav-child>li>a:hover, #menuprincipale .nav-child>li>a:active {
background-color: #fff;
text-decoration: none;
}
#menuprincipale .nav-child {
display:none;
background-color:#fff;
position: absolute;
left: 0px;
padding: 0;
list-style: none;
z-index:20;
top: 47px;
width: 100%;
}
#menuprincipale .nav-child>li {
padding:10px;
}
@media only screen and (min-width: 768px) {
#menuprincipale .nav-child {
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-bottom-right-radius: 10px;
}
}
@media only screen and (max-width: 767px) {
#menuprincipale .nav>li>a:focus, #menuprincipale .nav>li>a:hover, #menuprincipale .nav>li>a:active {
background-color: #eee;
}
#menuprincipale .nav-child>li>a:focus, #menuprincipale .nav-child>li>a:hover, #menuprincipale .nav-child>li>a:active {
background-color: #eee;
}
#menuprincipale .nav-child {
width:100%;
top:80px;
}
#menuprincipale{
background-color: #AAADAC;
margin-top:9px;
}
}
/* §§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ */
Il menu non è ancora terminato, spesso nella barra di navigazione sono presenti elementi più complessi, come i menu a tendina. Per gestire questi menu multi-livello, ho inserito del codice jQuery in un file chiamato scripts.js, crealo in una cartella chiamata js e inserisci le seguenti linee di codice.
jQuery(document).ready(function () {
jQuery('.parent').hover(function() {
jQuery('ul', this).stop(true, true).delay(100).slideToggle(500);
}, function() {
jQuery('ul', this).stop(true, true).slideUp(400);
}
);
});
le classi che si richiama lo script sono quelle di default di joomla.
Risoluzione dei problemi che possono verificarsi con l’uso di Bootstrap 3
Un problema che si verifica, quando si utilizza un template con Bootstrap 3, è il duplice caricamento del file bootstrap.min.js. Il Jdoc statements
<jdoc:include type="head"/>
inserisce nella pagina oltre al tag title ed alcuni meta tag, anche il file javascript di Bootstrap 2 che va in conflitto con il bootstrap.min.js 3.
Per evitare questo conflitto, bisogna inserire nel file index del template, alcune righe di codice php, che impediscono il caricamento del file js di Bootstrap caricato da joomla.
Il codice deve essere posizionato all’inizio del file.
<?php
$doc= JFactory::getDocument();
unset($doc->_scripts[JURI::root(true).'/media/jui/js/bootstrap.min.js']);
?>
Come installare il template nel CMS Joomla
Il tema di joomla 3.8 è quasi terminato, come puoi vedere dallo screenshot qui in basso, il template è composto da due file index.php e templateDetails.xml e da quattro cartelle CSS, JS, fonts, images, quest’ultime fonts, images sono vuote, è consigliabile inserire al loro interno un file index.html contenente il seguente codice
<html><body></body></html>
in modo tale che le cartelle vuote non siano navigabili dal web,
non
resta ora che comprimere i file nel formato .targ.gz o .zip, con un
software per la gestione degli archivi compressi (Winzip, 7zip ecc), e
selezionare i file da zippare.
digita il nome che intendi attribuire all’archivio nel campo di testo, per esempio miotemplatebootstrap.
digita il nome che intendi attribuire all’archivio nel campo di testo, per esempio miotemplatebootstrap.
Il
file zippato, è pronto per l’installazione, la procedura per caricarlo
nel CMS è simile a come installare qualsiasi altra estensione, quindi
accedi al pannello di amministrazione di joomla, attraverso il menu Estensioni clicca sulla voce Gestione carica il template, e procedi all’installazione, successivamente dalla pagina ESTENSIONI– template impostalo come predefinito.
Quando si installa un template è fondamentale, specialmente nella fase iniziale, collaudare tutto il sito web in modo da rilevare bugs o conflitti con altre estensioni presenti nel CMS, ma sopratutto rendere le pagine del sito web realmente cross browsing e cross-device.
Per verificare la corretta compatibilità delle pagine del sito web con i browser più usati (Chrome, Firefox, Internet Explorer, Safari, Opera), voglio consigliarti BrowserShots un tool online che ti permette di effettuare dei test cross browser. Questo servizio consente di generare svariate screenshot del tuo sito web, effettuate con differenti browser e diversi sistemi operativi.
Per verificare la compatibilità delle pagine web con il maggior numero possibile di dispositivi (smartphone ,tablet, laptop, desktop), voglio segnalarti alcune delle migliori risorse online per effettuare il test cross-device:
- ipadpeek.com Servizio online, grazie al quale è possibile verificare la compatibilità con i dispositivi targati Apple.
- ready.mobi Si tratta di un tool online, tra le sue funzioni principali oltre a testare le pagine del sito web su smartphone e tablet, permette di controllare le immagini da ottimizzare, la cache per velocizzare il caricamento della pagina e molte altre cose.
- quirktools.com/screenfly è un altra applicazione online che consente di simulare e personalizzare il layout delle pagine web su diversi dispositivi PC, tablet, smartphone o TV.
Creare un template joomla: La tua opinione
In questo tutorial, ti ho fatto scoprire come si sviluppa un template joomla con il framework Bootstrap 3, rendendo il tuo sito internet responsive, cioè con la capacità di adattarsi alle caratteristiche, alle dimensioni, del dispositivo adoperato dall’utente che naviga il sito web, migliorando l’accessibilità e la visualizzazione dei contenuti.
Aspetto la tua opinione nei commenti, come sempre.
Grazie per l’attenzione e Buon Lavoro!
