Share
Ofta i min karriär som webbninja, har jag blivit ombedd att öppna eller öppna projekt med öppen källkod för att få dem att överensstämma med mina kunder. Beroende på projektet kan det vara mer eller mindre frustrerande (jag tittar på dig Magento) men MediaWiki är en av de enklare projekten att arbeta med på grund av det begränsade antalet filer och saker att justera. I denna handledning går vi igenom temaprocessen som jag brukade utforma den kommande PSDTUTS Wiki, men processen, särskilt med Firebug, kan tillämpas på ganska mycket CMS.
Att bestå av en befintlig uppsättning kod, även om det gjordes för att vara enkelt att tema kan vara en skrämmande uppgift. Här lägger jag fram hur man gör det så snabbt som möjligt, med den renaste koden som är pragmatisk. Här är stegen vi ska gå igenom:
Så ett snabbt ord på projektet. Jag anställdes av Collis from Eden för att tema en MediaWiki-installation för den kommande PSDTUTS Photoshop Wiki som de arbetar på. Här är designen jag fick:
Det första som ska göras när man gör något tredje partprojekt är att utvärdera hur mycket arbete som behövs genom att ta en titt på katalogstrukturen. I vårt fall med MediaWiki kommer all redigering att göras på två filer inuti skinnfilen (MonoBook.php och monobook / main.css) samt att ladda upp några bilder. En av de fantastiska sakerna om MediaWiki är att eftersom vi bara handlar om två filer kan vi tillbringa en majoritet av vår tid att finjustera designen så att den överensstämmer med våra kunders specifikationer, inte bestämma var de ska göra förändringar.
När du har sorterat ut de filer som du ska redigera är det viktigt att utvärdera om det här kommer att bli en ny skrivning, eller om du bara anpassar en existerande designens färger och styling. Min klient krävde bara att jag justerade standard MediaWiki-temat. Eftersom vi inte behöver skriva om temat helt, kopierar jag vanligtvis filerna som vi kommer att ändra som säkerhetskopior på servern (i det här fallet monoBook.php.backup och main.css.backup) och börja redigera originalet filer för att minimera hur lång tid jag ska spendera.
Jag kommer inte att gå in i hela processen att konvertera en mockup av en webbplats till en levande andas webbplats; men det vi ska fokusera på är att hitta de bitar du vill ändra och överrätta dem i våra mallfiler.
En av de mest fantastiska sakerna om webbutveckling och design i efterkanten av webbstandardrörelsen är det konsekventa utnyttjandet av CSS att utforma webbplatser och webbprogramvara som MediaWiKi. På grund av arbetet hos våra web-geek-förfäder (och mödrar!) Kan vi vara säkra på att alla projekt vi tar hand om kommer vanligtvis att utnyttja denna avancerade teknik. Låt oss titta på hur vi kan utnyttja detta för vårt styling ett befintligt tema.
Cascading Style Sheets kallas det på grund av en kaskad eller arvsregler som följer. Om du har ett externt stilark som anger denna regel:
kropp
bakgrund: blå;
Men sen, i samma stilark finns det en andra definition som följer:
kropp
bakgrund: röd;
Dokumenten du har att göra med kommer faktiskt att ha en röd bakgrund eftersom det var den senaste deklarationen som gjordes. På samma sätt följer CSS alla regler som är mer specifika, till exempel om du har en stil inställd på alla
ul margin-left: 100px;
Men sätt sedan in den här regeln för listor med en viss klass, t.ex.
ul.monkey margin-left: 0px;
På grund av reglerna om specificitet kommer alla listor som har klassen som apa att ha ingen marginal på vänster sida, medan de flesta oorderade listelementen kommer att ha marginalen till vänster om 100 pixlar. Det här är otroligt användbart och effektivt eftersom du bara kan återställa stilerna i slutet av ditt stilark för ditt specifika projekt för att göra korrigeringar till stilen och ta in mer i linje med din nya webbplats! (se hur jag gjorde det för det här projektet i slutet av stilarket)
Vi har undersökt lite om hur du korrigerar stilen och tar den i form för ditt nya tema, men låt oss gå ner och smutsiga och börja skriva lite kod. Temat som Collis kom fram är i grunden en omformning av det nuvarande "standard" MediaWiKi-temat i färgerna och känslan av PSDTUTS, så jag visste att bakgrunden skulle bli den här färgen:
Lätt gjort! Jag öppnade just den "main.css" -filen vi pratade om tidigare i / skins / monobook / directory och infogade följande kod:
/ * Saker som läggs till för att få det att se ut som PSDTUTS! * / Body background: # 2b241e;
Den första raden heter en kommentar, om du redan skriver mycket kod (CSS, Xhtml, Php eller C ++!) Är du förmodligen bekant med kommentarer. Kommentarer tillåter oss att lämna information som lagras i våra dokument som inte kommer att dyka upp på slutwebbsidan, men låta oss komma ihåg vad vi tänkte under den sena natten kodning sessionen avslutar ditt sena projekt.
Nästa deklaration är mycket tydlig, det återställer bara bakgrundsfärgen för kroppsdelen. På grund av CSS arv regler som vi redan talat om kommer denna bakgrundsfärg att rida den tidigare inställda bakgrundsfärgen eftersom den sätts senare i dokumentet. Alla hagel CSS!
Vi är nu på väg till rätt tema för att få vårt tema att fungera och vackert, men inte varje css-element i ditt nya tema blir lika lätt att hitta och rätt som det självklara
märka. Faktum är att det alltid har varit ett stort hinder för alla typer av CMS-produkter.Ett riktigt fantastiskt sätt att spåra den här slumparten är att använda ett enormt värdefullt Firefox-plugin som heter Firebug.
Om du inte redan har installerat dem, var god installera Firefox och Firebug. Firebug är ett Firefox-plugin som gör ditt webbutvecklings arbetsflöde mycket enklare! Jag lämnar det till dig att utforska deras webbplats för att hitta alla fantastiska saker som Firebug kommer att göra enkelt för dig, vi kommer att använda den helt enkelt för att identifiera element i vårt tema och för att ta reda på hur du identifierar de väljare som ska användas i din css-fil för att ändra dem.
Lättare sagt än gjort eh? Låt oss se en snabb video:
Förhoppningsvis har du nu en bättre förståelse för hur man börjar med att tema en wiki, eller något CMS i själva verket.
För att ge dig en uppfattning om vad min process är, registrerade jag den medan jag arbetade på wikin. Om du har idéer för att "påskynda" den här processen, eller ha ett annat sätt att göra saker, snälla, låt mig veta i kommentarerna!
(Music med tillstånd av JustWaitSee)
Du kan se det färdiga projektet på PSDTUTS Photoshop Wiki-webbplatsen, trots att projektet inte officiellt har blivit av marken, så förvänta dig inte att se för mycket där än!
Accentsconagua