Share
Ofte i min karriere som en web ninja, har jeg blitt bedt om å åpne eller åpne åpen kildekode prosjekter for å bringe dem i tråd med kundens merkevare. Avhengig av prosjektet kan dette være mer eller mindre frustrerende (jeg ser på deg Magento), men MediaWiki er en av de enklere prosjektene å jobbe med på grunn av det begrensede antall filer og ting å justere. I denne opplæringen vil vi gå gjennom temaprosessen Jeg pleide å style den kommende PSDTUTS Wiki, men prosessen, spesielt ved hjelp av Firebug, kan brukes på stort sett alle CMS.
Å teste et eksisterende sett med kode, selv om det ble laget for å være enkelt å tema, kan være en skremmende oppgave. Her skal jeg legge ut hvordan jeg får dette gjort så raskt som mulig, med den reneste koden som er pragmatisk. Her er trinnene vi skal gjennomgå:
Så et raskt ord på prosjektet. Jeg ble ansatt av Collis from Eden til temaet en MediaWiki installasjon for den kommende PSDTUTS Photoshop Wiki de jobber med. Her er designen jeg fikk:
Det første du må gjøre når du tester et tredjepartsprosjekt, er å vurdere hvor mye arbeid som trengs ved å ta en titt på katalogstrukturen. I vårt tilfelle med MediaWiki, vil all redigering gjøres på to filer inni / skins filen (MonoBook.php og monobook / main.css), samt å laste opp noen bilder. En av de gode tingene med MediaWiki er at siden vi bare arbeider med to filer, kan vi tilbringe et flertall av tiden vår finjusterer designen for å passe til våre kunders spesifikasjoner, ikke finne ut hvor du skal gjøre endringer.
Etter at du har sortert ut filene du skal redigere, er det viktig å vurdere om dette vil være en grunnleggende omskrivning, eller hvis du bare skal tilpasse en eksisterende designs farger og styling. Min klient krever bare at jeg justerer standard MediaWiki-temaet. Siden vi ikke trenger å skrive om temaet helt, kopierer jeg vanligvis filene vi skal endre som sikkerhetskopier på serveren (i dette tilfellet monoBook.php.backup og main.css.backup) og begynner å redigere originalen filer for å minimere mengden tid jeg må bruke.
Jeg kommer ikke til å gå inn i hele prosessen med å konvertere en mockup av et nettsted til et levende, pustende nettsted; men det vi skal fokusere på, er å finne biter du vil endre, og over-riding dem i våre malfiler.
En av de mest fantastiske tingene med webutvikling og design i etterkant av webstandardbevegelsen er den konsekvente utnyttelsen av CSS å utforme nettsteder og webprogramvare som MediaWiKi. På grunn av arbeidet hos våre web geek forfedre (og mødre!), Kan vi være sikre på at ethvert prosjekt vi takler vil typisk utnytte disse avanserte teknologiene. La oss se på hvordan vi kan utnytte dette til å utforme et eksisterende tema.
Cascading Style Sheets kalles det på grunn av en kaskade eller arvelighetsregler som følger med. Hvis du har et eksternt stilark som angir denne regelen:
kropp
bakgrunn: blå;
Men da, senere i samme stilark, er det en annen definisjon som følger:
kropp
bakgrunn: rød;
Dokumentene du har å gjøre med vil faktisk ha en rød bakgrunn fordi dette var den siste erklæringen som ble gjort. På samme måte vil CSS adlyde noen regler som er mer spesifikke, for eksempel hvis du har stilsett på alle
ul margin-left: 100px;
Men så sett den regelen på nytt for lister med en bestemt klasse som;
ul.monkey margin-left: 0px;
På grunn av spesifisitetsreglene vil alle lister som har klassen satt til ape, ikke ha noen margin på venstre side, mens de fleste uordnede listeelementene vil ha marginen til venstre på 100 piksler. Dette er utrolig nyttig og effektivt fordi du bare kan tilbakestille stilene på slutten av stilarket for ditt eget prosjekt for å gjøre rettelser til stilen og bringe inn mer i tråd med ditt nye nettsted! (se hvordan jeg gjorde det for dette prosjektet på slutten av stilarket)
Vi har utforsket litt om hvordan du retter opp stilen og formidler den til det nye temaet, men la oss komme ned og skitne og begynne å skrive noen kode. Temaet som Collis kom opp, er i utgangspunktet en omforming av det nåværende "standard" MediaWiKi-temaet i fargene og følelsen av PSDTUTS, så jeg visste at bakgrunnen skulle være denne fargen:
Lett gjort! Jeg åpnet nettopp "main.css" -filen vi snakket om tidligere i / skins / monobook / directory og satt inn følgende kode:
/ * Ting lagt til for å gjøre det ser ut som PSDTUTS! * / Body background: # 2b241e;
Den første linjen kalles en kommentar, hvis du allerede skriver mye kode (Css, Xhtml, Php eller C ++!), Er du sannsynligvis kjent med kommentarer. Kommentarer tillater oss å legge igjen informasjon som er lagret i dokumentene våre, som ikke kommer opp på sluttwebområdet, men la oss huske hva vi tenkte i løpet av den senkodende kodesesjonen, og avsluttet det sentrale prosjektet.
Den neste erklæringen er veldig klar, det tilbakestiller bare bakgrunnsfarge for kroppselementet. På grunn av CSS arv regler som vi allerede snakket om, vil denne bakgrunnsfargen override den tidligere angitte bakgrunnsfargen fordi den settes senere i dokumentet. Alle hagl CSS!
Vi er nå på vei ned på den rette veien for å få vårt tema å jobbe og vakkert, men ikke hvert css-element i ditt nye tema vil være like enkelt å finne og korrigere som det helt åpenbare
stikkord. Faktisk har dette alltid vært et stort hinder i temaer for alle typer CMS-produkter.En virkelig fantastisk måte å spore opp denne tilfeldige div's og span er å bruke et enormt verdifullt Firefox-plugin som heter Firebug.
Hvis du ikke allerede har disse installert, vennligst installer Firefox og Firebug. Firebug er et Firefox-plugin som vil gjøre webutviklings arbeidsflyten mye enklere! Jeg vil overlate det til deg for å utforske deres nettsted for å finne alle de fantastiske tingene Firebug gjør det enkelt for deg, vi skal bare bruke det til å identifisere elementer i temaet vårt og finne ut hvordan du identifiserer selektorer som skal brukes i din css-fil for å endre dem.
Lettere sagt enn gjort eh? La oss se en rask video:
Forhåpentligvis har du nå en bedre forståelse av hvordan du begynner å tema en wiki, eller noe CMS faktisk.
For å gi deg en ide om hva min prosess er, registrerte jeg det mens jeg jobbet på wiki. Hvis du har ideer for å "farten opp" denne prosessen, eller har en annen måte å gjøre ting, vennligst gi meg beskjed i kommentarene!
(Music courtesy of JustWaitSee)
Du kan se det ferdige prosjektet på PSDTUTS Photoshop Wiki-siden, selv om prosjektet ikke offisielt har gått av bakken, så forvent ikke å se for mye der ennå!
Accentsconagua