Aruba.it - Registrazione dominio .it da € 3.99 + iva/anno
www.

Joomla! - Personalizzare il Template: Width

google-plus Scritto da . Postato in Joomla!

Nella creazione di un sito, la scelta del template è davvero importante. Basta pensare a quello che può succedere nell'uso di una veste grafica responsive: I suoi comportamenti infatti, sono dovuti in gran parte dalle scelte fatte dal programmatore che lo ha creato. La larghezza stessa del container principale, è definita in maniera precisa e spesso manipolabile dal pannello Gestione estensioni > Gestione Template > Stili > il_mio_template.

Larghezze del template - width

Dal pannello, si può infatti definire la larghezza del template e addiritura in certi casi decidere se occuperà il 100% della larghezza della finestra (non tutti lo consentono). Se di questo avete bisogno accertatevi che il template da voi prescelto abbia queste caratteristiche nel suo curriculum.

Nel personalizzare, c'è sempre la possibilità di utilizzare il file override.css per tentare una modifica al volo delle classi e regole css. Ma ci sono alcune cose che, se modificate, hanno ripercussione su altre... a domino. Siccome, una volta fatte certe modifiche si rischia di fare una fatica immane a tornare sui propri passi, prima di avventurarsi su quanto sto per spiegarvi, fate bene a creare un duiplicato del template come ho spiegato la volta precedente sull'articolo per la personalizzazione CSS del template.

Questo è appunto il caso nel quale una parte del template, ovvero una posizione è suddivisa in base ai moduli pubblicati in essa. La classe che ne definisce la larghezza, molto spesso è utilizzata anche altrove per imporre l'attributo width laddove è stato prevista un'ampiezza identica.

A volte però capita che le proporzioni dell'attributo width sia stato scelto a priori a seconda di certi parametri di popolazione (numero di moduli) della posizione. Come potete ben immaginare, l'attributo width dei contenitori delle posizioni, sono in percentuale. Infatti, essendo il tema fluido (responsive), non posso attribuire delle larghezze fisse. Pena sfalsamenti e malfunzionamenti in schermi con diagonali (in pollici) inferiori rispetto a un desktop.

Molti grafici, da mia esperienza, fanno proprio questo: Quando non riescono a gestire bene le faccende relative alle dimensioni dei vari div (contenitori) all'interno dei template, finiscono per farlo forzosamente. Il risultato è ottimo, la forma eccellente, molto meno quando lo vedo con uno smartphone o un tablet. Ora, certe forzature ci stanno, ma quando si tratta di template responsive, si va incontro al disastro, rovinando o annullando le proprietà di trasformazione della veste grafica scelta. Io sono dell'opinione che se proprio non va, se proprio devo fare troppe modifiche, forse è il caso di cambiare la veste con il quale ho creato il sito Joomla.

Classi CSS che definicono le ampiezze

Ma, non è detto che una piccola modifica alla struttura php/html del template, o di una sua specifica sezione (non tutti i template raccolgono la struttura in un unico file come protostar nel file index.php) risolvano la situazione.

In realtà, la frase modificare la struttura, è un'esagerazione! Se si osserva bene, per una stessa posizione, vi sono delle clausole che assegnano al contenitore associato una classe css specifica. Facciamo degli esempi:

In template free come Favourite, le classi che decidono l'ampiezza del div che contiene un modulo, si chiamano "spanX" dove X è un numero progresivo da 0 a 12 che suddividono in dodicesimi l'ampiezza totale del contenitore rispetto alla pagina stessa (100%) o al contenitore padre.

In temi che usano il framework warp di yoo theme, le classi si chiamano "widthXX" dove per XX si tratta del numero in percentuale che si nasconde dietro al nome della classe stessa. Il principio tuttavia è invariato: Sempre suddivisioni delle larghezze totali in percentuali rispetto all'ampiezza della pagina principale del tema.

Rendersene conto non è difficile: basta usare un browser come Firefox o Chrome e decisa la parte da analizzare, clicchiamo sopra di essa con il tasto destro del mouse e successivamente Analizza elemento dal menu contestuale.

analizza-elemento-browsers

Se guardiamo con occhio clinico e risaliamo al div che fa capo al modulo analizzato (quello che definisce i limiti della posizione nel quale è inserito), scoviamo la classe che ne decide l'attributo width. Eccolo qui (template Favourite):

favourite-span3

Esempio in un template yoo-theme:

yoo-balance-width

Questo è un esempio. Ma se poi guardiamo nelle regole css nello strumento di analisi in basso a destra, noteremo che la classe che ne decide l'ampiezza, contiene la percentuale esatta che occupa il modulo o la posizione.

Se ora, a sinistra cambiamo il numero progressivo della classe aumentando o diminuendo il numero progressivo (indovinando il nome di una classe esistente), il risultato sarà evidente anche sulla pagina principale rendendone chiaro il principio di funzionamento.

favourite-span4

Ora, se vogliamo cambiare le carte in tavola, andiamo nel file del template (Gestione estensioni > Gestione Template > Template > nome_template), e nella sua struttura (index.php), laddove vogliamo un'ampiezza differente, cambiamo il nome della classe nella clausola che ne decide l'ampiezza al verificarsi delle condizioni da noi desiderate.

Eccovi un esempio:

Nel template Favourite, se usiamo un modulo per il copyright (posizione copyright1) e utilizziamo un altro modulo come nell'esempio dei social button (nella posizione copyright2), la classe che sarà assegnata alla prima posizione sarà span4 e la classe che sarà assegnata alla seconda posizione span9 (fa 13 e il contenitore è suddiviso in dodicesimi). La cosa genera un sovradimensionamento facendo sfalsare i contenuti che non rimarranno sulla stessa linea nemmeno a pregarli.

favourite-bug-span4-9

Il tutto sta nell'impostare nel file index.php alle righe 901 e 902, che nel caso vengano pubblicati 1 o 2 moduli nella posizione copyright2 invece della classe span9, venga assegnata la classe span8:

<?php if ($this->countModules('copyright2')): ?>
    <div id="fav-copyright2"
        class="<?php
        if ( $copyright == 1 ):echo ('span8'); //cambiato da span9
        elseif ( $copyright == 2 ):echo ('span8'); //cambiato da span9
        elseif ( $copyright == 4 ):echo ('span3');
        else: echo ('span12'); endif; ?>">
        <jdoc:include type="modules" name="copyright2" style="icon" />
    </div>

<?php endif; ?>

Il risultato sarà questo:

favourite-ok-span4-8

Questo caso è abbastanza evidente ed è probabilmente dovuto a una svista del programmatore su certe condizioni che potevano presentarsi usando le posizioni nel tema Favourite (che però è un template free quindi che si pretende?).
Spero che tuttavia, l'esempio sia bastato a spiegare quanto ho cercato di comunicare con il presente articolo.

Buona personalizzazione! wink

 

 

Se hai gradito l'articolo, condividilo, basta un click!

Aggiungi commento


Codice di sicurezza
Aggiorna

  • logo prontopro
  • logo boutique serramento
  • koilab japan and tropical fish farm
  • Trasloco economico - gruppo Arco Traslochi
  • logo flash pulizie
  • logo revolution
  • logo planetkoi small
  • logo finiture
  • ick logo template
  • montaggio mobili trento

Realizzato da: Daniele Gagliardi
Viale Monache 3 - 38062 Arco - TN
- Contattami -

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati. La nostra Privacy Policy è cambiata: Ti invitiamo a prenderne visione. Oppure visiona la nostra Cookie Policy: