Für Leute mit hoher Bildschirmauflösung

Dieses Thema im Forum "Fragen zur Website" wurde erstellt von steff999, 17. März 2008.

  1. Ich denke viele stört es dass die Seite nach wie vor links am Bildschirmrand klebt, genau darum habe ich dieses vierzeilige CSS Style geschrieben dass die gesammte Webseite zentriert.

    Gerade bei sehr hohen Auflösungen ist es wirklich mehr als nervig wenn Webseiten am linken Rand kleben. Für alle geplagten empfehle ich dieses CSS Style das mit dem Firefox-Plugin Stylish genutzt werden kann.

    Das Plugin sowie das CSS Style bekommt ihr unter http://www.userstyles.org (direkt Link). Unter "Install Options" wird euch genau erklärt wie ihr es installiert. Für diejenigen die kein Englisch können erkläre ich es kurz: ladet euch das Plugin "Stylish" hier runter, ihr braucht aber den Firefox. Wenn ihr das Plugin installiert habt müsst ihr euren Firefox neustarten damit das Plugin aktiviert wird. Danach müsst ihr die Webseite von userstyles.org besuchen (hier der Direktlink zum CSS Style) und unten unter "Install Options" auf "Load into Stylish" klicken. Danach noch einmal bestätigen und schon wird nach eine neuladen der Gamestar Seite alles in der Mitte des Bildschirms zentriert.

    Es macht die Gamestar Seite NICHT langsamer!

    Bei Fragen oder Wünschen bitte hier in diesen Thread posten.


    Zur Info an Gamestar: es werden KEINE Daten Serverseitig abgeändert. Alle Anpassungen geschehen beim Client. Es wird zudem keine Werbung ausgeblendet, sie ist weiterhin neben der Webseite zu sehen.
     
  2. Damhaet 2nd Lieutnant

    Damhaet
    Registriert seit:
    5. Mai 2006
    Beiträge:
    3.413
    Ort:
    Rhede
  3. chackalacka Mountain Dew süchtig!

    chackalacka
    Registriert seit:
    22. April 2007
    Beiträge:
    61.200
    Ort:
    St@lker einen Papierstern angeklebt bekommen
    Geile Sache! :bet:
     
  4. Ceejay Master of Puppets

    Ceejay
    Registriert seit:
    23. September 2005
    Beiträge:
    14.748
    Yeah :banana: So siehts gleich viel besser aus :hoch:
     
  5. Geht selbstverständlich auch mit Operas UserCSS. Einfach unter SitePreferences/Display das entsprechende Style Sheet verlinken.

    €: Hey, kannst du vielleicht noch ein Script machen, dass die Breite skaliert? Müsste ja gehen, wenn man die absoluten in relative Angaben umwandelt, aber ich weiss nicht, wo ich da anfangen sollte. Und wenn du schon dabei bist, die Farben... :ugly:
     
    Zuletzt von einem Moderator bearbeitet: 17. März 2008
  6. Und auf Deutsch für Opera ;):

    1. Opera-Plugin von der Seite runterladen
    2. In nen Ordner speichern
    3. Auf Gamestar.de F12 drücken und "Seitenspezifische Einstellungen..." ankilcken
    4. Dort oben "Skripte" auswählen und dann den Ordner
     
  7. cool es klappt:banana:
    danke
     
  8. Nicht Schweini

    Nicht Schweini
    Registriert seit:
    17. März 2008
    Beiträge:
    1.009
    Danke.

    Schon klasse, dass die Community das jetzt alles fixt. :ugly:
     
  9. Danke, wenigstens das klappt. :D
     
    Zuletzt von einem Moderator bearbeitet: 17. März 2008
  10. ERASER_M

    ERASER_M
    Registriert seit:
    8. Dezember 2006
    Beiträge:
    755
    jo als breiter könnte das Forum ruhig sein :D Also so dass es rechts direkt an die Werbung angrenzt!
     
  11. Wolfpig

    Wolfpig
    Registriert seit:
    14. Dezember 2004
    Beiträge:
    41.230
    Punkt 4 ist falsch......unter Skripte kommen scriptdateien hin.....css dateien müssen bei Anzeige ausgewählt werden......
     
  12. Geht auch, muss man aber gar nicht, Opera unterstützt direkt userspezifische CSS. Da muss dann nur

    Code:
    body
    {
    width:850px !important;
    margin:0 auto !important;
    }
    drinstehen. Das ganze in ne Datei speichern und dann unter SitePreferences/Seitenspezifische Einstellungen bei Display unter "User Style Sheet" verlinken.
     
  13. Toppes Ding! :banana:
    Danke!
     
  14. Erstmal sehr vielen Dank, das machts schonmal angenehmer :D Vor dem Relaunch hatts mich ja nicht gestört, da durch die News an der linken Seite das Forum einigermaßen in der Mitte war, aber jetzt ist das ziemlich nervig. Aber zentriert ists ziemlich okay. Sehr gewöhnungsbedürftig, aber allemal annehmbar :D

    Funktioniert das Greasemonkey-Skript eigentlich genauso? Dann solltest du das noch erwähnen, da hier ja auch viele Greasemonkey benutzen. Ich habs kurz ausprobiert, dann war aber plötzlich die Seite voller (immerhin schön orangener) Fehlermeldungen. Eben hatte ich das nochmal, weiß jetzt aber nicht, ob das am Skript oder an gamestar.de lag :D
     
  15. danke!

    wer no-script benutzt sollte das abschalten!
     
  16. Gamma gesperrter Benutzer

    Gamma
    Registriert seit:
    14. Januar 2007
    Beiträge:
    13.099
    Und wie mach ich das jetzt wieder rückgängig?
     
  17. Puh, viel Arbeit, teilweise wohl nicht so einfach umsetzbar (aber: nichts ist unmöglich, Toyota). Mal schauen wie ich das regel, der Code ist wirklich mehr als unübersichtlich und teilweise wirklich schrecklich.

    Man kann auf der Webseite auswählen ob man es für Stylish oder Greasemonkey installieren will. Stylish ist jedoch massiv schneller als Greasemonkey. Die Fehler kommen definitiv von Gamestar.de und nicht von meinen CSS Style ;)

    Du solltest jetzt unten rechts ein kleines Icon haben das so aussieht wie ein Pinsel auf einem Blatt Papier. Einmal da drauf klicken, dann siehst du direkt welche CSS Styles für die aktuelle Webseite aktiviert sind. Durch einen Klick auf einer der Styles kannst du sie ganz einfach deaktivieren. Falls du das ganze Plugin deinstallieren möchtest kannst du es unter "Extras -> Add-ons" wieder deinstallieren.
     
  18. Du machst die Schritte rückwärts. :P
     
  19. Amischos

    Amischos
    Registriert seit:
    27. Oktober 2006
    Beiträge:
    1.048
    Ort:
    Berlin
    Mein RIG:
    CPU:
    Intel Xeon 1231v3
    Grafikkarte:
    Asus RTX2060 Dual Advanced
    Motherboard:
    Gigabyte H97-D3H
    RAM:
    16GB DDR3
    Laufwerke:
    Crucial MX500 500GB
    Samsung 750 Evo 250GB
    Toshiba 3TB
    Soundkarte:
    Creative Soundblaster-Z
    Gehäuse:
    Fractal Design Define R4 White
    Maus und Tastatur:
    Logitech G910 Orion Spark
    Hyrican MK31
    Betriebssystem:
    Windows 10 Pro 64Bit
    Monitor:
    AOC Q3279VWF
    Na wie es aussieht arbeiten die gerade fieberhaft an der Seite, die Hauptseite ist schon zentriert worden, hoffe beim Forum und dem Rest der Seiten wird dies folgen. So lange die Wünsche der Community (wir benutzen nunmal diese Seite) eingegangen wird kann es ja nur besser werden.
     
  20. Wer es ohne Plugin erreichen möchte, macht folgendes:
    Öffne diese Datei: C:/Dokumente/und/Einstellungen/Benutzername/Anwendungsdaten/Mozilla/Firefox/Profiles/username/chrome/userContent.css

    Falls sie nicht existiert, dann nimm den Editor speicher eine Datei mit genau diesem Namen ab ( keine Textdatei (.txt) sondern .css).

    In diese Datei müsst ihr dann nur noch diesen Code reinkopieren und speichern:
    Code:
    @-moz-document url(http://gamestar.de/),
                  url-prefix(http://gamestar.de/),
                  domain(gamestar.de)
    {
     body  > table {
    margin:0 auto; }
    }
    
    Und den Firefox neustarten, fertig.

    @steff: Schon die CSS-Eigentschaften gefunden, die die Breite regeln?
     
    Zuletzt von einem Moderator bearbeitet: 17. März 2008
  21. Auch ne Möglichkeit, allerdings gibts dafür keine Updatefunktion ;)

    Gamestar scheint gerade wie wild an der Seite zu basteln (Stümperhaft, echt...) daher wird sich der Code noch des öfteren ändern. Vielleicht machen sie es auch so dass wir schlussendlich gar kein Stylesheet mehr brauchen.
     
  22. .
     
    Zuletzt von einem Moderator bearbeitet: 9. November 2008
  23. Damit zerstörst du nur das Layout. :D
     
  24. Wenn sich nichts daran ändert, dass die ganze Seite auf einem direkten Kindelement table von body basiert, funktioniert das auch schön.
     
  25. .
     
    Zuletzt von einem Moderator bearbeitet: 9. November 2008
  26. <3 Steff
     
  27. Leider gibt es noch andere unschöne Dinge, nicht nur dass die Seite nicht zentriert ist. Zudem ist es besser direkt das Body Element im Html Element zu zentrieren als die Tabelle im Body ;)

    Wer ein Update will das unter anderem die Links besser sichtbar macht, klickt einmal auf das Stylish Symbol unten rechts, dann auf "Stile verwalten...". Es wird ein neues Fenster geöffnet bei dem auf "Updates suchen..." geklickt werden muss.
     
  28. Wolfpig

    Wolfpig
    Registriert seit:
    14. Dezember 2004
    Beiträge:
    41.230
    Code:
    .tcat      {
    	color: Black !important;
    }
    strong   {
    	color: Black !important;
    }
    Für die Leute, dennen die Farbe von der postzeit, und des Beitragscounters im Beitrag zu hell ist.......einfach in das Stylesheet einfügen.............Achtung, es kann sein das das mehr als nur die beiden von der Schrift beeinflusst....:ugly:
     
  29. Mein Stylesheet ändert das bereits, und sogar nur dort wo es das auch soll ;)
     
  30. ERASER_M

    ERASER_M
    Registriert seit:
    8. Dezember 2006
    Beiträge:
    755
    :hoch: super daran dachte ich eben auch schon, die Texte wo immer steht von wann der Post ist konnte man gar nicht richtig erkennen!

    Musst aber nochmal gucken bei den Steckbriefen, dort ist jetzt die Schrift auch Blau... die müsstest du evtl wieder weiß machen ;)
     
  31. Daran arbeite ich gerade.

    Vorversion ist bereits fertig :D
     
  32. Wolfpig

    Wolfpig
    Registriert seit:
    14. Dezember 2004
    Beiträge:
    41.230
    Dann hast du das nachträglich da eingefügt............das letze mal standen da nur die oberne beiden Sachen drinne.....:mad:
     
  33. 0m3g4

    0m3g4
    Registriert seit:
    26. April 2005
    Beiträge:
    1.697
    Sehr schön, super Sache. Leider verzerrt es die Kästchen zum Antworten und direkt antworten (bei mir zumindest).
     
  34. Wolfpig

    Wolfpig
    Registriert seit:
    14. Dezember 2004
    Beiträge:
    41.230
    Dann hast du das nachträglich da eingefügt............das letze mal standen da nur die oberne beiden Sachen drinne.....:mad:
     
  35. Das macht leider die Gamestar und nicht ich bzw mein Stylesheet ;)

    Sie kriegen das Problem mit den überlangen Posts nicht hin. Das geht leider nur Serverseitig.

    @Wolfpig: das Stylesheet wird natürlich immer wieder upgedatet, die GS ändert ja momentan immer wieder was, also muss ich mitziehen :D
     
    Zuletzt von einem Moderator bearbeitet: 17. März 2008
  36. Spattel

    Spattel
    Registriert seit:
    20. März 2005
    Beiträge:
    1.736
    Ort:
    mir geschriebene
    sehr viel langsamer als sie jetzt sowieso schon ist kann sie ja wohl kaum noch werden. :ugly:
     
  37. 0m3g4

    0m3g4
    Registriert seit:
    26. April 2005
    Beiträge:
    1.697
    Na ja, es gibt schlimmeres. :)
     
  38. schönes ding!

    danke!
     
  39. Ähm, naja - das ist doch schon bei Games im Allgemeinen so, wieso dann nicht auch bei Gamestar? :ugly:;)
     
  40. Hehe, den Steff999 gibts auch noch. ^^

    Ich konnte es nicht lassen und hab noch ein altes Stylesheet vom klassischen Blue-Style hinzugefügt:

    Code:
    // ==UserScript==
    // @name          Center gamestar.de
    // @namespace     http://userstyles.org
    // @description	  Zentriert die ganze Gamestar.de Webseite + Fast schon Classic Design
    // @author        Steff
    // @homepage      http://userstyles.org/styles/5768
    // @include       http://gamestar.de/*
    // @include       https://gamestar.de/*
    // @include       http://*.gamestar.de/*
    // @include       https://*.gamestar.de/*
    // ==/UserScript==
    
    
    var css = "@namespace url(http://www.w3.org/1999/xhtml); html{ background:#ebebeb !important; } body { width:875px !important; margin:0 auto !important; }  body{	color: #182263;	font: 9pt arial, helvetica, verdana, sans-serif;	color:black;		margin:0px;		padding:0px;}a:link, body_alink{	color: #182263;	text-decoration: underline;}a:visited, body_avisited{	color: #182263;	text-decoration: underline;}a:hover, a:active, body_ahover{	color: #FF4400;	text-decoration: underline;}.page{	background: #FFFFFF;	color: #182263;}td, th, p, li{	font: 9pt arial, helvetica, verdana, sans-serif;}.tborder{	background: #ededed;	color: #182263;	border: 1px solid #0F1957;}.tcat{	background: #2E3778;	color: #FFFFFF;	font: bold 9pt arial, helvetica, verdana, sans-serif;}.tcat a:link, .tcat_alink{	color: #ffffff;	text-decoration: none;}.tcat a:visited, .tcat_avisited{	color: #ffffff;	text-decoration: none;}.tcat a:hover, .tcat a:active, .tcat_ahover{	color: #FFFF66;	text-decoration: underline;}.thead{	background: #2E3778;	color: #FFFFFF;	font: bold 9pt arial, helvetica, verdana, sans-serif;}.thead a:link, .thead_alink{	color: #FFFFFF;}.thead a:visited, .thead_avisited{	color: #FFFFFF;}.thead a:hover, .thead a:active, .thead_ahover{	color: #FFFF00;}.tfoot{	background: #D3D3D3;	color: #ffffff;}.tfoot a:link, .tfoot_alink{	color: #182263;}.tfoot a:visited, .tfoot_avisited{	color: #182263;}.tfoot a:hover, .tfoot a:active, .tfoot_ahover{	color: #FFFF66;}.alt1, .alt1Active{	background: #ededed;	color: #182263;}.alt2, .alt2Active{	background: #D3D3D3;	color: #182263;}td.inlinemod{	background: #FFFFCC;	color: #000000;}.wysiwyg{	background: #ededed;	color: #182263;	font: 9pt arial, helvetica, verdana, sans-serif;}textarea, .bginput{	font: 9pt arial, helvetica, verdana, sans-serif;}.button{	font: 9pt arial, helvetica, verdana, sans-serif;}select{	font: 9pt arial, helvetica, verdana, sans-serif;}option, optgroup{	font-size: 9pt;	font-family: arial, helvetica, verdana, sans-serif;}.smallfont{	font: 9pt arial, helvetica, verdana, sans-serif;}.time{	color: #666686;}.navbar{	font: 9pt arial, helvetica, verdana, sans-serif;}.highlight{	color: #FF0000;	font-weight: bold;}.fjsel{	background: #2E3778;	color: #ededed;}.fjdpth0{	background: #F7F7F7;	color: #000000;}.panel{	background: #D3D3D3;	color: #182263;	padding: 10px;	border: 2px outset;}.panelsurround{	background: #ededed;	color: #182263;}legend{	color: #182263;	font: 9pt arial, helvetica, verdana, sans-serif;}.vbmenu_control{	background: #2E3778;	color: #FFFFFF;	font: bold 9pt arial, helvetica, verdana, sans-serif;	padding: 3px 6px 3px 6px;	white-space: nowrap;}.vbmenu_control a:link, .vbmenu_control_alink{	color: #FFFFFF;	text-decoration: none;}.vbmenu_control a:visited, .vbmenu_control_avisited{	color: #FFFFFF;	text-decoration: none;}.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover{	color: #FFFFFF;	text-decoration: underline;}.vbmenu_popup{	background: #FFFFFF;	color: #182263;	border: 1px solid #0B198C;}.vbmenu_option{	background: #BBC7CE;	color: #000000;	font: 9pt arial, helvetica, verdana, sans-serif;	white-space: nowrap;	cursor: pointer;}.vbmenu_option a:link, .vbmenu_option_alink{	color: #22229C;	text-decoration: none;}.vbmenu_option a:visited, .vbmenu_option_avisited{	color: #22229C;	text-decoration: none;}.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover{	color: #FFFFFF;	text-decoration: none;}.vbmenu_hilite{	background: #8A949E;	color: #FFFFFF;	font: 9pt arial, helvetica, verdana, sans-serif;	white-space: nowrap;	cursor: pointer;}.vbmenu_hilite a:link, .vbmenu_hilite_alink{	color: #FFFFFF;	text-decoration: none;}.vbmenu_hilite a:visited, .vbmenu_hilite_avisited{	color: #FFFFFF;	text-decoration: none;}.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover{	color: #FFFFFF;	text-decoration: none;}/* ***** small padding on 'thead' elements ***** */td.thead, div.thead { padding: 4px; }/* ***** basic styles for multi-page nav elements */.pagenav a { text-decoration: none; }.pagenav td { padding: 2px 4px 2px 4px; }/* ***** define margin and font-size for elements inside panels ***** */.fieldset { margin-bottom: 6px; }.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 9pt; }/* ***** don't change the following ***** */form { display: inline; }label { cursor: default; }.normal { font-weight: normal; }/*.inlineimg { vertical-align: middle; } */.bigusername { font-size: 20px; font-weight: normal; }";
    
    
    if (typeof GM_addStyle != "undefined") {
    	GM_addStyle(css);
    } else if (typeof addStyle != "undefined") {
    	addStyle(css);
    } else {
    	var heads = document.getElementsByTagName("head");
    	if (heads.length > 0) {
    		var node = document.createElement("style");
    		node.type = "text/css";
    		node.appendChild(document.createTextNode(css));
    		heads[0].appendChild(node); 
    	}
    }
    
    Zur Installation obigen Code in Notepad++ o.ä. kopieren, als centergamestarde.user.js abspeichern und im FF öffnen (Greasemonkey vorausgesetzt). :)

    War eine 2 Minuten Copy-Paste-Aktion. Erwartet kein Wunder. :ugly:


    Screenshots:
    Threadansicht: http://img296.imageshack.us/img296/9809/gspbkindaclassicpj3.png
    Smalltalk-Übersicht: http://img176.imageshack.us/img176/8817/gspbsmalltalkkindaclassxf7.png
     
    Zuletzt von einem Moderator bearbeitet: 17. März 2008
Top