Share
Adesea, în cariera mea de ninja web, mi sa cerut să derulăm proiecte sau proiecte de temă open source pentru a le aduce în conformitate cu brandul clienților mei. În funcție de proiect, acest lucru poate fi mai mult sau mai puțin frustrant (vă uit la Magento), dar MediaWiki este unul dintre proiectele mai ușoare de lucru, datorită numărului limitat de fișiere și a lucrurilor de ajustat. În acest tutorial vom trece prin procesul tematic pe care l-am folosit pentru a modela viitoarea PSDTUTS Wiki, dar procesul, în special folosind Firebug, ar putea fi aplicat la aproape orice CMS.
Temporizarea unui set existent de cod, chiar dacă a fost făcută ușor de tematic, poate fi o sarcină descurajantă. Aici, voi stabili cum să obțineți acest lucru cât mai repede posibil, cu cel mai curat cod care este pragmatic. Iată pașii pe care îi vom face:
Deci, un cuvânt rapid despre proiect. Am fost angajat de Collis din Eden pentru a crea o temă pentru instalarea programului MediaWiki pentru viitorul PSDTUTS Photoshop Wiki la care lucrează. Iată designul care mi-a fost dat:
Primul lucru pe care trebuie să-l faci atunci când proiectează un proiect terț este să evaluezi cât de mult este nevoie de lucru, aruncând o privire asupra structurii directorului. În cazul nostru, cu MediaWiki, editarea se va face pe două fișiere din fișierul / skins (MonoBook.php și monobook / main.css), precum și încărcarea câtorva imagini. Unul dintre marile lucruri despre MediaWiki este că, deoarece avem de-a face doar cu două fișiere, putem petrece o majoritate a timpului nostru de reglare fină a designului pentru a se conforma specificațiilor clienților noștri, fără să ne gândim unde să facem schimbări.
După ce sortați fișierele pe care le veți edita, este important să evaluați dacă aceasta va fi o reîncadrare sau dacă veți schimba culorile și stilul deja existent. Clientul meu mi-a cerut doar să ajustez tema implicită MediaWiki. Deoarece nu trebuie să redenumim complet tema, de obicei copiem fișierele pe care le vom schimba ca copii de rezervă pe server (în acest caz monoBook.php.backup și main.css.backup) și începem editarea originalului fișiere pentru a minimiza timpul pe care va trebui să-l cheltuiesc.
Nu voi intra în întregul proces de conversie a unui mockup al unui site web într-un site web care trăiește, respirație; dar ceea ce ne vom concentra pe găsirea biților pe care doriți să le schimbați și pe depășirea celor din fișierele șablonului nostru.
Unul dintre cele mai uimitoare lucruri despre dezvoltarea web și designul în urma mișcării standardelor web este utilizarea consistentă a CSS la site-urile de stil și la software-ul web precum MediaWiKi. Datorită muncii părinților noștri (și mamelor!), Putem fi siguri că orice proiect pe care îl vom aborda va folosi de obicei aceste tehnologii avansate. Să ne uităm la modul în care putem folosi acest lucru pentru a ne modela o temă existentă.
Formatele stil cascadă sunt numite, datorită unei cascade sau reguli de moștenire care o urmează. Dacă aveți o foaie de stil externă care stabilește această regulă:
corp
fundal: albastru;
Dar apoi, mai târziu în aceeași foaie de stil există oa doua definiție după cum urmează:
corp
fundal: roșu;
Documentele cu care te confrunți vor avea de fapt un fundal roșu deoarece aceasta a fost ultima declarație făcută. În același mod, CSS va respecta orice reguli care sunt mai specifice, ca exemplu, dacă aveți un stil setat pe toate
ul marginea-stânga: 100px;
Apoi, re-setați această regulă pentru liste cu o anumită clasă, cum ar fi;
ul.monkey margin-left: 0px;
Datorită regulilor de specificitate, toate listele care au clasa setată la maimuță nu vor avea nicio marjă în partea stângă, în timp ce majoritatea elementelor listă neordonate vor avea marja din stânga de 100 de pixeli. Acest lucru este uimitor de util și eficient, deoarece puteți să resetați stilurile de la sfârșitul foii de stil pentru proiectul dvs. special pentru a face corecții stilului și pentru a aduce mai mult în conformitate cu noul dvs. site! (vezi cum am facut asta pentru acest proiect la sfarsitul foii de stil)
Am explorat un pic despre cum să corectăm stilul și să-l aducem în formă pentru noua ta temă, dar să trecem jos și murdar și să începem să scriem un cod. Tema pe care a venit-o Collis este în esență un re-styling al temei actuale "implicite" MediaWiKi în culorile și simțul PSDTUTS-ului, așa că am știut că fundalul va fi această culoare:
E ușor făcut! Tocmai am deschis fișierul "main.css" despre care am vorbit mai devreme în directorul / skins / monobook / și am introdus următorul cod:
/ * Lucrurile adăugate pentru a arăta ca PSDTUTS! * / Body background: # 2b241e;
Prima linie este numită comentariu, dacă deja scrieți o mulțime de coduri (Css, Xhtml, Php sau C ++!), Probabil că sunteți familiarizat cu comentariile. Comentariile ne permit să lăsăm informațiile stocate în documentele noastre, care nu vor apărea pe site-ul final, dar să ne permitem să ne amintim la ce ne gândim în timpul sesiunii de codare care a terminat proiectul târziu.
Următoarea declarație este foarte clară, redă doar culoarea de fundal pentru elementul corpului. Datorită regulilor de moștenire CSS despre care am vorbit deja, această culoare de fundal va depăși culoarea de fundal stabilită anterior deoarece este setată mai târziu în document. Toate cu CSS!
Acum ne îndreptăm spre calea cea bună pentru a face tema noastră să funcționeze și frumoasă, dar nu fiecare element css din noua dvs. temă va fi la fel de ușor de găsit și corect ca și cel foarte evident
etichetă. De fapt, acest lucru a fost întotdeauna un obstacol major în a pune în aplicare toate tipurile de produse CMS.Un mod foarte fantastic de a urmări acest div aleatoriu și span's este de a folosi un plugin extrem de valoros Firefox numit Firebug.
Dacă nu aveți deja aceste instalări, instalați Firefox și Firebug. Firebug este un plugin Firefox care vă va face mult mai simplu procesul de lucru pentru dezvoltare web! Vă las să explorați site-ul lor pentru a găsi toate lucrurile uimitoare pe care Firebug le va face ușor, o vom folosi simplu pentru a identifica elementele din tema noastră și pentru a afla cum să identificăm selectorii utilizați în fișierul dvs. css pentru a le schimba.
Mai ușor de zis decât de făcut eh? Să vedem un videoclip rapid:
Sperăm că acum aveți o mai bună înțelegere a modului în care puteți începe să inițiezi un wiki sau orice CMS de fapt.
Pentru a vă da o idee despre cum este procesul meu, l-am înregistrat în timp ce lucram la wiki. Dacă aveți idei pentru a "accelera" acest proces sau dacă aveți un mod diferit de a face lucruri, vă rugăm să ne spuneți în comentarii!
(Muzică amabilită de JustWaitSee)
Puteți vedea proiectul finalizat de pe site-ul PSDTUTS Photoshop Wiki, deși proiectul nu a ajuns oficial la sol, așa că nu vă așteptați să vedeți prea multe acolo!
Accentsconagua