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.
@namespace url(http://www.w3.org/1999/xhtml);/*Features:-keine Like-Spalte in der Threadübersicht mehr-Seiten-Sprunglinks sind immer sichtbar-keine Nummern mehr in der Navigationbar im Header-angenehmere Breite des Forums auf großen Bildschirmen-blau wurde durch rot ersetzt-der Editor wurde etwas dunkler*/@-moz-document domain("www.bisaboard.de") { /*Seiten-Sprunglinks sind immer sichtbar*/ .messageGroupList tr .columnSubject .statusDisplay .pageNavigation{ opacity: 1; } /*keine Like-Spalte in der Threadübersicht mehr*/ .columnLikes{ display: none; } /*keine Nummern mehr in der Navigationbar im Header*/ #mainMenu .badge.badgeUpdate{ display: none; } /*angenehmere Breite des Forums auf großen Bildschirmen*/ #main, #mainMenu, .navigation.navigationHeader, #pageFooter{ max-width: 1300px !important; } /*Yveltal header*/ #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; } /*moar red*/ a, .navigation > ul.navigationItems .icon, .navigation > ul.navigationMenuItems .icon, .navigation > ul.navigationIcons .icon, .wbbBoardList .icon, .navigation > ul.navigationItems > li > p{ color: #D00000 !important; } a:hover, .navigation>ul.navigationItems .icon:hover, .navigation>ul.navigationMenuItems .icon:hover, .navigation>ul.navigationIcons .icon:hover{ color: #FF0000 !important; } .badge.badgeUpdate, .userPanel > div > ul.userPanelItems > li > a > .badge.badgeInverse, .userPanel > div > ul.userPanelItems > li > div:not(.dropdownMenu) > .badge.badgeInvers{ background-color: #700000; } .icon-folder-close:before,.wbbSubBoards .icon-folder-close:before, .wbbSubBoards .icon-folder-close-alt:before, .icon-folder-close-alt:before{ content: ""; } .dialogTitlebar{ background-color: #700; } .tabularBox{ background-color: #000000; background-image: linear-gradient(#700 0px, #000 50px); } a.badge, .tabularBox header a{ color: #000 !important; } .button.buttonPrimary .icon, input[type="submit"]:not([disabled]) .icon, input.buttonPrimary[type="button"]:not([disabled]) .icon, button.buttonPrimary:not([disabled]) .icon, .wbbSubBoards .icon-folder-close-alt:before, .icon-folder-close-alt:before, .dataList a{ color: #9F9F9F !important; } .button.buttonPrimary:hover .icon, input[type="submit"]:not([disabled]):hover .icon, input.buttonPrimary[type="button"]:not([disabled]):hover .icon, button.buttonPrimary:not([disabled]):hover .icon{ color: #000000; } .button.buttonPrimary, input[type="submit"]:not([disabled]), input.buttonPrimary[type="button"]:not([disabled]), button.buttonPrimary:not([disabled]){ background: #000000; border-color: #700000; color: #D00000; } button:hover, .button:hover, .button.buttonPrimary:hover, input[type="submit"]:not([disabled]):hover, input.buttonPrimary[type="button"]:not([disabled]):hover, button.buttonPrimary:not([disabled]):hover{ background: #700000 !important; border-color: #FF0000!important; color: #FF0000!important; } /*der Editor wurde etwas dunkler*/ .cke_source, .cke_source:hover, .cke_inner, .cke_reset{ background: none; color: #CCCCCC; }}
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
- Seiten-Sprunglinks sind immer sichtbar
- keine Nummern mehr in der Navigationbar im Header
- angenehmere Breite des Forums auf großen Bildschirmen (über 1300px Breite)
- Yveltal im HeaderCSS
#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 ersetztCSS
a, .navigation > ul.navigationItems .icon, .navigation > ul.navigationMenuItems .icon, .navigation > ul.navigationIcons .icon, .wbbBoardList .icon, .navigation > ul.navigationItems > li > p{ color: #D00000 !important; } a:hover, .navigation>ul.navigationItems .icon:hover, .navigation>ul.navigationMenuItems .icon:hover, .navigation>ul.navigationIcons .icon:hover{ color: #FF0000 !important; } .badge.badgeUpdate, .userPanel > div > ul.userPanelItems > li > a > .badge.badgeInverse, .userPanel > div > ul.userPanelItems > li > div:not(.dropdownMenu) > .badge.badgeInvers{ background-color: #700000; } .icon-folder-close:before,.wbbSubBoards .icon-folder-close:before, .wbbSubBoards .icon-folder-close-alt:before, .icon-folder-close-alt:before{ content: ""; } .dialogTitlebar{ background-color: #700; } .tabularBox{ background-color: #000000; background-image: linear-gradient(#700 0px, #000 50px); } a.badge, .tabularBox header a{ color: #000 !important; } .button.buttonPrimary .icon, input[type="submit"]:not([disabled]) .icon, input.buttonPrimary[type="button"]:not([disabled]) .icon, button.buttonPrimary:not([disabled]) .icon, .wbbSubBoards .icon-folder-close-alt:before, .icon-folder-close-alt:before, .dataList a{ color: #9F9F9F !important; } .button.buttonPrimary:hover .icon, input[type="submit"]:not([disabled]):hover .icon, input.buttonPrimary[type="button"]:not([disabled]):hover .icon, button.buttonPrimary:not([disabled]):hover .icon{ color: #000000; } .button.buttonPrimary, input[type="submit"]:not([disabled]), input.buttonPrimary[type="button"]:not([disabled]), button.buttonPrimary:not([disabled]){ background: #000000; border-color: #700000; color: #D00000; } button:hover, .button:hover, .button.buttonPrimary:hover, input[type="submit"]:not([disabled]):hover, input.buttonPrimary[type="button"]:not([disabled]):hover, button.buttonPrimary:not([disabled]):hover{ background: #700000 !important; border-color: #FF0000!important; color: #FF0000!important; }
- der Editor wurde etwas dunkler (genauer zu sehen im letzten Screen)