Share
Sto appena iniziando a creare un Joomla! modello e confuso su come ottenere davvero un controllo su come modificarlo? Dai uno sguardo a questi semplici suggerimenti e trucchi che ti daranno un controllo migliore durante la progettazione del tuo sito Joomla.
Quando ho iniziato a creare i template Joomla c'erano alcune cose di cui ero confuso. Come dovrei modificare solo una pagina senza influenzare gli altri? Come posso cambiare la struttura di un modulo in modo che sia più facile da stile? In questo articolo parleremo di come risolvere questi problemi e di esaminare altre soluzioni rapide che è possibile utilizzare per accelerare il lavoro di sviluppo dei template di Joomla.
Prima di poter modificare e sviluppare il modello, è necessario disporre di un'installazione Joomla con cui lavorare. Usando WAMP per Windows o MAMP per Mac (Userò WAMP per questo esempio), creeremo una semplice installazione di Joomla ospitata direttamente sul tuo computer in modo da poter iniziare con le modifiche ai modelli.
Per prima cosa, vai su www.wampserver.com/it. Nella home page fai clic su "Scarica l'ultima versione di Wampserver 2".
Ora fai clic sul collegamento per il download per la versione a 32 bit o la versione a 64 bit di WAMP (a seconda della versione di Windows in uso). Se non sai quale versione hai, fai clic sul pulsante di avvio e digita "dxdiag" nel campo di ricerca. All'interno dello strumento di diagnostica DirectX ti dirà quale versione stai utilizzando accanto al sistema operativo. Scarica WAMP ed esegui .exe per installare il programma usando la directory predefinita di C: \ wamp. Chiederà anche quale browser si desidera utilizzare per l'anteprima predefinita, ma non lo uso mai, quindi scegli explorer.exe. Non useremo SMTP o e-mail, quindi lasciamo quelli come valori predefiniti e poi lanciamo WAMP.
Un'icona verrà visualizzata nel vassoio della barra delle applicazioni per WAMP e dovrebbe essere arancione. Ciò significa che il server localhost è offline. Per attivarlo online (in modo da poter iniziare a lavorare con esso), fare clic con il tasto sinistro del mouse sull'icona e selezionare "Avvia tutti i servizi". Quindi fai nuovamente clic con il tasto sinistro sull'icona e seleziona "Metti online". Questo avvierà il server localhost sul tuo computer.
Nota: Se sul tuo computer ci sono cose come Skype o Teamviewer in esecuzione, questo impedirà a WAMP di andare online quindi assicurati di disattivare questi programmi prima di provare ad avviare l'host locale.
Ora che abbiamo configurato il server localhost, possiamo procedere con il download dell'ultima installazione Joomla con cui lavorare. L'ultima versione di Joomla al momento è 1.7, ma useremo Joomla 1.5 per questo tutorial; è più stabile e ha il maggior numero di estensioni e modelli disponibili per questo.
Vai a www.joomla.org. Una volta fatto clic sul pulsante "Scarica Joomla" nella parte centrale destra della pagina. Scorri verso il basso e cerca l'ultima versione di Joomla 1.5. Al momento della stesura di questo documento è 1.5.23 e vogliamo il pacchetto completo, quindi fare clic sul collegamento "ZIP" per scaricarlo. Ora vai nella directory C: \ wamp \ www e crea una nuova cartella chiamata "joomla". Copia il file zip Joomla appena scaricato in questa cartella ed estrai con uno strumento come 7zip o WinRAR che sono entrambi disponibili per il download da download.com. Questo estrarrà l'intero pacchetto Joomla in quella directory e ti permetterà di installarlo.
Per installare Joomla, vai nel tuo browser e digita "localhost / joomla / installation". Se tutto è andato bene, ti mostrerà la pagina "Scegli la lingua". Scegli la tua lingua e fai clic sul pulsante "successivo" nell'angolo in alto a destra. Per il controllo pre-installazione, non è necessario modificare nulla, quindi fare clic su "Avanti". Di nuovo, fai clic su "Avanti" per accettare la licenza pubblica GNU.
Ecco la parte più importante dell'installazione: creare il database e l'utente. Al momento non disponiamo ancora di un set, quindi lo creeremo ora.
Per creare il database e l'utente del database, useremo PHPmyadmin per WAMP. Fai clic con il tasto sinistro sull'icona WAMP nella barra delle applicazioni e seleziona "PHYmyadmin" nella parte superiore del popup. Questo farà apparire PHPmyadmin nel tuo browser. La prima schermata è dove creeremo il database per Joomla.
Nel campo "Crea nuovo database", digitare il nome del database desiderato. Qualcosa come "modello" sarà sufficiente. Il database è ora creato e ti mostrerà che al momento non ci sono tabelle. Il prossimo passo è creare un utente con tutte le autorizzazioni in modo che il database sia accessibile da Joomla. Vai alla scheda "Privilegi" in alto e fai clic su "Aggiungi nuovo utente".
In questa nuova schermata, inserisci il nome utente che desideri utilizzare. Ho scelto "template_user" come nome utente e "1234" per la mia password. Ovviamente su un server reale vorresti usare qualcosa di molto più sicuro di questo per il tuo utente e la tua password, ma per localhost non è molto rilevante. Per il campo host compilare "localhost". Ora sotto, dove dice database per utente, il default dovrebbe essere l'ultimo pulsante radio. Se non si fa clic sull'ultimo pulsante di opzione che dice qualcosa come "Concedi tutti i privilegi sul modello di database" ". Subito sotto, accanto a Global Privileges, fai clic sul link "Check All" e quindi fai clic sul pulsante "Vai" nell'angolo in basso a destra.
Di seguito è riportato un esempio che mostra come dovrebbe essere.
Ora che il tuo utente e il tuo database sono stati creati, puoi tornare alla schermata di installazione di Joomla e inserire questi elementi nei campi per il database: prima di tutto, il tipo di database è "mysql", quindi inserisci "localhost" per l'host nome. Inserisci il nome utente che hai creato e la password. Per terminarlo digita il nome del database che era "modello" e fai clic su Avanti. Nella schermata di configurazione FTP lasciare tutto come è e fare clic su "Avanti" senza abilitare il livello del file system FTP.
L'ultima schermata è la configurazione principale per l'installazione. Digita il nome del tuo sito che chiamerò "Suggerimenti del modello". Inserisci la tua e-mail, la tua password amministratore (possiamo usare nuovamente 1234 per questo esempio) e quindi confermare la password dell'amministratore. Quando inizi a creare modelli, ti consigliamo di installare i dati di esempio perché danno al sito una sensazione "completa" quando stai provando a progettare, piuttosto che iniziare con una lavagna vuota. Se non hai installato dati di esempio, quando vai al tuo sito Joomla dopo che avremo terminato, sarà praticamente vuoto e non ci sarà alcun contenuto da abbinare.
Nota: Una volta diventato più avanzato con la modifica del modello, non sarà più necessario installare i dati di esempio. Ci vorrà più tempo per te uninstalla tutto questo contenuto fittizio di quanto non ti risparmi nell'aiutare a visualizzare il modo in cui il modello appare.
Quindi fare clic sul pulsante "Installa dati di esempio" e quindi fare clic sul pulsante "Avanti".
L'ultimo e ultimo passaggio per l'installazione di Joomla (prometto) è quello di rimuovere la directory "installazione" dalla cartella "joomla" creata in WAMP. Vai a C: \ wamp \ joomla ed elimina completamente la directory di installazione. Ora vai su localhost / joomla e vedrai che Joomla è stato installato e siamo pronti per andare con l'installazione del modello con cui lavoreremo.
Ultimamente i framework template di Joomla sono stati tutti entusiasti perché ti permettono di completare un template più velocemente e molto del lavoro è già stato fatto sul template stesso. Alcuni dei framework più popolari includono il framework YooTheme Warp e il framework Rockettheme Gantry. Entrambi questi framework sono stati costruiti da zero per porre rimedio a ripetitivi compiti ripetitivi su ogni modello e includono anche funzionalità eccezionali come un modello di cellulare incorporato e funzionalità di backend che ti consentono di cambiare il modo in cui il modello appare senza nemmeno modificare qualsiasi cosa usi i parametri di backend. Per il resto di questi suggerimenti ed esempi, userò un modello YooTheme che utilizza il framework Warp 6.
Nota: Devi acquistare un abbonamento a un modello YooTheme per utilizzare un modello sul tuo sito e modificarlo, ma vale la pena spendere di più per risparmiare un sacco di tempo a lungo termine.
Alcuni fornitori di framework e temi includono:
Sentiti libero di guardare intorno a ciascuno dei loro siti e vedere quali modelli ti piacciono di più e quale framework funzionerà meglio per te. Ogni fornitore di template ha i propri standard che ha impostato per il loro framework, quindi è di gusto personale e l'elenco delle funzioni di cui si vuole andare. Da quando ho scelto di andare con il framework di Warp 6 di YooTheme, inizierò installando un modello Warp 6 sul mio server localhost.
Dopo aver scaricato il modello, vai su localhost / joomla / administrator. Digitare "admin" come nome utente e "1234" per la password per accedere al back-end. Sulla barra in alto passa con il mouse sulle estensioni e fai clic su "Installa / Disinstalla". Nel campo del file del pacchetto di caricamento fai clic su "Sfoglia" e trova il pacchetto di modelli che hai scaricato sul tuo computer. Ora fai clic sul pulsante "Carica file ampli". Il tuo modello è ora installato, ma per attivarlo effettivamente come modello devi completare un ulteriore passaggio.
Vai su "Estensioni" nella barra in alto del backend Joomla e quindi fai clic su "Gestione modelli". Il modello che ho installato è intitolato "yoo_nano", quindi cerca il tuo modello nell'elenco dei modelli e quindi fai clic sul pulsante di opzione a sinistra. Quindi fai clic sull'icona a forma di stella che è il pulsante "Predefinito" nell'angolo in alto a destra. Ora il tuo nuovo modello è impostato come quello che userà Joomla. Aggiorna la tua homepage e dovresti vedere le modifiche!
Questo è probabilmente il consiglio più utile che abbia mai imparato in Joomla e funziona utilizzando i parametri URL nell'indirizzo del browser per specificare gli stili per determinate pagine. Innanzitutto, dobbiamo inserire il codice che attira le variabili dall'URL. Di seguito è riportato il codice PHP necessario per utilizzare le variabili più comuni in Joomla, come itemid, id, view, option, ecc. Copia e incolla il codice qui sotto nel del tuo documento.
Ora, la seconda parte di questo è in realtà mettere queste variabili a lavorare come classi CSS sul tag in modo da poter approfittare di loro. Copia e incolla il codice qui sotto nel class = "" dell'elemento del corpo nel tuo modello.
cid- id- compito- catid- opzione- numero identificativo dell'oggetto- vista- opzione-
Il risultato finale dovrebbe assomigliare a questo:
Ora diamo un'occhiata ai parametri URL del nostro sito Joomla. Per iniziare, fai clic su uno dei link sulla prima pagina che va a un'altra pagina del sito. Ad esempio, sulla mia pagina ho cliccato su "Continua a leggere" come mostrato di seguito. Alcuni link potrebbero essere hardcoded, quindi cerca un link che mostri che le variabili non sono compatibili con i motori di ricerca.
Ora se guardi la barra degli indirizzi del tuo browser vedrai i parametri associati a questo particolare URL come mostrato qui:
http: //localhost/joomla/index.php option = com_content & view = article & id = 44:? joomla-sicurezza-strike-team & catid = 1: ultima news & Itemid = 50
Come puoi vedere sopra, l'opzione per questa pagina è "com_content". La vista per questa pagina è "articolo" e l'articolo per questa pagina è "50". Itemid è in riferimento a quale singola voce di menu è associato questo articolo. Ricorda, in Joomla tutto deve avere un itemid di menu ad esso associato, altrimenti non puoi assegnare moduli ad esso. Quindi, utilizzando queste informazioni dall'URL, tali informazioni sono ora disponibili per l'utilizzo attraverso le variabili che sono state create nel del documento.
Diamo un'occhiata alla pagina in cui ci troviamo ora. Di seguito è riportato un grafico che mostra quali parti voglio modificare esclusivamente per questa pagina e non altre.
Il modo più semplice per capire dove si trova il codice CSS per questi due elementi è utilizzare uno strumento di sviluppo come Firebug (per Firefox) o strumenti di sviluppo Webkit (per Chrome). Usando Firebug, passerò il mouse su questi elementi e cercherò di vedere dove si trova il CSS per ogni singolo elemento.
Come puoi vedere, stiamo lavorando con un tag H1 con la classe di "titolo". Diciamo che vogliamo cambiare questo colore del testo in rosso. Guardando sul lato destro del pannello di Firebug posso vedere che ci sono stili associati a questo elemento in system.css, trebuchet.css, base.css, ecc. In genere si desidera utilizzare il modello CSS principale per il proprio modello per apportare modifiche così come per questo modello si chiama layout.css. Per il tuo modello potrebbe essere chiamato qualcosa come template_css. o template.css o anche base.css. Indipendentemente da ciò, andare in uno di questi file CSS navigando in C: \ wamp \ joomla \ templates \ [nome modello] \ css \ layout.css. (Questo percorso potrebbe essere diverso per il tuo modello). Una volta dentro, scorri fino in fondo (per assicurarti che sia lo stile più specifico in questo file) e aggiungi del codice come questo.
.itemid-50 #system .title color: red;
Salva il file CSS e aggiorna la pagina. Se lo hai fatto correttamente dovrebbe cambiare il titolo di questa pagina in rosso. Se navighi su un'altra pagina, noterai che non è cambiata per il resto. Se dovessi cambiare questo stile globalmente, ciò influenzerebbe l'intero sito. Di seguito è riportato l'esito di questo cambiamento di stile:
Per fare la seconda modifica al testo "Scritto da", vorrei semplicemente evidenziare l'elemento con Firebug allo stesso modo, capire quale sia il suo nome e dove viene stilizzato nei file CSS e quindi usare le variabili PHP dall'URL ancora per modellarlo. Quindi per modellare il "scritto da" solo per questa pagina, lo renderò più grande e lo colorerò di blu.
.itemid-50.view-article #system .meta color: blue; font-size: 15px;
Si noti sopra che ho usato una combinazione interessante sia della variabile itemid $ che della variabile $ view. Puoi usare i CSS per concatenare due classi insieme per renderlo più specifico. Quello che sta dicendo questo codice è: L'itemid deve essere 50 per questa pagina e deve essere la vista dell'articolo altrimenti questo CSS non si applica. Ti consente di individuare gli elementi target in modo ancora più specifico.
Usando la stessa idea ma con istruzioni PHP se invece: Usando questa stessa idea possiamo anche eseguire PHP Se dichiarazioni nell'index.php o template.php del modello del tuo sito per apportare modifiche basate su queste variabili URL. Per esempio, diciamo che abbiamo una posizione del modulo impostata con una classe div chiamata "slideshow". Ecco un esempio:
ecco la mia posizione di presentazione
Voglio solo che questa presentazione appaia sulla pagina con un itemid di 50 - nessun altro. Ciò sovrascriverà persino le impostazioni specificate per il modulo nel back-end, dove gli dirai su quali voci del menu vuoi che appaia. Quindi per fare questo avvolgiamo un Se dichiarazione attorno al blocco div come mostrato di seguito:
ecco la mia posizione di presentazione
Ora questo div apparirà solo su questa pagina e verrà rimosso dal codice se non siamo sull'articolo 50. Uso sempre queste tecniche con i modelli e sono estremamente utili, quindi consiglio di abituarmi all'utilizzo loro.
L'utilizzo di posizioni del modulo comprimibili in Joomla è praticamente una necessità, a meno che non si desideri visualizzare le posizioni anche per i moduli vuoti. Ad esempio, supponiamo di avere un modulo nella colonna destra del tuo sito in un div chiamato "right_col". Su una certa pagina non vuoi che venga visualizzata la colonna giusta se non c'è nulla in essa. Se non hai un collasso Se dichiarazione attorno a quella particolare posizione del modulo, anche se non c'è nulla abilitato su quella pagina per quella posizione che continuerà a mostrare. Finirai con una colonna bianca vuota con niente in essa.
Per assicurarti che la colonna a destra crolli quando è vuota, puoi individuare una posizione modulo esistente o crearne una tua. Diversi modelli hanno vari modi di creare i moduli di conteggio Se dichiarazione (countModules è il collasso Se dichiarazione). Per il modello Warp 6, è scritto in questo modo:
Accentsconagua
// questo è lo stile framework di warp 6 che mostra la posizione di un modulo e avvolge un countModule se l'istruzione lo circonda contare ("breadcrumb")):?> rendering ( 'pangrattato'); ?> Ma per altri template, potrebbe essere più semplicistico come questo: (il codice sotto è il modo più comune di scrivere i countModules Se dichiarazione)
// questo è lo stile framework di warp 5 che mostra la posizione di un modulo e avvolge un countModule se l'istruzione lo circonda countModules ('right')):?> Nota: Affinché il countModules funzioni, deve esserci una posizione modulo tra il Se dichiarazione in modo che possa vedere se qualcosa è pubblicato in quella posizione oppure no. Quindi, per esempio, nel codice precedente il countModules sta cercando di vedere se qualcosa è pubblicato nella posizione "giusta". In caso contrario, l'intera classe div right_column non verrà visualizzata. Se c'è qualcosa pubblicato in questa posizione, mostrerà tutto tra l'inizio del Se dichiarazione e la chiusura finisci se.
In sostanza, è un concetto semplice che consente alla tua pagina di essere più dinamica, quindi se vuoi che pagine diverse abbiano layout diversi, questo è ciò che ti permette di farlo. Prova a combinare i moduli count Se dichiarazione con i suggerimenti delle variabili URL sopra per rendere il modello ancora più flessibile. Dal momento che Joomla è un sistema di gestione dei contenuti, l'idea alla base di questo è di essere dinamica e flessibile.
Supponiamo che tu voglia mostrare un elemento specifico nella pagina solo se l'utente ha effettuato l'accesso. Ciò potrebbe essere utile se desideri che le persone si registrino per il tuo sito prima che possano accedere ai contenuti. Esistono modi molto più robusti per usare i controlli di accesso in Joomla oltre a questo, ma come un modo rapido per cambiare qualcosa in base a se l'utente è loggato in questo tip funziona perfettamente. Di seguito è riportato il codice che ti servirà:
id) echo ""; else ?> id) echo ""; else ?>
Entrambi i pezzi di codice sono identici, tranne uno apre il div id dei membri e quindi il secondo pezzo di codice chiude quel div. Quello che fai è prendere il primo pezzo di codice e metterlo sotto la tua apertura etichetta. Prendi il secondo pezzo di codice e mettilo a posto prima della chiusura etichetta. Salva la pagina e aggiorna. Ora se vai sul tuo sito, guarda firebug e scorri il DOM (documento oggetto modulo) nel pannello di sinistra noterai che il div id di "membri" sta ora avvolgendo l'intero sito. Questo div apparirà solo se la persona ha effettuato l'accesso.
Diamo un'occhiata ad un semplice esempio di cosa potresti fare con questo codice. Diciamo che per qualche motivo voglio che il colore dello sfondo dell'intestazione sulla mia pagina sia diverso per gli utenti registrati. Questo è molto facile da fare ora dato che posso usare id #members per specificarlo.
#members #header background: blue;
Questo è praticamente tutto quello che c'è da fare. Questo potrebbe essere utile per cambiare uno sfondo su un modulo o altre posizioni nel tuo sito (per riflettere una promozione o qualsiasi altra cosa tu possa pensare).
Potrebbe arrivare un momento in cui stai sviluppando un modello in cui desideri che un modulo specifico abbia l'impressione di non condividerne nessuno. Ad esempio, supponiamo che tu abbia un modulo per i post sul forum che qualcuno vuole sponsorizzare e vorrebbero il loro logo accanto al titolo del modulo che dice "Powered by XYZ" o qualcosa del genere. Questi sono resi possibili da quelli che sono chiamati suffissi di classe del modulo. Un suffisso di classe del modulo è una classe aggiuntiva aggiunta attraverso i parametri di backend del modulo stesso. Ad esempio, diamo prima un'occhiata a come aggiungere un suffisso di classe del modulo.
Anche in questo caso, i diversi framework funzionano in vari modi, ma in questo caso il modo per aggiungere un suffisso di classe del modulo è quello di mettere lo stile [qualunque sia il suffisso]. Altri modelli potrebbero avere solo bisogno - [il nome del suffisso] senza lo stile di fronte ad esso. Consiglio di guardare la documentazione del tuo particolare quadro per chiarire.
Vai nel backend dell'installazione di Joomla localhost su localhost / joomla / administrator. Quindi vai alla barra in alto, vai su "Estensioni" e quindi fai clic su Module Manager. Trova il modulo specifico con cui vuoi lavorare o creane uno nuovo se lo desideri. Per questo esempio ho creato un modulo chiamato "Module Class Suffix" e lo metto nella colonna di destra del mio modello. Di seguito è riportato un grafico di come appare la pagina:
Nota sul lato destro c'è un campo chiamato "suffisso classe modulo" e ho inserito in stile-acqua il mio suffisso poiché questo è un modello di deformazione. Applica queste modifiche al modulo e poi vai al frontend. Se usi firebug e passa il mouse sopra il modulo che hai creato, dovrebbe mostrare che il suffisso di classe è ora una classe CSS sul modulo stesso.
Ora puoi usarlo per modellare il modulo come vuoi e questo avrà effetto solo su questo modulo (o su qualsiasi altro a cui assegni questo suffisso di classe modulo). Ecco un esempio di codice che ho usato per creare uno stile semplice di questo modulo:
.style-water h3.module-title colore: blu; .style-water background: # ecf9ff; imbottitura: 10px;
Ed ecco uno screenshot precedente e successivo delle modifiche:
Se non desidero che questo modulo assomigli più a questo, rimuoverò il suffisso di classe del modulo dal parametro nel gestore del modulo e tornerà all'impostazione predefinita. In seguito vedremo come modificare il modello attuale del modulo in modo da avere un controllo migliore della sua produzione e dello stile.
I suffissi di classe del modulo sono ottimi per lo styling di singoli moduli, ma cosa succede quando si desidera modificare il modello effettivo per il modulo? Ogni volta che creo un modello, una delle cose che mi piace fare è rendere il modulo più semplice da creare creando una struttura div come questa:
Questo è così bello da avere come modello di modulo perché puoi ottenere tantissimi look diversi per un modulo solo con queste tre div. Affettare da Photoshop e convertirlo nel modello è molto più semplice in questo modo. Dai un'occhiata al layout del modulo originale nel modello che sto utilizzando:
Abbiamo un tag h3, un tag di paragrafo e il gioco è fatto. Non posso fare molto stile in questo modulo con solo questi due elementi, quindi per rendere più semplice lo stile dobbiamo modificare il modello del modulo stesso. Ancora una volta, questo varia a seconda del modello, ma in generale stai cercando gli stessi file - potrebbero essere solo in punti diversi.
Per questo modello particolare sto cercando questi file:
default-1.php è il file di modello del modulo effettivo e module.php controlla quali modelli di modulo sono associati a quali posizioni. Come facevo a sapere che default-1.php era il modello di modulo usato per la colonna di destra? Usando module.php posso vedere quale template è associato alla colonna di destra con questo codice:
// imposta i tipi di modulo predefiniti if ($ style == ") if ($ module-> position == 'top-a') $ style = 'line'; if ($ module-> position == 'top-b ') $ style =' line '; if ($ module-> position ==' bottom-a ') $ style =' line '; if ($ module-> position ==' bottom-b ') $ style =' line '; if ($ module-> position ==' innertop ') $ style =' line '; if ($ module-> position ==' innerbottom ') $ style =' line '; if ($ module-> position == 'sidebar-a') $ style = 'line'; if ($ module-> position == 'sidebar-b') $ style = 'line';
Come puoi vedere sopra, a ogni posizione del modulo è associato uno stile $. In questo caso sono tutti chiamati "linea". Per questo modello, la colonna di destra è in realtà chiamata sidebar-a, quindi ho cercato sidebar-a e ho scoperto che lo stile $ era uguale a "line". Scorrendo più in basso questo file posso vedere quale modello di modulo è associato allo $ style di "line".
switch ($ style) case 'line': $ template = 'default-1'; $ style = 'mod -'. $ style; $ style. = ($ color)? 'mod-line -'. $ color: "; $ split_color = 1; $ subtitle = 1; $ title_template = '%S
'; rompere; case 'dropdown': $ template = 'dropdown'; $ sottotitolo = 1; rompere; case 'raw': $ template = 'raw'; rompere; default: $ template = 'default-1'; $ style = $ suffisso; $ title_template = '%S
';
In questo caso di commutazione puoi vedere che il caso 'linea' ha il modello $ di "default-1". Lo stile del modulo predefinito per tutte le posizioni è anch'esso predefinito 1, a meno che non sia specificato diversamente. Ora che so quale modello di modulo è associato a questa posizione del modulo, posso modificarlo in base alle mie esigenze.
Aprendo default-1.php ora, possiamo vedere che il codice assomiglia a questo:
Come puoi vedere, è piuttosto semplice. Non un sacco di div in là per stile. Vogliamo aggiungere le div che ti ho mostrato sopra per rendere questo modulo più facile da controllare. Cambia il codice sopra per assomigliare a questo:
Mi sono liberato del badge perché non volevo che comparisse nel mio modello di modulo, ma potresti mantenerlo se vuoi. Il badge è solo uno stile che i modelli Warp hanno associato ai suffissi di classe del modulo. Ora che abbiamo questo layout, è molto più semplice modellare il modulo. Di seguito è riportato un esempio di maggiore flessibilità:
Ed ecco il codice per ottenere questo stile (so che queste sono davvero brutte combinazioni di colori, ma sono usate a scopo illustrativo:
.style-water background: # ecf9ff; imbottitura: 10px; .style-water .module_header font-size: 18px; font-weight: bold; sfondo: blu; colore bianco; imbottitura: 10px; .style-water .module_header h3 margin: 0; .style-water .module_middle background: white; imbottitura: 10px; .style-water .module_bottom height: 15px; sfondo: rosso;
Sappiamo tutti che Internet Explorer è la rovina della nostra esistenza, quindi non posso completare questo tutorial senza includere i condizionali di base di IE che ti permettono di creare elementi sulla pagina in base alla versione di IE che hai scelto come target. Questo non è un suggerimento specifico per Joomla, ma ti mostrerò come applicarlo in Joomla.
Nota: Questo metodo è per correzioni rapide e non dovrebbe essere usato per correggere tutti i bug di IE. Se hai molti bug che devono essere corretti, dovresti usare un foglio di stile solo IE che si carica solo quando le persone usano quel particolare browser.
È abbastanza semplice includere questi condizionali nel tuo template Joomla. Sfruttando il modo in cui i sistemi di gestione dei contenuti funzionano, puoi semplicemente posizionare i condizionali nel tuo file di modello principale e funzionerà in tutto il sito, il che consente di risparmiare un sacco di tempo. Di seguito è riportato un esempio delle condizioni condizionali di IE:
Come puoi vedere sopra, sto prendendo di mira Internet Explorer 7 con questi condizionali. Puoi anche facilmente indirizzare altre versioni di IE semplicemente cambiando il 7 in un
