Supporto volontario e collaborativo per Joomla!® in italiano

Come inserire Custom Code in T3 Framework

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Custom Code in T3 Framework

La prima volta che ho aperto la sezione "Template" di Purity ho scoperto un mondo tutto nuovo. La semplicità di effettuare modifiche al template, stile, posizioni e altro è stupefacente. L'unica cosa che rimaneva un mistero era "cosa inserire nel custom code".
Non vi dico il tempo che ho passato per modificare e/o inserire i fonts.

Inserivo i link nel file index.php cercando di metterlo nell'HEAD. Alcuni template è stato facile, ma con PURITY non riuscivo a trovare il file giusto.

Sono testardo e mi sono messo a studiare tutti i file e ho scoperto "l'acqua calda" ;) 

  • Il template di PURITY riconosce automaticamente il file custom.css e lo legge per ultimo tra tutti i css che ci sono ;)
  • I link si possono inserire "semplicemente" in "Custom Code" 

 

Vediamo come procedere

 Iniziamo ad aprire la finestra Gestione Template da Estensioni.

Da questa finestra per prima cosa accertiamoci se esiste un file custom.css , quindi un click su Purity iii della colonna Template

Verifica css

Vedremo l'elenco delle cartelle che si trovano sotto la cartella principale templates/purity_iii

 Cartella Templates/css

In questo caso il file custom.css si vede perchè è stato creato e inserito in precedenza da me, in fase di prima installazione non era presente.

Vediamo cosa ho inserito nel file custom.css

 

pmio {
    font-family: "Tangerine";
    font-size: 30px;
    text-shadow: 4px 4px 4px #aaa;
    color:red;
}
pmio2 {
    font-family: "Indie Flower";
    font-size: 40px;
    color:blue;
}
pmio3 {
    font-size: 20px;
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
pmio4{
  font-family: 'Tangerine', serif;
  font-size: 40px;
  color: blue;
  text-shadow: 4px 4px 4px #aaa;
}
pmio25 {
    font-family: "Indie Flower", cursive;
    font-size: 25px;
    color:blue;
}

 

E' bene precisare che alcuni preferiscono inserire il punto prima di pmio, per l'uso di questo esempio funziona bene anche così.

Nel file custom.css si possono riutilizzare modificandone i valori anche gli stessi nomi delle classi che si trovano nel template, queste essendo lette per ultime avranno la precedenza.

Adesso procediamo andando a vedere come inserire i riferimenti nel template tramite il pannello "Custom Code"

Tornando alla finestra di visualizzazione template con un click su Purity III Default come si vede da questa image

Selezionando Stile Purity III

si aprirà una serie di pannelli per la gestione del template come il Tema, il Logo, il Layout, il Megamenu e altro ma quello che ci interessa in questo articolo è il pannello Custom Code.

Aprendo il pannello avremo questa videata

Modifica in Custom Code

Come abbiamo visto in precedenza nel file custom.css sono state create delle classi utilizzando due fonts che non erano compresi nel template.

Per far in modo di poter utilizzare questi fonts si deve istruire il template. Come ?

Inserire nell'HEAD queste due righe :

Link fonts

Come vedete i parametri non sono stati inseriti nello stesso modo per i due fonts, ai miei inizi gli davo importanza, ma inseriti in questo modo la sostanza non cambia.

Inserimento Fonts in Custom Code

Dovremmo avere una schermata come questa sopra, ovvio che le note non sono state inserite.

Una cosa importante che voglio rimarcare è che il template Purity III non ha bisogno di inserire un link per leggere il file custom.css in quanto è già previsto se il file è esistente. Questo è stato dichiarato nel file head.php 

Infatti da questa image sotto vi risulterà più chiaro : 

Codice head.php

 

Adesso scrivendo un articolo e utilizzando i fonts e lo stile del custom.css sarà possibile avere un articolo in questo modo :

< pmio >Testo con font Tangerine di colore Rosso < / pmio >
< pmio25 >Testo con font Indie Flower di colore Blue e size 25px < / pmio25 >
< pmio2 >Testo con font Indie flower di colore Blue e size di 40px < / pmio2 >

 Articolo esempio

Certo non bisogna esagerare con i fonts, ma a titolo di esempio può andar bene ;)

 

Ital Pascal


commentaCommenta questo articolo sul forum

Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Augusto
Nome: Augusto
Alcune informazioni su di me:


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Ultima versione di Joomla!®

downloadVer. 3.7.0 Stabile Italiana
Data di rilascio: 25 Aprile 2016
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: