it-swarm.dev

Come posso sovrascrivere gli stili CSS nel mio modello?

Quando utilizzo un modello Joomla gratuito/commerciale da Template Club X/Y/Z, qual è il modo migliore per includere i miei stili CSS?

21
johanpw

Perché utilizzare le sostituzioni CSS?

È sempre una buona idea tenere separati i tuoi stili CSS dallo stile del modello esistente, se stai usando un modello Joomla pre-costruito.

  • È più facile da mantenere
  • Le modifiche non andranno perse se si aggiorna il modello
  • Puoi facilmente copiare/spostare le modifiche in un altro modello o in un altro sito.

Come funzionano le sostituzioni CSS?

CSS significa "Cascading Style Sheets", "Cascading" in questo contesto, il che significa che poiché più di una regola del foglio di stile potrebbe applicarsi a un particolare pezzo di HTML, la regola utilizzata viene scelta in cascata dalle regole più generali alla regola specifica richiesta (il viene scelta la regola più specifica) o in base all'ordine delle regole per qualsiasi elemento (viene scelta l'ultima regola trovata).

Fintanto che il file CSS personalizzato viene caricato dopo i file CSS del modello predefinito, è possibile aggiungere i propri stili per sovrascrivere elementi specifici in base alle esigenze (ci sono alcuni eccezioni, più su quello che segue).

Uso generale

Per caricare un foglio di stile personalizzato nel tag Joomla <head>, Il seguente codice può essere aggiunto al file index.php Del tuo modello (YOURDOMAIN.COM/templates/yourtemplate/index.php), Subito prima della fine </head> Per garantire che il file sia caricato per ultimo.

JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css');

(Il file CSS può avere qualsiasi nome e non deve trovarsi nella sottocartella/css /, ma è più pulito in questo modo.)

È anche possibile aggiungere un normale tag <link>, Ma è meno flessibile dell'opzione sopra menzionata:

<link rel="stylesheet" href="/templates/mytemplate/css/custom.css" type="text/css" />

Importante

Alcune estensioni potrebbero caricare i loro stili CSS dopo i tuoi (o persino aggiungere stili direttamente nel file index.php), sovrascrivendo così le tue sostituzioni. Questo di solito può essere risolto aggiungendo !important Ai tuoi stili, ad es. h1{color:red!important;}

Utilizzo in diversi framework

Ora la parte divertente: molti framework di modelli hanno tuttavia la possibilità che gli utenti vorrebbero apportare modifiche ai loro modelli, aggiungendo così un modo semplice per includere le sostituzioni CSS. Ecco alcuni dei metodi utilizzati:

RocketTheme Gantry 4

I template di RocketTheme sono basati su Gantry Framework e un file CSS personalizzato verrà caricato automaticamente se trovato. Il file CSS deve essere inserito nella cartella /templates/yourtemplate/css/ E il nome deve essere YOURTEMPLATEFOLDER-custom.css.

Esempio: Se stai utilizzando il loro modello Afterburner 2 Gratuito, la directory dei modelli predefinita è /templates/rt_afterburner2/. Aggiungi un file chiamato rt_afterburner-custom.css (Attento con trattino basso e trattino) nella sottocartella/css /, e verrà caricato automaticamente dal framework Gantry.

Forma 5

I modelli di Shape 5 vengono spediti con un file custom.css Vuoto nella sottodirectory/css/del modello. Aggiungi semplicemente i tuoi stili a questo file e saranno inclusi nel tuo layout.

Gavick Pro

I template di Gavick Pro vengono spediti con un file overrides.css Vuoto nella sottodirectory/css /. Ma nota che questo file non è caricato per impostazione predefinita, devi attivare Override CSS Nella scheda Impostazioni avanzate nelle impostazioni del modello.

Joomla Shine

Crea un file CSS personalizzato nella sottocartella/css/del tuo modello, ad es. custom.css E specifica il nome del file in Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s).

T3 Framework

I modelli basati su T3 Framework possono/non includere un file custom.css Nella sottocartella/css/del modello (crearlo semplicemente se non è presente), ma quando presente, il file verrà caricato dopo ogni altro File CSS.

Warp Framework

I modelli basati su Warp Framework caricano automaticamente il file custom.css Che si trova nella sottocartella/css /. File CSS aggiuntivi possono essere caricati aggiungendo

$this->warp->stylesheets->add('css:yourcssfile.css');

al file /layouts/template.config.php.

22
johanpw

Joomla 3.5+ (modello Protostar)

A partire da Joomla 3.5, puoi creare un file chiamato user.css e posizionalo in:

templates/protostella/css/user.css

Nota: il nome del file deve essere user.css


Il modello protostar verificherà se:

  • Il file esiste
  • La dimensione del file è > 0.

Se entrambe le condizioni sono soddisfatte, importerà automaticamente questo file per te.

Vedi Pull Request su Github

7
Lodder

Helix Framework (JoomShaper)

Un altro framework di template Joomla, che facilita il flusso di lavoro di personalizzazione.

I modelli di Helix Framework offrono anche un modo semplice per aggiungere i tuoi stili personalizzati con 2 metodi convenienti.

  1. Nel pannello di controllo del modello nel backend, è presente un campo CSS personalizzato. Qui puoi digitare il tuo CSS, che verrà aggiunto come elemento di stile nella sezione head delle tue pagine e come tale, avrà anche la precedenza su altri file CSS esterni. Naturalmente questa opzione non è l'ideale, se hai intenzione di scrivere un sacco di righe di CSS, quindi c'è un secondo metodo.

  2. Come molti altri framework di template, Helix offre anche la possibilità di creare il tuo file custom.css. Basta crearlo e inserirlo nella cartella CSS del modello. Il modello lo analizzerà e lo includerà nella sezione head delle tue pagine.

5
FFrewin

Johanpw ha fatto un ottimo lavoro con la sua risposta sulla sua stessa domanda ... soprattutto per quanto riguarda le sostituzioni css per molti modelli commerciali.

Vorrei solo aggiungere i miei due centesimi qui ...

Come sottolineato da Johanpw, la creazione di sostituzioni CSS è la pratica consigliata. Mantenere il tuo CSS personalizzato in un singolo file che sai che non verrà eliminato o sovrascritto dopo un aggiornamento è essenziale.

Questo è importante da ricordare per tutte le estensioni di Joomla. Non tentare di modificare il file css principale di un modulo o di un componente. Invece, prova a creare il tuo file template.css personalizzato, caricalo per ultimo e crea tutti i tuoi stili personalizzati.

Nei casi in cui un modello commerciale non fornisce un modo per aggiungere una sostituzione CSS, è possibile utilizzare un'estensione come questa: Aggiungi CSS personalizzato , che consente esattamente questo. Per creare il tuo file di sovrascrittura CSS personalizzato e caricarlo per ultimo.

Un'altra opzione che faccio spesso nei siti che gestisco è quella di modificare il modello e aggiungere il mio link al mio file custom.css , appena prima del tag head di chiusura del modello. Si tratta di una modifica minore, facile da ricordare e da ripristinare, di cui mi occupo, quando arriva un aggiornamento del modello.

3
FFrewin

Gantry 5 (RocketTheme)

Gantry 5 è l'ultima versione del popolare framework di template e offre molte nuove funzionalità e funzionalità.

Per quanto riguarda le sostituzioni CSS, c'è molta flessibilità e opzioni.

Prendendo il tema dell'idrogeno che viene rilasciato come modello Gantry 5 standard, fornisce una cartella denominata personalizzata.

Questa cartella consente all'utente di posizionare i propri file/override personalizzati per il framework/template gantry (da non confondere con gli override dei template di Joomla, che rimangono nella cartella template/html). Puoi inserire lì il tuo file custom.css. Quindi, tramite il pannello di amministrazione dei modelli Gantry, puoi personalizzare i layout dei modelli e utilizzare un CSS personalizzato/JS Atom Particle ( una nuova funzione gantry 5), per aggiungere il tuo custom.css al modello. Gantry 5 fornisce anche il cosiddetto collegamenti streaming , (come scorciatoie), per collegare facilmente il tuo file custom.css.

Quindi dall'interno della particella Atom la collegheresti usando:

gantry-theme://custom/thing.css

Il gantry-theme:// collegamento, farà sempre riferimento alla cartella del modello gantry corrente.

L'uso di questo approccio è un modo efficace per aggiungere custom.css per i contorni di modelli specifici del modello gantry5.

Un secondo approccio, che funziona a livello globale per l'intero modello di portale, è l'aggiunta di un file custom.scss , all'interno di:

template_directory/custom/scss/custom.scss

In questo modo, gantry5 caricherà e compilerà sempre questo file scss e tutte le regole CSS applicate avranno la precedenza sulle regole predefinite del modello.

All'interno del file scss stai perfettamente bene usando SCSS o semplicemente css. Il compilatore è in grado di compilare entrambi.

3
FFrewin