Share
Spesso nella mia carriera di web ninja, mi è stato chiesto di creare skin o progetti open source a tema per portarli in linea con il marchio dei miei clienti. A seconda del progetto, questo può essere più o meno frustrante (ti sto guardando Magento) ma MediaWiki è uno dei progetti più facili con cui lavorare grazie al numero limitato di file e cose da regolare. In questo tutorial passeremo attraverso il processo di tematizzazione che ho usato per lo stile del prossimo Wiki PSDTUTS, ma il processo, in particolare l'utilizzo di Firebug, potrebbe essere applicato a quasi tutti i CMS.
Tormare un set di codice esistente, anche se è stato creato per essere semplice come tema, può essere un compito arduo. Qui, stabilirò come farlo nel più breve tempo possibile, con il codice più pulito che è pragmatico. Ecco i passaggi che seguiremo:
Quindi una breve parola sul progetto. Sono stato assunto da Collis di Eden per creare un'installazione MediaWiki per i Wiki Photoshop PSDTUTS a cui stanno lavorando. Ecco il design che mi è stato dato:
La prima cosa da fare quando si esamina un progetto di terze parti è valutare quanto lavoro è necessario dando un'occhiata alla struttura delle directory. Nel nostro caso con MediaWiki, tutto il montaggio sarà fatto su due file all'interno del file / skins (MonoBook.php e monobook / main.css), oltre che sul caricamento di alcune immagini. Una delle grandi cose di MediaWiki è che dal momento che abbiamo a che fare solo con due file, possiamo dedicare la maggior parte del nostro tempo alla messa a punto del design per conformarci alle specifiche dei nostri clienti, non a capire dove apportare modifiche.
Dopo aver risolto i file che si stanno modificando, è importante valutare se questa sarà una riscrittura fondamentale, oppure se si modificheranno i colori e lo stile di un progetto esistente. Il mio cliente mi ha solo richiesto di regolare il tema MediaWiki predefinito. Dato che non dovremo riscrivere completamente il tema, in genere copio i file che cambieremo come backup sul server (in questo caso monoBook.php.backup e main.css.backup) e inizieremo a modificare l'originale file per ridurre al minimo la quantità di tempo che dovrò spendere.
Non entrerò nell'intero processo di conversione di un prototipo di un sito web in un sito web vivente e che respira; ma ciò su cui ci concentreremo è trovare i bit che si desidera modificare e superare quelli contenuti nei file dei modelli.
Uno degli aspetti più sorprendenti nello sviluppo e nella progettazione del web all'indomani del movimento degli standard web è l'utilizzo coerente di CSS per lo stile di siti Web e software web come MediaWiKi. A causa del lavoro svolto dai nostri padri del web geek (e madri!), Possiamo essere certi che qualsiasi progetto affrontato utilizzerà in genere queste tecnologie avanzate. Diamo un'occhiata a come possiamo sfruttare questo aspetto per il nostro stile.
I fogli di stile CSS vengono chiamati a causa di una cascata o regole di ereditarietà che segue. Se hai un foglio di stile esterno che imposta questa regola:
corpo
sfondo: blu;
Ma poi, più avanti nello stesso foglio di stile, c'è una seconda definizione come segue:
corpo
sfondo: rosso;
I documenti con cui hai a che fare avranno in realtà uno sfondo rosso perché questa era l'ultima dichiarazione che è stata fatta. Allo stesso modo, i CSS obbediranno a qualsiasi regola che sia più specifica, ad esempio, se hai uno stile impostato su tutti
ul margin-left: 100px;
Ma poi re-impostare quella regola per le liste con una certa classe come;
ul.monkey margin-left: 0px;
A causa delle regole di specificità, tutte le liste che hanno la classe impostata su scimmia non avranno margini sul lato sinistro, mentre la maggior parte degli elementi della lista non ordinata avrà il margine sulla sinistra di 100 pixel. Questo è incredibilmente utile ed efficace perché puoi semplicemente reimpostare gli stili alla fine del tuo foglio di stile per il tuo particolare progetto, al fine di apportare correzioni allo stile e renderlo più in linea con il tuo nuovo sito! (guarda come l'ho fatto per questo progetto alla fine del foglio di stile)
Abbiamo esplorato un po 'come correggere lo stile e portarlo in forma per il tuo nuovo tema, ma mettiamoci giù e sporchi e iniziamo a scrivere del codice. Il tema che Collis ha creato è fondamentalmente un re-styling dell'attuale tema "predefinito" MediaWiKi nei colori e nelle sensazioni di PSDTUTS, quindi sapevo che lo sfondo sarebbe stato questo colore:
Fatto facilmente! Ho appena aperto il file "main.css" di cui abbiamo parlato in precedenza nella directory / skins / monobook / e inserito il seguente codice:
/ * Le cose aggiunte per far sembrare PSDTUTS! * / Body background: # 2b241e;
La prima riga è chiamata commento, se stai già scrivendo molto codice (Css, Xhtml, Php o C ++!) Probabilmente conosci i commenti. I commenti ci permettono di lasciare le informazioni memorizzate nei nostri documenti che non verranno visualizzate sul sito web finale, ma ci permettono di ricordare cosa stavamo pensando durante quella sessione di codifica a tarda notte che terminava il tuo progetto in ritardo.
La prossima dichiarazione è molto chiara, semplicemente ripristina il colore di sfondo per l'elemento del corpo. A causa delle regole di ereditarietà CSS di cui abbiamo già parlato, questo colore di sfondo supererà il colore di sfondo precedentemente impostato poiché è impostato in un secondo momento nel documento. Tutti saluti CSS!
Ora stiamo andando lungo la strada giusta per ottenere il nostro tema funzionante e bello, ma non tutti gli elementi CSS del tuo nuovo tema saranno facili da trovare e correggere come l'ovvio
etichetta. In realtà, questo è sempre stato un grosso ostacolo nel progettare tutti i tipi di prodotti CMS.Un modo davvero fantastico per rintracciare questo div è quello di usare un plugin Firefox di grande valore chiamato Firebug.
Se non li hai già installati, installa Firefox e Firebug. Firebug è un plugin per Firefox che renderà il tuo flusso di lavoro di sviluppo web molto più semplice! Lascerò a te esplorare il loro sito per trovare tutte le cose straordinarie che Firebug ti renderà più facile, lo useremo semplicemente per identificare gli elementi nel nostro tema e per scoprire come identificare i selettori da utilizzare in il tuo file css per cambiarli.
Più facile a dirsi che a farsi eh? Vediamo un breve video:
Spero che ora tu abbia una migliore comprensione di come iniziare a mettere a punto un wiki, o qualsiasi CMS in effetti.
Per darti un'idea di come è il mio processo, l'ho registrato mentre lavoro sul wiki. Se hai idee per "accelerare" questo processo, o avere un modo diverso di fare le cose, per favore, fammi sapere nei commenti!
(Musica per gentile concessione di JustWaitSee)
Puoi vedere il progetto finito sul sito Wiki Photoshop di PSDTUTS, anche se il progetto non è ufficialmente decollato, quindi non aspettarti di vedere troppo là ancora!
Accentsconagua