Di solito modifico solo modelli gratuiti esistenti e cambio colori e caratteri. La domanda è: quando ho già la mia pagina Joomla online, qual è il modo più semplice per apportare modifiche al modello CSS?

Attualmente sto usando gli strumenti di sviluppo di Chrome per trovare e regolare stili specifici per un'anteprima. Se mi piace, aggiorno il file css del modello direttamente nell'editor online nell'area di amministrazione.

Quando ho iniziato e non avevo contenuti, ho usato un server web locale con Joomla che aveva il vantaggio di poter usare un IDE corretto per scrivere codice css e php. Dal momento che ho già alcuni contenuti ora, vorrei vedere come appaiono le modifiche con i contenuti che ho.

So che questa è una domanda di base, ma esiste un flusso di lavoro preferito quando qualcuno vuole adattare il design di un sito esistente?

Clonare il sito di vita con Akeeba, installarlo localmente, quindi regolare come richiesto. Quando hai finito SSH / FTP i tuoi file modificati sono tornati al sito live.

Ci sono tutta una serie di buoni motivi per cui è imprudente "modificare" su un sito live ...

Hai alcune opzioni qui, a seconda che la tua attenzione sia la facilità d'uso, l'automazione o il costo:

• Fai esattamente quello che hai fatto prima con l'installazione locale, ma una volta installato, modifica l'installazione locale di Joomla per utilizzare il tuo database MySQL remoto dal vivo configuration.php, se l'host supporta l'accesso remoto. Attenzione però: qualsiasi modifica al DB passerà al live ...

• Utilizza un componente come extplorer e modifica i file modello direttamente nel browser, con un'altra scheda aperta che mostra il sito, utilizzando ancora gli strumenti di sviluppo di Chrome. extplorer presenta una colorazione del codice ed è ideale per apportare rapidamente piccole modifiche.

• Usa un sistema di controllo della versione per inviare le modifiche, ad esempio sviluppa il tuo modello in un'installazione Joomla locale usando l'IDE scelto, con il modello in un repository. Al termine, apporta le modifiche al tuo sito live. Utilizzare un hook post-commit per verificare tali modifiche come versione funzionante. Sebbene sia più complicato da configurare, significa che puoi sempre ripristinare le versioni precedenti del modello se commetti un errore. Aggiungi MySQL remoto per garantire la coerenza dei dati tra locale e live.

• Paga per un modello / modello adeguato: nella mia azienda utilizziamo i modelli YooTheme . Questo framework di template ha una funzione chiamata 'Customizr', che è fondamentalmente una finestra a 2 riquadri con centinaia di variabili CSS (beh, variabili LESS) a sinistra e un'anteprima live a destra. Queste variabili controllano abbastanza vicino a ogni elemento del modello, dall'imbottitura della grondaia all'ombra del testo delle voci di menu e tutto il resto. Le modifiche vengono applicate istantaneamente nell'anteprima e possono essere definiti più 'stili' in modo da poter giocare con diverse configurazioni variabili. Detto questo, sono sicuro che altri framework di template hanno caratteristiche molto simili.

NB: Non ho alcuna relazione con extplorer né con YooTheme se non come utente.

Se si tratta solo di modifiche CSS che stai apportando, puoi anche continuare a visualizzarle in anteprima negli Strumenti di sviluppo di Chrome e utilizzando un ambiente di sviluppo online come Cloud9 o ShiftEdit , puoi connetterti direttamente al tuo server tramite FTP e apportare modifiche al sito live utilizzando un IDE appropriato simile a come hai fatto quando è stato ospitato localmente.

Non lo consiglierei comunque per eventuali cambiamenti più grandi che potrebbero danneggiare il tuo sito (l'ho imparato nel modo più duro qualche anno fa). Per questi, ti consiglio di configurare un server locale (o una VM gratuita da koding.com ), clonare il sito con Akeeba e usare Git * per inviare le modifiche al tuo sito live dopo che sono state testate.

* Se non vuoi che il tuo codice sia pubblico su GitHub, una buona alternativa è BitBucket .

Metodo 1

Un metodo che ho usato è quello di aggiungere il mio file css nel file index.php del modello. Questo può essere racchiuso per aggiungerlo solo se sei l'utente.

Un modo per estenderlo è scrivere un semplice plugin che aggiunge un file css se sei l'utente. L'ho usato per apportare modifiche al modello di amministrazione predefinito, per evitare di apportare direttamente modifiche al modello che potrebbero essere sostituite dal prossimo aggiornamento.

Qualcosa di simile a...

class plgSystemBB extends JPlugin {
    public function onBeforeCompileHead() {

    if (JFactory::getUser()->username == 'my.login.name.goes.here')
    {
        JFactory::getDocument()->addStylesheet("/templates/protostar/css/test.css");
    }

    if(!JFactory::getApplication()->isAdmin()){
        return;
    }   

    JFactory::getDocument()->addStylesheet("/templates/isis/css/admin-extra.css");
}

Metodo 2

Per visualizzare l'anteprima delle modifiche al modello, è possibile duplicare il modello e apportare modifiche nel duplicato. Per visualizzare tali modifiche, aggiungi "? Template = test" all'URL, che sostituisce il modello. Sostituisci "test" con qualsiasi nome tu abbia deciso di usare per il duplicato.

Nota che devi duplicare l'intero modello e non solo uno stile. Sia gli stili che i modelli possono essere duplicati nella GUI dell'amministratore.

Non credo che sia possibile sovrascrivere uno stile nell'URL. [PW: Ho appena scoperto che in J3, puoi sovrascrivere uno stile nell'URL. Vedi metodo 3.]

Metodo 3

Simile al metodo 2 ma con stili. Utilizzare uno stile "test" e modificare il modello principale per includere il foglio di stile di test. Per sovrascrivere uno stile nell'URL, aggiungi? TemplateStyle =, dove si trova l'identificatore del modello (cioè numerico).