Pimp your dotasource - Stylish plugin guide und Design-Diskussion

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Pimp your dotasource - Stylish plugin guide und Design-Diskussion

      Da mir ein paar stilistische Änderungen von dotasource reborn nicht gefielen, habe ich mir die Seite mittels des Browser-Plugins Stylish etwas angepasst. Wem's gefällt, der kann sich das ganze übernehmen oder für sich weiter individuell anpassen, mit rudimentären HTML- und CSS-Kenntnissen ist das ganze recht einfach.Grundsätzlich ist der Thread auch dazu gedacht, Kritik und Verbesserungsvorschläge zum neuen Design zu sammeln - bitte aber wirklich nur zum Design, Feature-Diskussionen gehören hier nicht rein. Grundsätzlich kann man rein optisch mit Stylish nahezu alles ändern, beispielsweise Farbgebung, Schriftarten, Anordnung und Größe der einzelnen Komponenten etc. Wer eine gute Idee hat, aber es nicht hinbekommt, das ganze selbst einzustellen: Einfach hier reinposten, ich versuche mein Glück.Meine bisherigen Änderungen:
      • Forenbreite reduziert - imho das wichtigste, diese volle Breite ist am PC mMn. eine Zumutung
      • Freie Fläche zwischen dem DotaSource - News - Community - Balken und dem oberen Seitenrand entfernt
      • Hintergrundbild vom wacken Brewmaster auf den überlegenen Fuzzy Wuzzy geändert :bluecool:
      • Farbe von Markierungen von dem neuen Orange auf das Chrome-Standardblau geändert - ziemlich unwichtig, ich mag die Standardmarkierung einfach lieber
      Mit den kleinen Anpassungen gefällt mir das neue Design ziemlich gut, bloß den Schwarz-Grau-Verlauf bei Beiträgen finde ich optisch ziemlich grausam, aber der soll sich ja eh noch ändern.Vergleichsbilder:
      Vorher
      Nachher
      Wie's geht:1. Plugin installieren (Chrome|Firefox)2. dotasource aufrufen und auf's Plugin-Icon klicken3. Style erstellen für: dotasource.de4. Den folgenden code einfügen und abspeichern:

      CSS-Quellcode

      1. .layoutFluid {
      2. max-width: 60%;
      3. }
      4. #topNavigation {
      5. margin-top: 39px;
      6. }
      7. ::selection {
      8. color: white;
      9. background: #338FFF;
      10. }
      11. body .body-bg {
      12. background-image: url("http://i.imgur.com/2m4jkvl.jpg");
      13. }
      Alles anzeigen

      Update kommt heute noch

      14 Likes

      15.11.2015, 23:17 Account löschen.
      15.11.2015, 23:17 dynamit dieter
      15.11.2015, 23:17 Nao
      15.11.2015, 23:23 Zagdil
      15.11.2015, 23:27 ｋｏｂｏｌｄ
      15.11.2015, 23:29 DESTRUCTIVE.
      15.11.2015, 23:33 Laulau
      15.11.2015, 23:42 m-u-h
      15.11.2015, 23:46 myr-Q
      15.11.2015, 23:46 THC-Veraechter
      15.11.2015, 23:57 Nifunifa
      16.11.2015, 02:09 roflgrins
      16.11.2015, 14:16 Tri66erK
      17.11.2015, 19:26 Ryusej


      Dieser Beitrag wurde bereits 52 mal editiert, zuletzt von lubold ()




      eventually there comes a point where it's like the true test for your team - will he cast a spell or will he not
      - Artour Babaev

      Und wenn beide dann nicht mehr stacken und der einer 6k Boi, der vorher 4k war, mit einem anderen 4k Boi spielt, dann ist er nicht mehr 6k, weil er reverse trägert, oder?
      - User des Monats

    • Wer das lieber mag, kann sich damit auch die Signatur wieder über die ganze Breite machen. Code dafür:

      CSS-Quellcode

      1. .message .messageHeader + .messageBody > .messageSignature { width: 100%;}
      e: gefixt, war falsch

      3 Likes

      15.11.2015, 23:29 ｋｏｂｏｌｄ
      15.11.2015, 23:29 DESTRUCTIVE.
      16.11.2015, 15:49 imKreis


      Dieser Beitrag wurde bereits 15 mal editiert, zuletzt von lubold ()




      eventually there comes a point where it's like the true test for your team - will he cast a spell or will he not
      - Artour Babaev

      Und wenn beide dann nicht mehr stacken und der einer 6k Boi, der vorher 4k war, mit einem anderen 4k Boi spielt, dann ist er nicht mehr 6k, weil er reverse trägert, oder?
      - User des Monats

    • habe actually 0 plan von css, benutze nur den eingebauten inspector (ctrl + shift + c in chrome) und spiele dann an irgendwelchen werten rum.

      2 Likes

      15.11.2015, 23:35 fugo
      15.11.2015, 23:42 m-u-h


      Dieser Beitrag wurde bereits 8 mal editiert, zuletzt von lubold ()




      eventually there comes a point where it's like the true test for your team - will he cast a spell or will he not
      - Artour Babaev

      Und wenn beide dann nicht mehr stacken und der einer 6k Boi, der vorher 4k war, mit einem anderen 4k Boi spielt, dann ist er nicht mehr 6k, weil er reverse trägert, oder?
      - User des Monats

    • würde noch empfehlen ein padding für die seiten einzubauen, sonst sehen linksbündige signaturen 1 wenig blöd aus

      CSS-Quellcode

      1. .message .messageHeader + .messageBody > .messageSignature div{
      2. padding: 0 10px;
      3. }

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von luke ()

    • funktioniert nicht, denke mal weil das ganze floating ist



      eventually there comes a point where it's like the true test for your team - will he cast a spell or will he not
      - Artour Babaev

      Und wenn beide dann nicht mehr stacken und der einer 6k Boi, der vorher 4k war, mit einem anderen 4k Boi spielt, dann ist er nicht mehr 6k, weil er reverse trägert, oder?
      - User des Monats

    • lustigerbilderposter schrieb:

      funktioniert nicht, denke mal weil das ganze floating ist
      nein, daran liegt es nicht. mein fehler war, dass nicht der messageSignature div selbst den padding braucht, sondern der darin eingenistete div, worin sich der eigentliche inhalt der signatur befindet. dann entsteht der abstand zwischen inhalt und signatur div (width:100%), während die trennlinie durchgezogen bleibt
      ich habe meinen post angepasst, jetzt sollte es funktionieren.

    • luke schrieb:

      würde noch empfehlen ein padding für die seiten einzubauen, sonst sehen linksbündige signaturen 1 wenig blöd aus

      CSS-Quellcode

      1. .message .messageHeader + .messageBody > .messageSignature {
      2. padding: 0 10px;
      3. }
      um noch mal darauf zurückzukommen:
      das ganze ist nicht (so einfach) möglich, da das <div>-element innerhalb der signatur, das den tatsächlichen inhalt beinhaltet (und dem man einfach ein padding hinzufügen könnte) keine class hat und dementsprechend nicht über css angesprochen werden kann :c

      edit: siehst du, hab keine ahnung von css, ging ja doch recht einfach =D



      eventually there comes a point where it's like the true test for your team - will he cast a spell or will he not
      - Artour Babaev

      Und wenn beide dann nicht mehr stacken und der einer 6k Boi, der vorher 4k war, mit einem anderen 4k Boi spielt, dann ist er nicht mehr 6k, weil er reverse trägert, oder?
      - User des Monats

    • lustigerbilderposter schrieb:

      luke schrieb:

      würde noch empfehlen ein padding für die seiten einzubauen, sonst sehen linksbündige signaturen 1 wenig blöd aus

      CSS-Quellcode

      1. .message .messageHeader + .messageBody > .messageSignature {
      2. padding: 0 10px;
      3. }
      um noch mal darauf zurückzukommen:das ganze ist nicht (so einfach) möglich, da das <div>-element innerhalb der signatur, das den tatsächlichen inhalt beinhaltet (und dem man einfach ein padding hinzufügen könnte) keine class hat und dementsprechend nicht über css angesprochen werden kann :c
      doch, dafür gibt es css-selektoren ;)
      schreibst du, wie in meinem angepasstem code

      Quellcode

      1. .messageSignature div {
      2. <bla>
      3. }
      sagst du dem browser, dass du alle divs innerhalb eines elements mit der klasse ".messageSignature" ansprechen willst.

      edit: :)

    • lustigerbilderposter schrieb:

      funktioniert nicht, denke mal weil das ganze floating ist

      CSS-Quellcode

      1. .messageHeader + .messageBody > div:first-child:not(.redactor-box), .messageBody > div:not(.messageFooter):not(.messageTabMenu):not(.redactor-box):not(:first-child) {
      2. padding: 14px 5px;
      3. }
      4. .message .messageHeader + .messageBody > .messageSignature {
      5. float: left;
      6. }
      Denke ich geb nachher auch nochn bissl Code rein.
      世界一　皆の人気者
      それは彼女のこと
      アシュリー

    • schriften, buttons und overlays:

      CSS-Quellcode

      1. /*SCHRIFT*/
      2. a {
      3. color: #8000FF;
      4. }
      5. .navigation > ul.navigationItems > li > a, .navigation > ul.navigationMenuItems > li > a {
      6. color: #8000FF;
      7. }
      8. .messageTabMenu > nav.messageTabMenuNavigation > ul > li.active > a {
      9. color: #8000FF;
      10. }
      11. .navigation > ul.navigationItems > li > p {
      12. color: #8000FF;
      13. }
      14. .footerContent a, .logo a {
      15. color: #8000FF;
      16. }
      17. /*STERNCHEN OVERLAYS BEI THREADS*/
      18. .messageGroupList tr.new .columnAvatar > div::after {
      19. color: #8000FF;
      20. }
      21. /*BUTTONS*/
      22. .button.buttonPrimary, input[type='submit']:not([disabled]), input[type='button']:not([disabled]).buttonPrimary, button:not([disabled]).buttonPrimary {
      23. background-color: #8000FF; /*hintergrundfarbe*/
      24. border-color: #b42719;/*rahmenfarbe*/
      25. color: #ffffff;/*schriftfarbe*/
      26. }
      27. /*BUTTONS WENN MAN MIT DER MAUS DRÜBERFÄHRT*/
      28. .button.buttonPrimary:hover, input[type='submit']:not([disabled]):hover, input[type='button']:not([disabled]).buttonPrimary:hover, button:not([disabled]).buttonPrimary:hover {
      29. background-color: #00FF00; /*hintergrundfarbe*/
      30. border-color: #b42719;/*rahmenfarbe*/
      31. color: #ffffff;/*schriftfarbe*/
      32. }
      33. /*ORDNER-SYMBOLE*/
      34. .wbbBoardList .icon {
      35. color: #8000FF;
      36. }
      37. /*UPDATE-ZAHLEN RECHTS NEBEN DEN FOREN*/
      38. .badge.badgeUpdate {
      39. background-color: #8000FF; /*hintergrundfarbe*/
      40. color: #000; /*schriftfarbe*/
      41. }
      42. /*MARKIERUNG DES AKTUELL AUSGEWÄHLTEN REITERS FORUM/MITGLIEDER/TEAMSPEAK*/
      43. #mainMenu > ul > li.active a {
      44. border-top: 3px solid #FFFF00;
      45. }
      46. /*MARKIERUNG DES REITERS BEI MOUSEOVER*/
      47. #mainMenu > ul > li a:hover {
      48. border-top: 3px solid #FF00FF;
      49. }
      50. /*NAVIGATION-ICONS OBEN RECHTS*/
      51. .navigation > ul.navigationItems .icon, .navigation > ul.navigationMenuItems .icon, .navigation > ul.navigationIcons .icon {
      52. color: #FF00FF;
      53. }
      Alles anzeigen

      farbe halt ändern wie man will, farbcodes raussuchen beispielsweise hier

      Dieser Beitrag wurde bereits 9 mal editiert, zuletzt von lubold ()




      eventually there comes a point where it's like the true test for your team - will he cast a spell or will he not
      - Artour Babaev

      Und wenn beide dann nicht mehr stacken und der einer 6k Boi, der vorher 4k war, mit einem anderen 4k Boi spielt, dann ist er nicht mehr 6k, weil er reverse trägert, oder?
      - User des Monats

    • Hier für mein Lila-Dsde:

      CSS-Quellcode

      1. .layoutFluid {
      2. max-width: 60%;
      3. }
      4. #topNavigation {
      5. margin-top: 39px;
      6. }
      7. ::selection {
      8. color: white;
      9. background: #338FFF;
      10. }
      11. body{
      12. background-image: url("http://i.imgur.com/91lvbQv.jpg");
      13. }
      14. .message .messageHeader + .messageBody > .messageSignature {
      15. width: 100%;
      16. }
      17. .button.buttonPrimary, input[type="submit"]:not([disabled]), input.buttonPrimary[type="button"]:not([disabled]), button.buttonPrimary:not([disabled]) {
      18. background-color: #9B30FF;
      19. border-color: #9B30FF;
      20. }
      21. .button.buttonPrimary:hover, input[type="submit"]:hover:not([disabled]), input.buttonPrimary[type="button"]:hover:not([disabled]), button.buttonPrimary:hover:not([disabled]) {
      22. background-color: #9B30FF;
      23. border-color: #9B30FF;
      24. }
      25. .message .messageSidebar header .username {
      26. color: #9B30FF;
      27. }
      28. a {
      29. color: #9B30FF;
      30. }
      31. .navigation > ul.navigationItems > li > a, .navigation > ul.navigationMenuItems > li > a {
      32. color: #9B30FF;
      33. }
      34. #mainMenu > ul > li.active a {
      35. border-top: 3px solid #9B30FF;
      36. }
      37. .navigation > ul.navigationItems .icon, .navigation > ul.navigationMenuItems .icon, .navigation > ul.navigationIcons .icon {
      38. color: #9B30FF;
      39. }
      40. .navigation > ul.navigationItems > li > p {
      41. color: #9B30FF;
      42. }
      43. .footerContent a, .logo a {
      44. color: #000;
      45. }
      46. #mainMenu > ul > li a:hover {
      47. border-top: 3px solid #9B30FF;
      48. }
      49. .wbbBoardList .icon {
      50. color: #8A2BE2;
      51. }
      52. .badge.badgeUpdate {
      53. background-color: #9B30FF;
      54. }
      55. .tabMenu > ul > li.ui-state-active > a {
      56. color: #9B30FF;
      57. }
      58. .sidebar fieldset > nav ul > li > a {
      59. color: #9B30FF;
      60. }
      61. .messageHeader + .messageBody > div:first-child:not(.redactor-box), .messageBody > div:not(.messageFooter):not(.messageTabMenu):not(.redactor-box):not(:first-child) {
      62. padding: 14px 5px;
      63. }
      64. .message .messageHeader + .messageBody > .messageSignature {
      65. float: left;
      66. }
      67. .messageTabMenu > nav.messageTabMenuNavigation > ul > li.active > a {
      68. color: #9B30FF;
      69. }
      70. .messageTabMenu > nav.messageTabMenuNavigation > ul > li > a:hover {
      71. color: #9B30FF;
      72. }
      73. #logo img {
      74. display: block;
      75. -moz-box-sizing: border-box;
      76. box-sizing: border-box;
      77. background: url("http://i.imgur.com/QOPf6P0.png") no-repeat;
      78. width: 219px;
      79. height: 32px;
      80. padding-left: 219px;
      81. }
      82. #logo img {
      83. display: block;
      84. -moz-box-sizing: border-box;
      85. box-sizing: border-box;
      86. width: 219px;
      87. height: 32px;
      88. padding-left: 219px;
      89. }
      90. #logo a {
      91. background: url("http://i.imgur.com/QOPf6P0.png") no-repeat;
      92. width: 219px;
      93. height: 32px;
      94. display: block;
      95. }
      96. #logo a:hover {
      97. background: url("http://dotasource.de/wcf/images/dotasource_reborn/logo_nav_hover.png");
      98. }
      99. .mainNavigation ul a {
      100. padding: 0 60px 0 0px;
      101. }
      102. }
      Alles anzeigen
      Teilweise vllt ein bisschen over the top, aber sollte alles abgedeckt sein.
      Ein Problem hab ich, ich bekomm das drecksorangene Dotasourcelogo oben links nicht weg. Greasemonkeyscript hats nicht getan (vllt hat einer ne Idee von euch), sonst siehts aber ganz gut aus find ich.

      Wie es aussieht: Der "Wie sieht euer Dotasource aus"-Thread

      Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von DESTRUCTIVE. ()

      世界一　皆の人気者
      それは彼女のこと
      アシュリー

    • wer, wie ich, allergisch gegen scrollbars ist, kann noch folgenden code einfügen:

      Quellcode

      1. .message .messageHeader + .messageBody > .messageSignature div {
      2. max-height: x;
      3. }

      wo x einen pixel betrag darstellt. ich hatte ursprünglich "none" drin, aber BRETTDESZORNS hat beispielsweise in seiner signatur 50 mal das selbe transparente bild drin (?). 500px sollten ok sein

    • CSS-Quellcode

      1. #logo img { display: block; -moz-box-sizing: border-box; box-sizing: border-box; width: 25px; /* Width of new image */ height: 28px; /* Height of new image */ padding-left: 25px; /* Equal to width of new image */}#logo a { width: 25px; /* Width of new image */ height: 28px; /* Height of new image */ background: url(&amp;amp;amp;amp;amp;amp;amp;quot;http://i.imgur.com/2kN2JW4.png&amp;amp;amp;amp;amp;amp;amp;quot;) no-repeat; display: block;}#logo a:hover { background: url(&amp;amp;amp;amp;amp;amp;amp;quot;http://i.imgur.com/erhHRgA.png&amp;amp;amp;amp;amp;amp;amp;quot;) no-repeat;}.mainNavigation ul a { padding: 0 60px 0 0px;}
      :bluecool: e: noch das padding gefixte2: hover mit drin

      2 Likes

      16.11.2015, 01:11 DESTRUCTIVE.
      16.11.2015, 01:20 ｋｏｂｏｌｄ


      Dieser Beitrag wurde bereits 10 mal editiert, zuletzt von lubold ()




      eventually there comes a point where it's like the true test for your team - will he cast a spell or will he not
      - Artour Babaev

      Und wenn beide dann nicht mehr stacken und der einer 6k Boi, der vorher 4k war, mit einem anderen 4k Boi spielt, dann ist er nicht mehr 6k, weil er reverse trägert, oder?
      - User des Monats