Usare il vostro tema personale con i canali

Modelli del tema dei canali

Una volta installato con successo il modulo del canale, assegnato il modello di tema per i canali di gruppo e regolato gli id dei vostri gruppi, potete modificare i modelli secondo le richieste del vostro impianto grafico.

In tutti i modelli html, io uso anche alcuni tag CSS mescolati con i tag convenzionali per le tabelle per ottenere una maggior compatibilità fra browser. Il CSS sarà lo strumento dei futuri cms, ma al momento dobbiamo ancora tener presente gli utenti dei browser più datati. Tuttavia, confrontato con la maggior parte dei temi fatti secondo lo stile convenzionale delle tabelle, il CSS vi permetterà di ridurre le linee di codice e di evitare alcuni degli errori più comuni come errori tipografici, tag di chiusura mancanti eccetera. Perché ad esempio i blocchi di sinistra usati in tutti i modelli sono indipendenti dai tag usati per le tabelle. Potete regolare proprietà quali la posizione, la larghezza o i colori dal file style/style_group.css. Ogni canale leggerà il proprio file css. Potete trovare questi file css in ogni canale sotto la cartella style.

Potete anche notare che ho mescolato alcuni script php con i tag html. Non sono tanto fanatico da ritenere che si debba usare html puro per il web design. A mio giudizio anche se molti web designer non sono programmatori, tuttavia alcune volte dovremmo imparare un poco di "copia e incolla" e come incorporare i linguaggi di script nei nostri tag html. L'esempio intende solo mostrare che si possono usare diverse maniere per creare un layout grafico, a seconda di quali competenze si posseggano. Quindi usate liberamente i vostri metodi.

Loghi, immagini di menu images e colori:

Dalla sezione del canale di download potete trovare i sorgenti delle immagini in formato psd. Usatele per creare le immagini del vostro menu personale, poi create i link adeguati e la dimensione delle immagini da themes/VostroTema/includes/nav-images.php

Larghezza della pagina:

Per una maggior flessibilità del layout, tutti i modelli usano larghezze relative. Potete cambiare la larghezza del layout dal file theme.php; cercate la funzione pagewidth alla linea 47 e sostituite il valore 100% con la larghezza che preferite. Potete usare larghezze fisse come ad esempio 780 o usare larghezze percentuali [%].

Editing dei modelli

Il file modello e anche i file di AutoTheme usano il formato HTML. Diamo per assodato che abbiate dimestichezza con i tag HTML. La differenza principale è che  gli elementi di AutoTheme sono necessari per generare il contenuto dei vostri moduli o blocchi MD. Possiamo dire che gli elementi stessi sono un sitema semplice per generare il contenuto MD in modo dinamico. Inserendo gli elementi all'interno di HTML, potete organizzare il contenuto e il layout grafico in maniera corretta senza competenze di programmazione.

L'elemento di AutoTheme usa un tag di apertura per assegnare, ad esempiio, la posizione del contenuto del blocco di sinistra. Potete travare maggiori notizie nel tutorial  Autotheme per Dummies  a questo link.

Per cominciare dovete conoscere la struttura dei file usati in questo modello Nei punti seguenti divideremo i file in alcuni raggruppamenti. I raggruppamenti non sono fatti secondo regole precise e immutabili; hanno solo la funzione di chiarire lo scopo dei file di modello. Una volta compresa l'idea, potete modificare il contenuto dei file e utilizzare la vostra propria struttura.

modelli grafici principali:

• theme_frontpage.html: modello per la vostra pagina index / home page.
• theme.html: Modello di default, tutti i moduli senza uno specifico modello usaranno il modello di default
• theme_admin.html: modello per  il modulo Admin. Questo modello funziona solo se non usate il modo canale. Per il modo canale la locazione del modello si trova sotto la cartella VostroTema/2/.

Modelli grafici secondari:

• blocks/block-1(5).html: layout standard per il contenuto blocchi area del canale
• blocks/block-l.html:  layout standard per il contenuto del blocco sinistro
• blocks/block-c.html: layout standard per il contenuto del blocco centrale
• blocks/block-r.html: layout standard per il contenuto del blocco destro

Modelli News:

• article.html: layout standard per il contenuto completo delle news summary.html: layout standard per il contenuto sommario news
• summary1(2).html: layout alternativo sommari news

File di configurazione:

• theme.cfg: potete decidere il modello dell'aspetto principale, di quello secondario e delle news  in questo file di configurazione, comprese le impostazioni dei colori e dei blocchi.
• theme.php: questo file consiste di alcune semplici funzioni  PHP per i modelli del canale. Se conoscete PHP, potete creare o modificare le vostre funzioni qui dentro.
• style/style_group(X).css: Questo è il foglio di stile  css per i file del tema principale e i file del canale. (X) è l'id del canale del gruppo.
• lang/eng/global.php: le definizioni di linguaggio usate dal file theme.php.

File supportati:

• includes/area-header.php: tag html per la sezione intestazione
• includes/area-footer.php: tag html per la sezione pie' di pagina
• includes/nav-images.php: java script per le immagini del menu principale

Nella pagina successiva mostreremo come sostituire i file di modello esistente con i vostri personali file del tema. Il sistema di canali vi permette di applicare differenti temi per ciascun canale; per esempio potete usare il tema A per il canale 1 e il tema B per il canale 5.

Usare i vostri file di tema personali

I file di modello del canale sono pensati come modelli base per creare i vostri temi di canale. Potete mantenere la struttura dei file come sono e sostituirne il contenuto con il vostro layout html. Questa è la maniera più veloce. Potete, in alternativa, usare completamente la vostra struttura personale. Leggete accuratamente i punti che seguono:

• Potete sostituire tutto il contenuto dei file di modello nel Tema Principale e nella cartella del canale con il vostro layout grafico in html, tranne il file theme.php. Questo file è necessario per individuare la struttura della vostra cartella dei canali. Tuttavia se conoscete PHP potete modificare o ggiungere funzioni personalizzate.
• Sostituite i tag html nei vostri file del tema con dei comandi. Questi comandi sono necessari per leggere i fogli di stile dei canali. In tal modo si userà sempre il proprio foglio di stile. Potete regolare i tag dal file theme.php dentro il vostro tema principale, in maniera da corrispondere ai vostri tag html.
• Copiate il contenuto dei vostri stili css [style.css]  in  style_group.css nella cartella del tema principale o style_groupX.css nella cartella di stili del canale.
• Modificate le proprietà dell'area in ogni file theme.cfg file nelle vostre cartelle del tema principale o dei canali. L'area  AT standard va da Area1 a Area9. Sostiuitele con le vostre aree di canale, come Area5-1blocks, Area5-2blocks ecc. che sono collegate all'id del vostro canale di gruppo. Consultate il modello theme.cfg nella pagina successiva come esempio.

Esempio per il  theme.cfg di Canale1

Ogni canale ha 5 aree aggiuntive, stabilite come AreaX-1block fino a AreaX-5block. Queste aree possono essere usate per posizionare il contenuto specifico del vostro canale. Potete modificare le convenzioni di denominazione delle aree modificando il file autoblock.cfg nella cartella modules/Blocks/. Se intendete usare più di 10 canali di gruppo basta ridurre i numeri delle aree e usarle per altri canali aggiuntivi.

$altsummary = 1;
$template = array (
'default' =>
array (
    'main' => 'theme.html',
    'summary' => 'summary.html',
    'summary1' => 'summary1.html',
    'summary2' => 'summary2.html',
    'article' => 'article.html',
    'leftblock' => 'blocks/block-l.html',
    'centerblock' => 'blocks/block-c.html',
    'rightblock' => 'blocks/block-r.html',
    'table1' => 'table1.html',
    'table2' => 'table2.html',
    'Area1-1block' => 'blocks/block-1.html',
    'Area1-2block' => 'blocks/block-2.html',
    'Area1-3block' => 'blocks/block-3.html',
    'Area1-4block' => 'blocks/block-4.html',
    'Area1-5block' => 'blocks/block-5.html',
),
'pnHome' =>
array (
    'default' =>
    array (
          'main' => 'theme_frontpage.html',
          'leftblock' => 'blocks/block-l.html',
          'centerblock' => 'blocks/block-c.html',
          'rightblock' => 'blocks/block-r.html',
          'table1' => 'table1.html',
          'table2' => 'table2.html',
          'Area1-1block' => 'blocks/block-1.html',
          'Area1-2block' => 'blocks/block-2.html',
          'Area1-3block' => 'blocks/block-3.html',
          'Area1-4block' => 'blocks/block-4.html',
          'Area1-5block' => 'blocks/block-5.html',
  ),
),
'pnAdmin' =>
array (
    'default' =>
    array (
          'main' => 'admin.html',
          'leftblock' => 'blocks/block-l.html',
          'centerblock' => 'blocks/block-c.html',
          'rightblock' => 'blocks/block-r.html',
          'table1' => 'table1.html',
          'table2' => 'table2.html',
          'Area1-1block' => 'blocks/block-1.html',
          'Area1-2block' => 'blocks/block-2.html',
          'Area1-3block' => 'blocks/block-3.html',
          'Area1-4block' => 'blocks/block-4.html',
          'Area1-5block' => 'blocks/block-5.html',
    ),
),
'News' =>
array (
    'default' =>
    array (
          'main' => 'theme.html',
          'summary' => 'summary.html',
          'summary1' => 'summary1.html',
          'summary2' => 'summary2.html',
          'article' => 'article.html',
          'leftblock' => 'blocks/block-l.html',
          'centerblock' => 'blocks/block-c.html',
          'rightblock' => 'blocks/block-r.html',
          'table1' => 'table1.html',
          'table2' => 'table2.html',
    ),
),
'pnHome' =>
array (
     'default' =>
    array (
          'left' => '1',
          'center' => '1',
          'right' => '1',
          'Area1-1' => '1',
          'Area1-2' => '1',
          'Area1-3' => '1',
          'Area1-4' => '1',
          'Area1-5' => '1',
    ),
),
'pnAdmin' =>
array (
    'default' =>
    array (
          'left' => '0',
          'center' => '0',
          'right' => '0',
    ),
),
'News' =>
array (
    'default' =>
    array (
    'left' => '1',
    'center' => '0',
    'right' => '1',
    ),
),
  'pnHome' =>
  array (
    'default' =>
    array (
      'stylesheet' => '',
      'logoimg' => 'default.gif',
    'color1' => '#FFFFFF',
    'color2' => '#F2F8FF',
    'color3' => '#E2ECF9',
    'color4' => '#D2E1F2',
    'color5' => '#C4D6EA',
    'color6' => '#B3C7DF',
    'color7' => '#A2B9D3',
    'color8' => '#93ACC8',
    'color9' => '#859FBC',
    'color10' => '#7993B1',
    'striphead' => '0',
    ),
    'striphead' => '0',
  ),
  'pnAdmin' =>
  array (
    'default' =>
    array (
      'stylesheet' => '',
      'logoimg' => 'default.gif',
    'color1' => '#FFFFFF',
    'color2' => '#F2F8FF',
    'color3' => '#E2ECF9',
    'color4' => '#D2E1F2',
    'color5' => '#C4D6EA',
    'color6' => '#B3C7DF',
    'color7' => '#A2B9D3',
    'color8' => '#93ACC8',
    'color9' => '#859FBC',
    'color10' => '#7993B1',
      'striphead' => '0',
    ),
    'striphead' => '0',
  ),
  'News' =>
  array (
    'default' =>
    array (
    'stylesheet' => '',
    'logoimg' => 'thenews.gif',
    'color1' => '#FFFFFF',
    'color2' => '#F2F8FF',
    'color3' => '#E2ECF9',
    'color4' => '#D2E1F2',
    'color5' => '#C4D6EA',
    'color6' => '#B3C7DF',
    'color7' => '#A2B9D3',
    'color8' => '#93ACC8',
    'color9' => '#859FBC',
    'color10' => '#7993B1',
      'striphead' => '0',
    ),
    'striphead' => '0',
  ),
);
$blocktemplate = array (
    'Poll' => 'blocks/block-1.html',
    'Forums' => 'blocks/block-2.html',
    'Online' => 'blocks/block-3.html',
    'Past Articles' => 'blocks/block-4.html',
    'Categories' => 'blocks/block-5.html',
    'Login' => 'blocks/block-l.html',
    'Messages' => 'blocks/block-c.html',
    'Daily Archives' => 'blocks/block-r.html',
);
$themeversion = array (
);
$include_info = 1;
?>