Bisaboard Stil-Mod "Black Yveltal" (Firefox, Chrome, Opera only)

  • Wie im Titel schon zu erkennen ist, richtet sich dieses "Tutorial" einzig an die Nutzer der Browser Firefox, Chrome und Opera, da das Add-on Stylish benötigt wird. Im weiteren wurden alle Ergebnisse nur im Firefox getestet und können ggf anderst in anderen Browsern ausfallen, wobei es trotzdem funktionieren sollte, da es nur auf das Add-on an kommt. Sollte es andere Add-ons für Userstyles für andere Browser geben, kann man möglicherweise den hier gezeigten Code portieren, dies ist jedoch nicht Teil dieses Tuts.


    Worum geht es also? In letzter Zeit wurden immer wieder Designs veröffentlicht, die mich, als liebhaber dunklerer Styles, nicht sonderlich angesprochen haben. Bisher konnte ich immer noch bei dem Crypto-Style oder vergleichbarem bleiben, diese wurden jedoch mit dem Update des Forums weg gepatcht. Da ich aber trotzdem nicht auf meine dunklen Designs verzichten wollte, hab ich nen kleinen Mod geschrieben, der das Forum etwas anpasst. Dieser Mod ist lokal anzuwenden und beeinflusst das Forum nicht. Ebenso können natürlich gern andere User über das oben beschriebene Add-on eigene Styles entwickeln und ggf Teile dieses verwenden.



    Um das oben gezeigte Ergebniss zu erhalten müsst ihr zuerst den Stil "Trading Card Game - dunkel" im BB einstellen. Als der aktuell dunkelste Stil käme er meinen persönlichen Erwartungen schon ziemlich nahe. Im Anschluss wird der unten stehende Code in einen neuen Stil in Stylish eingefügt und ggf noch aktiviert, dann sollte das Forum wie oben gezeigt aussehen.



    Nun, auch wenn ich es als Design-Mod ausgewiesen haben, ist es doch eher ein Utility-Mod, da es neben der Änderung des Logos und der Farbe lediglich die Verwendbarkeit des Forums verbessert wurde...
    Noch mal alle Features aufgelistet + der dafür nötige Code:

    • keine Like-Spalte in der Threadübersicht mehr
      CSS
      1. .columnLikes{ display: none; }


    • Seiten-Sprunglinks sind immer sichtbar
      CSS
      1. .messageGroupList tr .columnSubject .statusDisplay .pageNavigation{ opacity: 1; }


    • keine Nummern mehr in der Navigationbar im Header
      CSS
      1. #mainMenu .badge.badgeUpdate{ display: none; }


    • angenehmere Breite des Forums auf großen Bildschirmen (über 1300px Breite)
      CSS
      1. #main, #mainMenu, .navigation.navigationHeader, #pageFooter{ max-width: 1300px !important; }


    • Yveltal im Header
      CSS
      1. #logo a{ background-image: url("http://www.bisaboard.de/wcf/images/pkmnY/logo.png"); background-repeat: no-repeat; width: 826px; height: 264px; margin: auto; } #logo a img{ display: none; } #logo{ margin-top: 40px; margin-bottom: 0px; }


    • blau wurde durch rot ersetzt


    • der Editor wurde etwas dunkler (genauer zu sehen im letzten Screen)
      CSS
      1. .cke_source, .cke_source:hover, .cke_inner, .cke_reset{
      2. background: none;
      3. color: #CCCCCC;
      4. }


  • Na ja, weder hab ich den benannten Style benutzt (weshalb ich nicht weiß wie er aussehen würde), noch weiß ich ob ein Recode eines gesammten Designs im Bereich meiner zeitlichen Möglichkeiten liegt. Mal kurz nen Style anpassen ist schneller und einfacher erledigt als ein richtiger Recode... (wäre es anderst, hätte es mit Sicherheit schon jemanden vom Team gegeben, der kurz die Styles portiert hätte.)

  • Wenn dir sonst die Farben gefallen, suche im Style nach
    "http://www.bisaboard.de/wcf/images/pkmnY/logo.png"
    und ersetze es mit
    "https://www.bisaboard.de/wcf/images/pkmnX/logo.png"


    Wenn du das Rot durch blau ersetzen willst:
    700000 -> 000070
    FF0000 -> 0000FF
    D00000 -> 0000D0
    ersetzte einfach im Code alle hier gelisteten Zahlen vor dem -> durch alle nach ihm.


    könnte allerdings etwas zu dunkel werden, da blau eine dunklere Farbe als rot ist....