Share
Vaak ben ik in mijn carrière als webninja gevraagd om opensourceprojecten te helen of te thematiseren om ze in lijn te brengen met het merk van mijn klant. Afhankelijk van het project kan dit meer of minder frustrerend zijn (ik zie jou als Magento), maar MediaWiki is een van de gemakkelijkere projecten om mee te werken vanwege het beperkte aantal bestanden en dingen om aan te passen. In deze tutorial doorlopen we het themaproces dat ik gebruikte om de aankomende PSDTUTS Wiki te stylen, maar het proces, met name met behulp van Firebug, kon op vrijwel elk CMS worden toegepast..
Het ontwerpen van een bestaande set code, zelfs als het gemaakt is om gemakkelijk te thematiseren, kan een ontmoedigende taak zijn. Hier zal ik uitleggen hoe ik dit zo snel mogelijk kan doen, met de schoonste code die pragmatisch is. Dit zijn de stappen die we zullen doorlopen:
Dus een kort woordje over het project. Ik ben ingehuurd door Collis uit Eden om een MediaWiki-installatie te bespreken voor de komende PSDTUTS Photoshop Wiki waaraan ze werken. Dit is het ontwerp dat ik kreeg:
Het eerste wat u moet doen bij het thematiseren van een project van een derde partij, is evalueren hoeveel werk nodig is door de directorystructuur te bekijken. In ons geval met MediaWiki worden alle bewerkingen uitgevoerd op twee bestanden in het bestand / skins (MonoBook.php en monobook / main.css) en worden er enkele afbeeldingen geüpload. Een van de geweldige dingen over MediaWiki is dat we, aangezien we slechts met twee bestanden te maken hebben, een groot deel van onze tijd kunnen besteden aan het nauwkeurig afstemmen van het ontwerp op de specificaties van onze klanten, zonder uit te zoeken waar we wijzigingen kunnen aanbrengen.
Nadat je de bestanden hebt gerangschikt die je gaat bewerken, is het belangrijk om te evalueren of dit een grondige her-schrijfactie zal zijn, of dat je alleen de kleuren en styling van een bestaand ontwerp aan het aanpassen bent. Mijn cliënt wilde alleen dat ik het standaard MediaWiki-thema aanpaste. Omdat we het thema niet helemaal hoeven te herschrijven, kopieer ik meestal de bestanden die we zullen veranderen als back-ups op de server (in dit geval monoBook.php.backup en main.css.backup) en begin met het bewerken van het origineel bestanden om de hoeveelheid tijd die ik moet besteden te minimaliseren.
Ik ga niet in op het hele proces van het omzetten van een mockup van een website in een levende, ademende website; maar waar we ons op gaan focussen, is het vinden van de bits die je wilt veranderen en het overschrijven van die in onze sjabloonbestanden.
Een van de meest verbazingwekkende dingen over webontwikkeling en ontwerp in de nasleep van de beweging van webstandaarden is het consequente gebruik van CSS om websites en websoftware zoals MediaWiKi te vormen. Vanwege het werk van onze web-geek voorouders (en moeders!), Kunnen we er zeker van zijn dat elk project dat we aanpakken, doorgaans gebruik zal maken van deze geavanceerde technologieën. Laten we eens kijken hoe we dit kunnen gebruiken voor het stylen van een bestaand thema.
Cascading Style Sheets worden dat genoemd vanwege een cascade of regels van overerving die het volgt. Als u een externe stylesheet hebt die deze regel instelt:
lichaam
achtergrond: blauw;
Maar dan, later in diezelfde stylesheet, is er een tweede definitie als volgt:
lichaam
achtergrond: rood;
De documenten waarmee u te maken krijgt, hebben feitelijk een rode achtergrond omdat dit de laatste verklaring was die werd afgelegd. Op dezelfde manier zal CSS gehoorzamen aan regels die specifieker zijn, bijvoorbeeld als u een stijl hebt ingesteld op alles
ul margin-left: 100px;
Maar stel die regel dan opnieuw in voor lijsten met een bepaalde klasse, zoals;
ul.monkey margin-left: 0px;
Vanwege de regels van specificiteit hebben alle lijsten met de klasse ingesteld op monkey geen marge aan de linkerkant, terwijl de meeste niet-geordende lijstelementen de marge links van 100 pixels hebben. Dit is ongelooflijk handig en effectief omdat je gewoon de stijlen aan het einde van je stylesheet kunt resetten voor je specifieke project om correcties aan te brengen in de stijl en meer in overeenstemming met je nieuwe site te brengen! (zie hoe ik dat voor dit project heb gedaan aan het einde van het stylesheet)
We hebben een beetje onderzocht hoe je de stijl kunt corrigeren en in vorm kunt brengen voor je nieuwe thema, maar laten we vies worden en beginnen met het schrijven van een code. Het thema dat Collis bedacht is in feite een herontwerp van het huidige "standaard" MediaWiKi-thema in de kleuren en het gevoel van PSDTUTS, dus ik wist dat de achtergrond deze kleur zou worden:
Gemakkelijk gedaan! Ik heb zojuist het "main.css" -bestand geopend waar we eerder over gesproken hadden in de / skins / monobook / map en voegde de volgende code in:
/ * Dingen toegevoegd om het op PSDTUTS te laten lijken! * / Body background: # 2b241e;
De eerste regel wordt een opmerking genoemd, als u al veel code schrijft (Css, Xhtml, Php of C ++!) Bent u waarschijnlijk bekend met opmerkingen. Reacties stellen ons in staat om informatie achter te laten die in onze documenten is opgeslagen en die niet op de eindwebsite zal verschijnen, maar ons in staat stellen te onthouden wat we dachten tijdens die coderingsessie op de late avond om je late project af te ronden..
De volgende verklaring is heel duidelijk, het reset gewoon de achtergrondkleur voor het body-element. Vanwege de CSS-overervingsregels waarover we al hebben gesproken, zal deze achtergrondkleur de eerder ingestelde achtergrondkleur overschrijden omdat deze later in het document wordt ingesteld. Alle hagel CSS!
We zijn nu op het goede pad om ons thema te laten werken en mooi, maar niet elk CSS-element in je nieuwe thema zal even gemakkelijk te vinden en te corrigeren zijn als het overduidelijke
label. Dit is in feite altijd een groot obstakel geweest bij het maken van allerlei soorten CMS-producten.Een echt fantastische manier om deze willekeurige div's en span's op te sporen, is om een enorm waardevolle Firefox-plug-in genaamd Firebug te gebruiken.
Als u deze nog niet hebt geïnstalleerd, installeer dan zowel Firefox als Firebug. Firebug is een Firefox-plug-in die uw webontwikkelingsworkflow veel eenvoudiger zal maken! Ik laat het aan u over om hun site te verkennen en alle geweldige dingen te vinden die Firebug gemakkelijk voor u zal maken, we gaan het eenvoudig gebruiken om elementen in ons thema te identificeren en om erachter te komen hoe de selectors kunnen worden gebruikt om in te gebruiken uw CSS-bestand om ze te wijzigen.
Makkelijker gezegd dan gedaan hè? Laten we een korte video bekijken:
Hopelijk heb je nu een beter begrip van hoe je aan de slag kunt met het maken van een wiki, of een CMS in feite.
Om je een idee te geven van hoe mijn proces eruit ziet, heb ik het opgenomen tijdens het werken aan de wiki. Als u ideeën heeft om dit proces te versnellen of een andere manier heeft om dingen te doen, laat het me dan weten in de opmerkingen!
(Muziek met dank aan JustWaitSee)
Je kunt het voltooide project bekijken op de PSDTUTS Photoshop Wiki-site, hoewel het project niet officieel van de grond is gekomen, dus verwacht niet dat je daar nog teveel zult zien!
Accentsconagua