Create un nuovo stile usando il template Atomic

Il template Atomic è uno scheletro per il vostro template personale. E’ composto da:

• /htdocs/templates/atomic
  component.php - la stampa a vista del template
  error.php - la pagina di errore del template
  favicon.ico - l’icona del sito (Favicon)
  index.html - un file di sicurezza per la visualizzazione di una pagina vuota quando la cartella viene inserita direttamente (può essere anche configurato dal web server, di solito è così)
  index.php - la pagina principale del template
  templateDetails.xml - Il file di configurazione contenente tutte le informazioni riguardo i file, opzioni e posizioni necessarie per mostrare il template nella gestione template, e più tardi creare un pacchetto zip installabile
  template_preview.png - l’immagine di anteprima del template, visualizzata nella gestione template
  template_thumbnail.png - l’immagine in miniatura, visualizzata nella gestione template
• /htdocs/templates/atomic/css
  la cartella per i file CSS
• /htdocs/templates/atomic/html
  la cartella per Override - Sostituire i file - Atomic fornisce le Override - Sostituzioni per pochi moduli
• /htdocs/templates/atomic/images
  la cartella per le immagini
• /htdocs/templates/atomic/js
  la cartella per i file JavaScript
• /htdocs/templates/atomic/languages
  la cartella per i file di lingua - Atomic viene fornito di base con i file di lingua Inglese.

File index.php del template principale

Il nome del file di questo layout deve essere index.php cercato da Joomla! per incorporare <jdoc> e i comandi PHP. Sono necessari tutti i tag HTML già integrati e commentati. Potete cambiare il contenuto del file in base alle vostre esigenze.

Per farvi un’idea, diamo una rapida occhiata:

Alla linea 24 potete scegliere se volete usare la struttura del progetto CSS o no.

Alle linee 50, 55, 61 potete vedere le posizioni con nomi i speciali che il template offre (atomic-search, atomic-topmenu, ...). Se volete usare questi nomi dovete assegnare i vostri moduli a queste posizioni. Se volete cambiare i nomi, potete farlo nel file templatedetails.xml.

Alla linea 24 vedrete:

echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js

Joomla! conosce i valori in baseurl così bene come il nome del vostro template, e potete accedervi quando ne avete bisogno.

Alla linea 46 vedrete:

echo $app->getCfg('sitename');

Vi dirà il nome del vostro sito.

Alla linea 48 vedrete:

if($this->countModules('atomic-search')) ...

Conta la quantità dei moduli nella posizione atomic-search. Viene usato per regolare il vostro layout nelle differenti situazioni.

Alla linea 50 vedrete:

<jdoc:include type="modules" name="atomic-search" style="none" />

Questo è un comando <jdoc> che esiste soltanto come spazio del nome in Joomla!. Viene usato per inserire l’uscita HTML del tipo specificato negli attributi. In questo caso significa che l’output di tutti i moduli sono assegnati alla posizione atomic search del template. L’attributo di stile viene chiamato module chrome e può avere questi valori:

• table - L’uscita viene visualizzata in una tabella.
• horz - L’uscita viene visualizzata orizzontalmente in una cella di una tabella circostante.
• xhtml - L’uscita è in un elemento <div> XHTML.
• rounded - L’uscita è in un formato visualizzato con angoli arrotondati. La classe di questi elementi è rinominata da moduletable a module.
• none - Senza formattazione
• outline - Il tipo di visualizzazione per l’anteprima (?tp=1)
• Template specific style - Alcuni template, come Beez, hanno un loro proprio stile. Vedete il capitolo Il Template Beez.

Troverete un elenco completo di stili nella documentazione di Joomla! - What is module chrome.

Altri tipi <jdoc> sono:

<jdoc:include type="head" />
<jdoc:include type="message" />
<jdoc:include type="component" style="none" />

Ogni pagina ha bisogno di una head, a volte di un message (dopo il salvataggio) e, naturalmente, un component. Può essere visualizzato un componente per pagina. Il componente può fare uso anche del modulo chrome.

L'error e la print view di un template sono file che lavorano esattamente come il file principale del template.

Cartella CSS

Troverete tre file in questa cartella:

1. Il file css/template.css con i comandi CSS predefiniti commentati. Se non usate la struttura del progetto, dovete togliere il commento ad alcuni di essi. Le linee sono specificatamente segnate.
2. Il file css/template_ie.css è vuoto. Qui potete aggiungere stile da sostituire per Internet Explorer.
3. Anche il file css/template_rtl.css è vuoto. Potete aggiungere stili per sostituire le lingue al lato sinistro o destro.

Struttura progetto

La struttura è un progetto CSS disegnato per ridurre i tempi di sviluppo e garantire la compatibilità tra browser.

Un paio di frasi prese dal file leggimi file:

Benvenuti nella struttura! Questo è un progetto CSS disegnato per ridurre i vostri tempi di sviluppo. Vi dà una solida base su cui costruire i vostri comandi CSS. Ecco alcune caratteristiche che la struttura offre:
* Una griglia facilmente personalizzabile
* Tipografia predefinita sensibile
* Una linea tipografica di base
* Reset CSS del browser perfezionato
* Un foglio di stile per la stampa
* Potente script per la personalizzazione
* Non è assolutamente troppo!

Troverete demo e tutorial sul sito del progetto - http://www.blueprintcss.org/.