Share
In meiner Karriere als Web-Ninja wurde ich oft gebeten, Open Source-Projekte zu gestalten oder zu thematisieren, um sie mit der Marke meiner Kunden in Einklang zu bringen. Abhängig vom Projekt kann dies mehr oder weniger frustrierend sein (ich schaue Sie bei Magento an), aber MediaWiki ist eines der einfacheren Projekte, mit dem aufgrund der begrenzten Anzahl von Dateien und den einzustellenden Dingen gearbeitet werden kann. In diesem Tutorial werden wir den Theming-Prozess durchlaufen, mit dem ich das kommende PSDTUTS-Wiki gestylt habe, aber der Prozess, insbesondere die Verwendung von Firebug, könnte auf nahezu jedes CMS angewendet werden.
Das Gestalten eines vorhandenen Codesatzes, auch wenn er für das Thema Design gedacht ist, kann eine entmutigende Aufgabe sein. Ich werde hier darlegen, wie ich dies so schnell wie möglich erledigen kann, mit dem saubersten Code, der pragmatisch ist. Hier sind die Schritte, die wir durchlaufen werden:
Also ein kurzes Wort zum Projekt. Ich wurde von Collis aus Eden mit dem Design einer MediaWiki-Installation für das kommende PSDTUTS Photoshop-Wiki beauftragt, an dem sie arbeiten. Hier ist das Design, das mir gegeben wurde:
Wenn Sie ein Projekt eines Drittanbieters zusammenstellen möchten, müssen Sie zunächst prüfen, wie viel Arbeit erforderlich ist, indem Sie sich die Verzeichnisstruktur ansehen. In unserem Fall mit MediaWiki werden alle Dateien in zwei Dateien in der Datei / skins (MonoBook.php und Monobook / main.css) bearbeitet sowie einige Bilder hochgeladen. Eines der großen Dinge bei MediaWiki ist, dass wir, da es sich nur um zwei Dateien handelt, den Großteil unserer Zeit damit verbringen können, das Design an die Spezifikationen unserer Kunden anzupassen und nicht herauszufinden, wo Änderungen vorgenommen werden müssen.
Nachdem Sie die zu bearbeitenden Dateien sortiert haben, sollten Sie prüfen, ob dies eine erneute Neuschreibung ist oder ob Sie nur die Farben und das Styling eines vorhandenen Designs anpassen. Mein Kunde hat mich nur aufgefordert, das Standard-MediaWiki-Design anzupassen. Da wir das Thema nicht komplett neu schreiben müssen, kopiere ich normalerweise die Dateien, die wir ändern wollen, als Backups auf dem Server (in diesem Fall monoBook.php.backup und main.css.backup) und beginnen mit der Bearbeitung des Originals Dateien, um die Zeit zu minimieren, die ich verbringen muss.
Ich werde nicht auf den gesamten Prozess der Umwandlung eines Modells einer Website in eine lebendige, atmende Website eingehen. Wir werden uns jedoch darauf konzentrieren, die Bits zu finden, die Sie ändern möchten, und diese in unseren Vorlagendateien zu überschreiben.
Eines der erstaunlichsten Dinge in Bezug auf die Webentwicklung und das Webdesign ist die konsequente Anwendung von CSS um Websites und Web-Software wie MediaWiKi zu gestalten. Aufgrund der Arbeit unserer Vorfahren (und Mütter!) Für Web-Geeks können wir uns darauf verlassen, dass jedes Projekt, das wir in Angriff nehmen, normalerweise diese fortschrittlichen Technologien verwendet. Sehen wir uns an, wie wir dies für unser Styling eines vorhandenen Themas nutzen können.
Cascading Style Sheets werden aufgrund einer Kaskade oder von Vererbungsregeln, die daraus folgt, bezeichnet. Wenn Sie ein externes Stylesheet haben, das diese Regel festlegt:
Karosserie
Hintergrund: blau;
Aber später, in demselben Stylesheet, gibt es eine zweite Definition wie folgt:
Karosserie
Hintergrund: rot;
Die Dokumente, mit denen Sie sich befassen, sind tatsächlich rot hinterlegt, da dies die letzte Deklaration war. Auf dieselbe Weise gehorcht CSS zum Beispiel spezifischeren Regeln, wenn Sie für alle einen Stil festgelegt haben
ul margin-left: 100px;
Dann setzen Sie diese Regel für Listen mit einer bestimmten Klasse wie z.
ul.monkey margin-left: 0px;
Aufgrund der Spezifitätsregeln haben alle Listen, für die die Klasse auf Affe festgelegt ist, keinen Rand auf der linken Seite, während die meisten ungeordneten Listenelemente den Rand links von 100 Pixeln haben. Dies ist erstaunlich nützlich und effektiv, da Sie einfach die Stile am Ende Ihres Stylesheets für Ihr spezielles Projekt zurücksetzen können, um den Stil zu korrigieren und mehr mit Ihrer neuen Site in Einklang zu bringen! (Wie ich das für dieses Projekt am Ende des Stylesheets gemacht habe)
Wir haben ein bisschen darüber nachgedacht, wie Sie den Stil korrigieren und für Ihr neues Thema in Form bringen können, aber lassen Sie uns mal kurz dreckig werden und anfangen, Code zu schreiben. Das Thema, das Collis entworfen hat, ist im Wesentlichen eine Umgestaltung des aktuellen "Standard" MediaWiKi-Themas in die Farben und das Gefühl von PSDTUTS, daher wusste ich, dass der Hintergrund diese Farbe haben würde:
Leicht gemacht! Ich habe gerade die Datei "main.css" geöffnet, über die wir zuvor im Verzeichnis / skins / monobook / gesprochen haben, und den folgenden Code eingefügt:
/ * Dinge hinzugefügt, um PSDTUTS aussehen zu lassen! * / Body background: # 2b241e;
Die erste Zeile wird als Kommentar bezeichnet. Wenn Sie bereits viel Code schreiben (Css, Xhtml, Php oder C ++!), Sind Sie wahrscheinlich mit Kommentaren vertraut. Kommentare erlauben uns, in unseren Dokumenten gespeicherte Informationen zu hinterlassen, die nicht auf der End-Website angezeigt werden. Wir können uns jedoch daran erinnern, was wir während dieser späten Nacht-Codierungssitzung während Ihres späten Projekts gedacht haben.
Die nächste Deklaration ist sehr klar, sie setzt lediglich die Hintergrundfarbe für das body-Element zurück. Aufgrund der bereits erwähnten CSS-Vererbungsregeln überschreitet diese Hintergrundfarbe die zuvor festgelegte Hintergrundfarbe, da sie später im Dokument festgelegt wird. Alle hageln CSS!
Wir sind jetzt auf dem richtigen Weg, um unser Thema zum Laufen zu bringen und schön zu gestalten, aber nicht jedes CSS-Element in Ihrem neuen Thema wird so leicht zu finden und zu korrigieren sein, wie es offensichtlich ist
Etikett. In der Tat war dies schon immer ein großes Hindernis bei der Gestaltung aller Arten von CMS-Produkten.Eine wirklich fantastische Methode, um diese zufälligen Divs und Spans ausfindig zu machen, ist die Verwendung eines äußerst wertvollen Firefox-Plugins namens Firebug.
Falls Sie diese noch nicht installiert haben, installieren Sie bitte Firefox und Firebug. Firebug ist ein Firefox-Plugin, das den Workflow bei der Webentwicklung erheblich vereinfacht. Ich überlasse es Ihnen, ihre Website zu erkunden, um herauszufinden, welche erstaunlichen Dinge Firebug Ihnen leicht machen wird. Wir werden es einfach verwenden, um Elemente in unserem Thema zu identifizieren und herauszufinden, wie Sie die zu verwendenden Selektoren identifizieren können Ihre CSS-Datei, um sie zu ändern.
Leichter gesagt als getan? Sehen wir uns ein kurzes Video an:
Hoffentlich haben Sie jetzt ein besseres Verständnis dafür, wie Sie ein Wiki oder ein CMS erstellen können.
Um Ihnen einen Eindruck von meinem Prozess zu vermitteln, habe ich ihn während der Arbeit im Wiki aufgenommen. Wenn Sie Ideen haben, wie Sie diesen Prozess "beschleunigen" können oder eine andere Vorgehensweise haben, lassen Sie es mich bitte in den Kommentaren wissen!
(Musik mit freundlicher Genehmigung von JustWaitSee)
Sie können das fertige Projekt auf der PSDTUTS Photoshop-Wiki-Site anzeigen, obwohl das Projekt nicht offiziell gestartet ist. Erwarten Sie also nicht, zu viel dort zu sehen!
Accentsconagua