Come inserire i fonts i Custom Code

risultatofinale

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. Alcune 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 clik su Purity iii della colonna Template

VerificaCSS

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

 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

StileTemplate

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

TemplatePurity3

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 :

CodiceinCustomCode

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

insFonts

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 è gia previsto se il file è esistente. Questo è stato dichiarato nel file head.php 

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

InserimentoHead

 

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

 risultatofinale

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

 

Ital Pascal