Venerdì, 10 Luglio 2015 20:20

Modificare un template: inserire un container

Rate this item
(0 votes)

Come detto quale articolo fa, il punto di partenza per costruire un sito joomla è il template. Non ha senso avviarsi nel personalizzare un sito senza aver scelto una base di partenza. D'altronde scegliere dei template di uno stesso sviluppatore aiuta nel familiarizzare con la struttura dei template e a passare agevolmente da uno all'altro, quando si vuole cambiare. D'altro canto magari un template può non soddisfare al 100% i nostri bisogni, e quindi si vorrebbe modificarlo. Magari lo sviluppatore lo può anche fare....a pagamento. Vorremmo magari farlo da soli, ma se siamo alle prime armi può essere una impresa difficile...da dove si comincia? Nel mio caso ho voluto fortemente inserire un container orizzontale nell' header per fare in modo che questo template somigliasse a questo, con il menu a fare da spartiacque tra header e body, a cui dare lo stesso colore. Ecco come ho fatto.

Dopo aver consultato molte guide ho trovato finalmente quella che mi spiegasse la teoria: La struttura del template è nel file index.php contenuto nella cartella principale /template/nometemplate.

Quindi una parte della formattazione si trova nel file /template/nometemplate/php/styles.php.

In questi files si fa riferimento a dei files in  /template/nometemplate/php/layouts/, mentre le caratteristiche principali degli stili sono nei file .css nella cartella /template/nometemplate/css.

Devo dire la verità, per fare quello che volevo sono partito dall'osservazione del fatto che l'oggetto da inserire avesse un comportamento simile alla barra dei pulsanti per i social network, specialmente nella versione responsive del sito. Quindi ho preso spunto dal codice riguardante la barra social.

Cominciamo da index.php. Voglio chiamare il mio container "separatore", abbreviato sep. Voglio che nella versione "desktop" la barra sia esattamente al centro del menu, mentre nella versione responsive delimiti l'header nella parte inferiore. Dunque introdurrò un containter per ogni versione, rispettivamente #container_sep e #container_sep_mobile. Nella sezione <head> del codice inserisco, proprio sotto a <jdoc:include engine="head" /> che identifica la sezione le seguenti righe:

<div id="container_sep" class="container"><div class="wrapper960">
<?php require( "php/layouts/sep.php"); ?>
</div></div>

mentre più in basso, nella sezione <body>, proprio sopra alle righe relative al "social"

<div id="container_sep_mobile" class="container"><div class="wrapper960">
<?php require( "php/layouts/sep_responsive.php"); ?>
</div></div>

Come si vede, i due container fanno riferimento a due file php nella catella /template/nometemplate/php/layouts/, che però ancora non esistono.

Quindi andiamo a creare i due file. In sep.php:

<div id ="header" class="container_sep"></div>

in sep_responsive.php

<div id ="sep_mobile" class="block_holder">  
    <div id="header_items" class="container_prova">
<div id="sep">
</div>
</div>
</div>

Ora... non chiedetemi perché... non sono sufficientemente bravo per saperlo...ho solo "copiato" e mi è andata bene ;) se qualcuno dei lettori (ove mai ce ne fossero) volesse spiegarmi...benvenuto!

 A questo punto andiamo a dare uno stile ai due container, nel file /template/nometemplate/php/styles.php.

Individuiamo la sezione relativa all' header ed andiamo ad aggiungere le righe che descriveranno il separatore:

#container_sep{background-color: #0B610B;}
#container_sep_mobile{background-color: #0B610B;}

il colore si può scegliere da una tavola di colori html, o è possibile usare alcune variabili.... io che non sono sufficientemente bravo per inserire delle variabili ed andare a modificare il pannello di controllo del template lato amministratore, li metto fissi.

Infine andiamo a modificare i fogli di stile css. Diciamo che ne bastano due, nel mio caso: Nexus.css e responsive.css

nel primo, nella sezione [CONTAINER DIVS] inserisco:

#container_sep {height:40px;
                            position:absolute;
                           top:155px}
#container_sep_mobile{display:none}

Chiaramente le dimensioni sono personalizzabili, mentre la posizione è stata scelta in modo da posizionarsi al centro del menu, per ricreare l'effetto voluto. Nella visualizzazione normale, quindi visualizzo la barra sotto al meno, ma non quella che delimita l'header separandolo dal body.

Un poco più complesso il file responsive.css. in questo file ci sono diverse sezioni che rispondono a diversi tipi di display:

Medium Devices:  Design for a width of 768px

Small Devices: Design for a width of 480px

Extra Small Devices: Design for a width of 320px

E' abbastanza facile individuare le sezioni, entro cui andare ad inserire il codice per il separatore. Devo dire che in questo caso mi è stata utilissima la toolbar "Web developer" che permette di visualizzare le pagine del sito come i dispositivi mobili comodamente al pc.

Teoricamente si può inserire un codice diverso per ogni design relativo all'elemento di interesse, tuttavia per comodità ho inserito sempre lo stesso:

#container_sep {display:none !important;}
#container_sep_mobile{
height:10px;
display:block;
padding-bottom:10px;
}

in cui dico di non mostrare il separatore ad altezza fissa e identifico quello al delimitare dell' head in modo che sia alto 10px e si trovi in basso, con un margine di 10px.

Finito!

Allegherò qualche screenshot per illustrare il risultato in modo permanente, anche se cambierò poi il design così si vedrà il frutto di questo lavoro.

Read 3051 times Last modified on Giovedì, 02 Marzo 2017 14:11

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.

Annuncio pubblicitario by google

Questo sito utilizza cookies per amministrare autenticazioni, navigazione, statistiche di accesso e/o altre funzioni. Continuando la navigazione nel sito acconsentite che questi tipi di cookie vengano memorizzati nel vostro dispositivo.

Visualizzare la Politica sui Cookies

Visualizzare il Documento della Direttiva sulla e-Privacy

Avete Rifiutato i cookies. Questa decisione puo'essere modificata.

Avete acconsentito all'uso dei cookies. Questa decisione puo' essere modificata.