21

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

templates overrides css

— johanpw
fonte

1

Aggiungi un foglio di stile custom.css. se il tuo template non lo raccoglie automaticamente, puoi aggiungerlo nel tuo head.php di solito il percorso è: templates / templatename / tpls / blocks / head.php <link rel = "stylesheet" href = "/ templates / templatename / css / custom.css "type =" text / css "/>

— Tony M

22

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 alcune eccezioni, più in dettaglio di seguito).

Uso generale

Per caricare un foglio di stile personalizzato nel <head>tag Joomla , è possibile aggiungere il seguente codice al index.phpfile del modello ( YOURDOMAIN.COM/templates/yourtemplate/index.php), subito prima del </head>tag di fine per assicurarsi 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 <link>tag normale , ma questo è meno flessibile dell'opzione sopra menzionata:

<link rel="stylesheet" href="/joomla//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 !importantai 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 /templates/yourtemplate/css/cartella e il nome deve essere YOURTEMPLATEFOLDER-custom.css.

Esempio: se si utilizza il Afterburner 2modello gratuito , la directory del modello 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 custom.cssfile vuoto nella sottodirectory / css / del modello. Aggiungi semplicemente i tuoi stili a questo file e saranno inclusi nel tuo layout.

Gavick Pro

I modelli Gavick Pro vengono spediti con un overrides.cssfile vuoto nella sottodirectory / css /. Si noti che questo file non viene caricato per impostazione predefinita, è necessario attivarlo Override CSSnella scheda Impostazioni avanzate nelle impostazioni del modello.

Joomla Shine

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

Quadro T3

I modelli basati su T3 Framework possono / potrebbero non includere un custom.cssfile nella sottocartella / css / del modello (è sufficiente crearlo se non è presente), ma quando presente, il file verrà caricato dopo qualsiasi altro file CSS.

Warp Framework

I modelli basati su Warp Framework caricano automaticamente il custom.cssfile trovato nella sottocartella / css /. File CSS aggiuntivi possono essere caricati aggiungendo

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

al file /layouts/template.config.php.

— johanpw
fonte

2

Per un uso generale, suggerirei di utilizzare JHtml::_('stylesheet', 'path/to/file')piuttosto che addStyleSheetcome già discusso su un'altra risposta :) A parte questo, maledettamente buona risposta. Sarà sicuramente utile per le persone

— Lodder

Grazie @Lodder. Spero che queste informazioni possano essere utili alle persone. Per quanto riguarda il tuo suggerimento, ho letto il dibattito. Come può JHtml::_essere usato con $this->template?

— johanpw,

2

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

— Lodder,

3

In realtà, i nuovi temi del razzo usano MENO. Tutto quello che devi fare è creare un file nella cartella LESS chiamato template-custom.less e inserire il tuo codice. Quindi puoi goderti i trucchi che MENO porta. Warp 7 ti permette di creare il tuo "stile" nella cartella degli stili e puoi effettivamente attaccare un file custom.css in quella cartella (all'interno della sua cartella css). In questo modo ogni stile può avere il proprio CSS personalizzato. Inoltre, resiste agli aggiornamenti dei modelli. L'uso del file custom.css predefinito significa che viene sovrascritto ogni volta che si aggiorna il tema.

— Brian Peat,

1

Ottima risposta e molto utile! Un'altra opzione che potresti voler aggiungere per modelli / framework che non includono la disposizione per file CSS personalizzati è l'uso di un'estensione di terze parti come CSSConfig extensions.joomla.org/extensions/style-a-design/templating/… che è progettato per questo preciso scopo.

— Neil Robertson,

7

Joomla 3.5+ (modello Protostar)

A partire da Joomla 3.5, puoi creare il file chiamato user.csse inserirlo in:

templates / protostella / css / user.css

Nota: il nome del file deve essereuser.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 la richiesta pull su Github

— Lodder
fonte

5

Helix Framework ( JoomShaper )

Un altro framework 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.

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.
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.

— FFrewin
fonte

3

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, meglio provare a creare il tuo file template.css personalizzato, caricarlo per ultimo e lì dentro creare 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.

— FFrewin
fonte

3

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 Hydrogen 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 una particella Atom CSS / JS personalizzata (una nuova funzionalità gantry 5), per aggiungere il tuo custom.css al modello. Gantry 5 fornisce anche i cosiddetti link stream , (come i collegamenti), 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 gantry, è 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.

— FFrewin
fonte

Come posso sovrascrivere gli stili CSS nel mio modello?

Perché utilizzare le sostituzioni CSS?

Come funzionano le sostituzioni CSS?

Uso generale

Utilizzo in diversi framework

Joomla 3.5+ (modello Protostar)

Helix Framework ( JoomShaper )

Gantry 5 (RocketTheme)