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.