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

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 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;}

(8033 Aufrufe)

0
0
27

Kommentare

macintosh IIvx
macintosh IIvx09.09.12 18:58
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
Boedefeld09.09.12 19:39
Vielen Dank für das tolle Journal!
So sieht MTN gleich viel besser aus!
Moody10.09.12 08:27
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
ChrisK10.09.12 10:43
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
cab10.09.12 17:11
Gibt es wirklich jemanden der das alte Logo vermisst hat?
„Immer leichter, immer dünner. Und irgendwann sogar überhaupt nicht mehr vorhanden. Die neue Apple Air !“
ChrisK
ChrisK10.09.12 20:49
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.“
jensche11.09.12 08:10
ich wäre dafür. Ausser das alte Logo. das ist schrecklich.

MTN soll doch einfach alles einmitten und den oberen grauen Balken weglassen.
doro11.09.12 10:31
auf ipad 1 und iphone sind keine änderung. funzt nur auf macpro
justsports
justsports11.09.12 16:16
doro
auf ipad 1 und iphone sind keine änderung. funzt nur auf macpro
was auch logisch ist
frankh12.09.12 11:47
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
ChrisK12.09.12 11:52
Die kann man doch einfach in den Einstellungen ändern:
„Wer anderen eine Bratwurst brät, hat ein Bratwurstbratgerät.“
frankh12.09.12 12:10
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
ChrisK12.09.12 12:28
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.“
frankh12.09.12 15:40
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
ChrisK15.09.12 12:57
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.“
macintosh IIvx
macintosh IIvx15.09.12 14:44
ChrisK

Danke!
jensche15.09.12 17:29
Cool... Nun ist das Layout automatisch zentriert.
palmer_6917.09.12 08:29
@ChrisK:

Vielen Dank, jetzt ist es deutlich besser zu lesen.
WollesMac
WollesMac17.09.12 21:06
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
ChrisK17.09.12 21:52
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
WollesMac18.09.12 17:21
upps - krieg ich grad auch nicht hin...
Drag and Drop funktioniert offensichtlich nicht... Lös mir mal bitte einer die Sensozapbrille
WollesMac
WollesMac18.09.12 17:28
ist ja witzig - in einem anderen Thread hatte ich soeben zusätzlich einen Download-button...
ChrisK
ChrisK18.09.12 17:37
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
T0mm120.09.12 15:42
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
ChrisK20.09.12 17:19
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
T0mm120.09.12 21:40
Danke, das wars!
Zen 2.115.11.12 21:57
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.

Kommentieren

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

1724

Lesen Sie eBooks?

  • Ja, vorwiegend aus dem iBooks Store auf dem iPad24,2%
  • Ja, vorwiegend aus dem iBooks Store auf dem iPhone5,5%
  • Ja, vorwiegend aus dem iBooks Store auf dem Mac1,3%
  • Ja, vorwiegend auf einem Kindle15,9%
  • Ja, auf einem anderen eBook-Reader oder einer anderen Plattform7,2%
  • Nein, ich lese ausschließlich gedruckte Bücher33,3%
  • Ich lese gar keine Bücher12,5%
471 Stimmen30.07.15 - 04.08.15