Pimp your dotasource - Stylish plugin guide und Design-Diskussion

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • 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: 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 Source Code

      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. }
      Display All

      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 kobold
      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


      The post was edited 52 times, last by 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 Source Code

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

      3 Likes

      15.11.2015, 23:29 kobold
      15.11.2015, 23:29 DESTRUCTIVE.
      16.11.2015, 15:49 imKreis


      The post was edited 15 times, last by 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


      The post was edited 8 times, last by 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
    • 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 wrote:

      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.
      @lkllnd


    • luke wrote:

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

      CSS Source Code

      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 wrote:

      luke wrote:

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

      CSS Source Code

      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

      Source Code

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

      edit: :)
      @lkllnd


    • lustigerbilderposter wrote:

      funktioniert nicht, denke mal weil das ganze floating ist

      CSS Source Code

      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 Source Code

      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. }
      Display All

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

      The post was edited 9 times, last by 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 Source Code

      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. }
      Display All
      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

      The post was edited 3 times, last by DESTRUCTIVE. ().

      世界一 皆の人気者
      それは彼女のこと
      アシュリー
    • wer, wie ich, allergisch gegen scrollbars ist, kann noch folgenden code einfügen:

      Source Code

      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
      @lkllnd


    • CSS Source Code

      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 kobold


      The post was edited 10 times, last by 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