Sonntag, 9. September 2012 - 17:52 Uhr·Journals von ChrisK

Designänderungen für MTN3

Bild von sva.wakku.toDieses 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 einrichten
1. 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 eintragen
Nachfolgend 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(http://sva.wakku.to/~chris/perm_stuff/random/MTN_logo_cropped.png);
background-repeat: no-repeat;}

(6141 Aufrufe)

0
0
27

Kommentare

macintosh IIvx
Danke!

Beim Footer und Header habe ich (für mich!) mit "background: #dbdbdb" eine noch angenehmere Darstellung erreichen können.

Langsam gefällt mir MTN3 immer besser
Boedefeld
Vielen Dank für das tolle Journal!
So sieht MTN gleich viel besser aus!
Guter Tipp! Danke dafür, aber ist es nicht Aufgabe von MTN das selbst für jeden zu machen? Sie haben so viel Kritik für das neue Layout bekommen und nichts gemacht. Ich schaue hier nur selten vorbei und lese eher die Tweets. Das Layout ist nicht gut und wenn hier nicht bald was passiert, dann eben nur noch Tweets oder andere Quellen im Netz. Ist ja nicht so, dass man auf MTN angewiesen ist.
Aber nochmal Danke!
ChrisK
Bitte nicht noch eine Diskussion über das Design hier, dafür gibt es schon zuhauf Threads im Forum.

Feedback ist aber willkommen, und falls jemand noch den ein oder anderen Sonderwunsch hat, kann ich auch daran mal mein Glück versuchen.
„Wer anderen eine Bratwurst brät, hat ein Bratwurstbratgerät.“
cab
Gibt es wirklich jemanden der das alte Logo vermisst hat?
„Wenn Jony Ive kurz mit CorelDraw spielt kommt iOS 7 dabei raus!“
ChrisK
cab
Gibt es wirklich jemanden der das alte Logo vermisst hat?

Es gibt zumindest Leute die das neue überhaupt nicht mögen

Ich hab das auch nur aus Spaß gebaut, ich selber benutze den Schnipsel nicht.
„Wer anderen eine Bratwurst brät, hat ein Bratwurstbratgerät.“
ich wäre dafür. Ausser das alte Logo. das ist schrecklich.

MTN soll doch einfach alles einmitten und den oberen grauen Balken weglassen.
auf ipad 1 und iphone sind keine änderung. funzt nur auf macpro
justsports
doro
auf ipad 1 und iphone sind keine änderung. funzt nur auf macpro
was auch logisch ist
Prima
Aber wie bekomme ich die Artikelschrift größer?
.SynArticleText {font-size: 16pt}
geht nicht. Weil im MTN-css schon eine Definition steht? Wie überschreibt man die?
ChrisK
Die kann man doch einfach in den Einstellungen ändern:
„Wer anderen eine Bratwurst brät, hat ein Bratwurstbratgerät.“
Danke, aber
1. steht's schon auf 130%, mehr geht nicht und ist mir noch zu klein (hires antiglare MBP)
2. will ich mich nicht immer einloggen
ChrisK
Bitte, aber
1. Vielleicht kein HighRes-Display kaufen wenn man's an den Augen hat?
2. Bei der 130% Einstellung ist die Schrift standardmäßig schon 17px groß.
3. Nicht ausloggen, dann bleibt man einfach immer eingeloggt.
4. Hier bitte:
/* Schriftgröße ändern */
.SynArticleText, .SynArticleLinks {font-size: 30px !important; line-height: 1.5em !important; }
„Wer anderen eine Bratwurst brät, hat ein Bratwurstbratgerät.“
1. Ist leider das einzige anti-glare von apple. Spiegeldisplays sind ungeeignet.
Und bitte etwas mehr Toleranz. "Es an den Augen haben" sucht man sich ja nicht aus.
(und Auflösung runterdrehen ist auch nicht immer die beste Lösung wg. Unschärfe)
2. 16px war nur ein Test
3. Nicht jeder will das
4. Danke!! Funktioniert
ChrisK
MTN hat kürzlich sich mir persönlich nicht erschließende Änderungen an den Style-Definitionen vorgenommen, die den Zentrieren-Schnippsel kaputt gemacht haben. Schnippsel wurde oben aktualisiert.
„Wer anderen eine Bratwurst brät, hat ein Bratwurstbratgerät.“
Cool... Nun ist das Layout automatisch zentriert.
@ChrisK:

Vielen Dank, jetzt ist es deutlich besser zu lesen.
WollesMac
Super - vielen Dank - allerdings habe ich rechts oben innerhalb der MTN-Seite einen länglichen Werbeeintrag. Somit ist u.a. die Suchfunktion verdeckt. Den Schnipsel "oben Lücke weg" habe ich nicht drin. Kann mit diesen Infos mir jemand sagen, was ich falsch gemacht habe? Würde diese "Werbefahne" gerne nach rechts "schieben"
ChrisK
Kann sein, dass die Werbung an fixen Positionen positioniert wird, die dann mit den Änderungen nicht mehr passen. Kann ich vermutlich nicht all zu viel machen, aber kannst ja mal ein Screenshot hochladen.
„Wer anderen eine Bratwurst brät, hat ein Bratwurstbratgerät.“
WollesMac
upps - krieg ich grad auch nicht hin...
Drag and Drop funktioniert offensichtlich nicht... Lös mir mal bitte einer die Sensozapbrille
WollesMac
ist ja witzig - in einem anderen Thread hatte ich soeben zusätzlich einen Download-button...
ChrisK
Ich hab mittlerweile schon eine Ahnung wie das aussieht und wo das Problem liegt. Werde ich mit bei Gelegenheit mal ne Lösung zu überlegen.
„Wer anderen eine Bratwurst brät, hat ein Bratwurstbratgerät.“
T0mm1
Danke für die zahlreichen Anpassungen!

Ich benutze auch den Schnipsel "Oben die Lücke weg", kann nun aber das Logo selbst nicht mehr anklicken, um auf die Homepage zu gelangen. In einem kleinen Bereich unterhalb des Logos ist der Anker noch aktiv, hört aber direkt an der Kante des Headers auf.
ChrisK
Das liegt daran, dass dann ein unsichtbarer Werbebanner über dem Logo hängt. Momentan ändert MTN irgendwie täglich die Struktur der Seite, ich muss mal gucken, ob es da ein System hinter gibt und was sich da evtl. machen lässt ...
„Wer anderen eine Bratwurst brät, hat ein Bratwurstbratgerät.“
T0mm1
Danke, das wars!
Die "mainpage" lässt sich beliebig breit ziehen.
Auf 15" :

/* 1680px Breite (Design auf Links stellen, sonst wird's schief) */
.PageWrapper {width: 1680px !important; background-position: right !important; }
.PageMain {width: 1310px !important;}

Man muss mit der letzten Zeile spielen.

Bild von data.mactechnews.de

Kommentieren

Sie müssen sich einloggen, um diese Funktion nutzen zu können.

Wie sind Ihre ersten Erfahrungen mit iOS 8?

  • Alles läuft bestens, ich bemerke deutliche Verbesserungen14,5%
  • Alles läuft bestens, ich bemerke geringfügige Verbesserungen30,9%
  • Keine Probleme, aber auch keine spürbaren Verbesserungen26,5%
  • Bin eher nicht so überzeugt9,9%
  • Bin unzufrieden mit iOS 84,4%
  • Ich kann/will nicht auf iOS 8 umsteigen13,9%
850 Stimmen18.09.14 - 01.10.14
8202