Excel - Trimestri uso funzioni DATA, GIORNO e FINE.MESE
Nell'articolo precedente siamo partiti con l'uso della funzione SOMMA.PIU.SE e proseguito con l'aggi
Excel - SOMMA.PIU.SE con Condizione multipla
Se usate Microsoft Office Excel per la vostra contabilità privata o aziendale, vi sarà senz'a
Excel DataPicker - Selezione data con calendario
In questo periodo, dopo aver di nuovo cambiato lavoro, mi sono riaffacciato al mondo di Excel. Ques
Sitemap, cos'è, a cosa serve e come crearne una
Che cos'è una Sitemap? Una Sitemap è un file che fornisce informazioni sulla relazione tra pagine
Joomla - Integrare WhatsApp Sharing Button Generator
Il presente articolo, ci aiuterà ad integrare negli articoli di un sito Joomla! un social button pe
Joomla! - Xmap Cannot use object of type stdClass as array
E' da anni che usate Xmap come estensione per la vostra Sitemap di Joomla! e finora non vi ha dato m
WordPress - Twenty Seventeen Full Width Template
Chi usa il nuovo tema gratuito di WordPress, si è sicuramente trovato di fronte a questo dilemma.
WordPress - Maintenance mode
A tutti coloro che possiedono un sito in WordPress, sarà senz'altro capitato di dover mettere
WordPress - Child Themes, come e perché
Una delle peculiarità di WordPress sono i child themes. Introdotti fin dalla versione 3.0, so
Windows 10 - Testare la batteria del Notebook
A tutti i proprietari di un portatile credo sia passato di notare che la batteria del proprio laptop
Windows 10 - Cancellare la cartella Windows.old
Avete fatto l'avanzamento a Windows 10 e vi siete accorti che nella partizione che ospita il sistema
Windows 10 - Installare phpMyAdmin su IIS Express 10
Nell'ultimo periodo ho studiato come configurare il server IIS Express 10 su Windows 10 per poter fa

Joomla! - Personalizzare il Template: CSS

google-plus Scritto da .

Nel creare un website con Joomla! una delle prime cose che richiedono attenzione, è la scelta del template. Di template gratuiti ce ne sono diversi, ma la cosa difficile è quella di trovarne uno free, responsive, dal design accattivante e perché no anche con stili bootstrap e che ovviamente faccia al caso nostro.

Foglio di stile di override

Non serve dire che un template joomla è ben più che una veste grafica. Non è WordPress, in cui il template decide addiritura il comportamento dell'editor di scrittura dei sinogli post e pagine; ma è pur sempre qualcosa che modifica il sito e lo rende più funzionale e gradevole nella vista e nella navigazione.

Visto dall'interno, nella cartela che lo contiene ( generalmente in /templates/nome-template ) risulta un insieme di file che trovano la pagina principale nella index.php, seguita da file xml di configurazione e installazione, una cartella css per i fogli di stile, una html per gli override dei moduli ( vedremo in un altro articolo che significa e come si effettua ) e altro ancora, tra stili e immagini.

Tra le varie modifiche che vi si possono fare, il presente articolo si propone di spiegare come creare un foglio di stile unico per i ritocchi al css del template in uso (se non già esistente).

Premetto che questa funzionalità è prevista in quasi tutti i template in commercio ed è anche diffusa tra quelli free. Tra quelli free da me utilizzati che prevedono l'uso di un CSS interno per gli override vi è favourite o bedava che sfrutta il T3 framework. Tra i due, preferisco di gran lunga favourite, semplice e pulito si presta benissimo a siti come la gazzetta delle koi e hotel laurin canazei

L'idea è quella di modificare o aggiungere regole a un unico file, invece che cambiare i selettori di ogni foglio di stile del sito.

Il template Protostar

Parto da Protostar, proprio perché ne è sprovvisto: Template nativo e free per la versione 3.0 di Joomla, presenta un design essenziale ma accattivante ed è ampiamente modificabile oltre che fluido o responsive (pronto ad adattarsi a uno schermo di un dispositivo portatile: smartphone o tablet che sia).

Tuttavia, semplice semplice... anche se un mondo aperto. La prima cosa da fare nel caso si decida di usarlo, è proprio quella di integrare un foglio di stile o file css che ci consenta di modificarne abilmente le caratteristiche. Poi, magari con l'impiego di buoni moduli anche gratuiti, si può fare molto per personalizzarlo senza dover spendere un patrimonio.

Per farlo, è necessario aprire il file /templates/protostar/index.php e aggiungere una riga di codice. Ma per fare un lavoro pulito, è bene duplicare il template prima di passare a modifiche sostanziali alla sua struttura:
Accedete al lato amministratore del vostro sito Joomla!

Copia del template

Effettuare una copia del template prima di inziare a svolgere modifiche sostanziali al template in uso è una precauzione che non smetterò mai di consigliare. Per questo, se non sapete come fare, leggete il seguente articolo:

Joomla! - Come fare una copia del template

Aggiungere il File CSS a Protostar

  1. A questo punto, siete già all'interno del nuovo template. Per aggiungere il file di override custom.css. Cliccate su Nuovo file.

    nuovo-file

  2. All'interno della finestra di dialogo che appare, selezionate sulla parte sinistra la cartella /css (percorso del nuovo file) del template e sulla sinistra, selezionate il tipo di file che volete creare, nel nostro caso "css". Sotto, inserite il nome del file. Per l'appunto "custom" (senza estensione! Il tipo di file è già stato specificato sopra).

    custom-css

  3. Ora cliccate su Crea! ed ecco il vostro risultato.

modifica-custom-css

 

Integrare il nuovo file nel template

Manca solo linkarlo al template per fare in modo che lo legga e ne tenga conto nel calcolare le rules di stile che verranno associate al template.

    1. Aprite il file index.php (lo vedete nella root del template, in basso).

      index-php

    2. Copiate la riga 43 e incollatela immediatamente sotto quest'ultima.

      aggiunta-custom-css-template

    3. Modificate poi la riga 45 in questo modo:
$doc->addStyleSheet('templates/' . $this->template . '/css/custom.css');

           4. Ora salvate. Il risultato dev'essere più o meno come quello illustrato in figura.

Da ora in poi, tutte le direttive e le regole css che volete assegnare ai vari elementi che compariranno nel vostro template, nuove o override che siano, le potrete inserire qui dentro certi che il template ne terrà in conto. Se mai dov'essero esserci problemi in merito, basterà assegnare alla regola, l'attributo !important. Per la spiegazione di come funziona quest'ultima direttiva dei fogli di stile, rimando a un articolo che lo spiega nel dettaglio.

Questo file presenta diversi vantaggi. Unico contenitore per le nostre regole di stile e personalizzazione CSS del sito. Resiste ad eventuali aggiornamenti.


 

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

Aggiungi commento


Codice di sicurezza
Aggiorna

  • logo teoca
  • logo arcotraslochi
  • materexcel collabora
  • koilab japan and tropical fish farm
  • logo flash pulizie
  • revolution srl
  • logo planetkoi small
  • logo elevatori sito
  • logo finiture
  • logo prontopro
  • montaggio mobili trento

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 (11/09/2019): Ti invitiamo a prenderne visione. Oppure visiona la nostra Cookie Policy (aggiornata il 17/10/2019):