Designänderungen für MTN3
Dieses Journal beschreibt wie man einige Anpassungen am Design von MTN3 vornehmen kann. Gezeigt wird hier der Weg mit der Safari-Extension "User CSS". Für andere Browser gibt es vermutlich ähnliche Erweiterungen auf die sich das Ganze übertragen lässt.
Man beachte zunächst, dass es in den Design-Einstellungen von MTN
schon einige Einstellmöglichkeiten gibt, die möglicherweise schon ausreichend sind.
Schritt 1: Erweiterung installieren und Grundlegendes einrichten1. Runterladen und installieren:
2. Nach der Installation sollte sich in der Symbolleiste ein Button mit einem "A" befinden, wenn nicht, Rechtsklick auf eine Internetseite, dort dann den Eintrag "Manage User CSS" auswählen.
3. In dem Tab das sich dann öffnet sollte unten links schon "New User CSS" ausgewählt sein.
4. Rechts dann Folgendes einstellen:
- Enabled: Ja
- Name: MTN3 (oder irgendwas anderes)
- URLs: http://www.mactechnews.de/*
5. Erst einmal Save klicken.
Schritt 2: Gewünschte Modifikationen eintragenNachfolgend nun ein paar Schnipsel die nach blieben einfach nacheinander in das Styles:-Feld kopiert werden können. Hinterher Save nicht vergessen. Mit dem Drücken auf Save sollten die Änderungen auf MTN sofort sichtbar werden.
Hinweis: Die Modifikationen erfordern es, dass das Layout in den MTN-Einstellungen auf Linksbündig steht.
Die erste Zeile enthält als /* Kommentar */ immer die Funktion des Schnippsels, am besten mit kopieren, damit man hinterher noch weiß, wofür der gut ist.
/* 1200px Breite (Design auf Links stellen, sonst wird's schief) */
.PageWrapper {width: 1200px !important; background-position: right !important; }
.PageMain {width: 832px !important;}
Hier wird die Breite der Seite auf 1200px angehoben. Andere Breiten können angegeben werden in dem beide width:-Werte entsprechend angepasst werden. Eine variable Breite lässt sich mit meinem Kenntnisstand und dem derzeitigen Aufbau der Seite nicht machen.
/* Maximal-Breite von verlinkten Bildern anheben, nur mit dem Schnipsel oben verwenden */
.TexticonPicture {max-width: 640px !important;}
/* Seite Zentrieren */
.PageWrapper {margin: auto;}
#body {max-width: none !important;}
/* Rote Schleife weg */
.PageCounter {display: none !important;}
/* Rote Schleife mittig */
.PageCounter {margin: 0 auto -131px !important;}
/* Oben die Lücke weg */
.PageWrapper {margin-top: 0px !important;}
Dieser Schnipsel kann unter Umständen Probleme mit der Werbung machen.
/* Hintergrund auf eine Farbe ändern */
body {background: silver !important;}
Statt "silver" lässt sich hier jede beliebige englische Farbe oder auch #HEXCODES verwenden.
/* Header-Hintergrund Farbe ändern */
.PageHeader {background: #333 !important;}
/* Footer-Hintergrund Farbe ändern */
.PageFooter {background: #333 !important;}
Und für unsere Hardcore-Früher-War-Alles-Besser-Versessenen:
/* Classic MTN Logo */
.PageLogo img {display: none !important;}
.PageLogo {float: left; height: 48px; margin: 50px 0 0 37px; width: 405px;
background-image: url(//sva.wakku.to/~chris/perm_stuff/random/MTN_logo_cropped.png);
background-repeat: no-repeat;}