Hallo Leute,
ich nutze ziemlich gerne die Dark Designs für Youtube, Notepad++ etc., da ich Kopfschmerzen vom hellen weissen Hintergrund bekomme.
Deshalb habe ich mich auch entschieden das bei Breadfish zu machen. Dazu wurden nur die CSS Dateien angepasst und somit fast das ganze Design in einen dunklen Stil portiert.
Ich bin mir bewusst, dass manche Sachen noch nicht ganz perfekt sind, da ich das eigentlich so nebenbei flott gemacht habe.
Vielleicht hat ja der ein oder andere das gleiche Problem wie ich und kann damit ziemlich viel weg machen.
Schritt 1
Download des Addons Custom Style Scripts (Firefox Download, Chrome Download!)
(Ihr könnt jedes Addon nutzen, mit dem ihr CSS Dateien einfügen könnt)
Schritt 2
Installation des Addons
Schritt 3
Oben rechts auf das Addon Icon klicken und auf das Zahnrad klicken
Schritt 4
In das Feld "URL" "https://breadfish.de" eintragen.
Feld "Javascript" leer lassen
In das Feld Style(CSS) folgendes eintragen:
#main.sidebarOrientationRight .sidebar {
border-left: 1px solid #000;
}
#main.sidebarOrientationRight {
background-color: #242424;
}
.redactor-box > .redactorAutosaveNotice {
background-color: #2c2626;
border: 1px solid #0e0e0e;
}
.messageTabMenu > div > nav {
background-color: #232323;
border-bottom: 1px solid #000;
}
.messageTabMenu > div > nav ul li a {
color: #E7E7E7;
}
.messageTabMenu > div > nav ul li.active a, .messageTabMenu > div > nav ul li.active a:hover {
color: #FFF;
}
.messageTabMenu > div, .messageTabMenu > fieldset {
border-top: 1px solid #030303;
}
.redactor-toolbar {
background: repeating-linear-gradient(0deg,#000 0px,#000 3%,#232323 3%,#4e4e4e 100%);
}
.redactor-toolbar > li:last-of-type, .redactor-toolbar > li.separator {
border-right: 1px solid #000;
}
.messageTabMenu > div, .messageTabMenu > fieldset {
background-color: #202020;
}
.messageTabMenu > nav.messageTabMenuNavigation > ul {
background-color: #202020;
font-size: 0;
white-space: nowrap;
}
.messageTabMenu > nav.messageTabMenuNavigation > ul > li.active > a {
background-color: #202020;
color: #e6f2ff;
}
.messageTabMenu > nav.messageTabMenuNavigation > ul > li > a {
color: #E1E1E1;
}
.messageTabMenu > nav.messageTabMenuNavigation > ul > li > a:hover {
color: #0080ff;
}
.messageTabMenu {
border: 1px solid #000;
}
.messageTabMenu > nav.messageTabMenuNavigation > ul > li > a {
border-right: 1px solid #111;
}
fieldset > legend {
border-bottom: 1px solid #1d1d1d;
}
.redactor-toolbar {
background: repeating-linear-gradient(0deg,#000 0px,#000 3%,#232323 3%,#4e4e4e 100%);
}
.redactor-box {
border: 1px solid #0f0f0f;
}
.redactor-toolbar > li > a {
color: #F0F0F0;
text-shadow: 0 1px 0 rgba(15, 15, 15, 0.8);
}
.mainMenu > ul > li > a {
text-shadow: 0 1px 0 rgba(78, 78, 78, 0.8);
}
.sidebar .sidebarBoxHeadline > h3 a {
text-shadow: 0 1px 0 rgba(27, 27, 27, 0.8);
}
dl:not(.plain) > dd > label {
color: #fff;
display: block;
}
.containerHeadline > h3, .containerHeadline > h3 > a {
text-shadow: 0 1px 0 rgba(30, 30, 30, 0.8);
}
.likeList > li:first-child:hover {
background-color: #24272a;
}
dl:not(.plain) > dt {
color: #a3d1ff;
}
fieldset > legend {
color: #F0F0F0;
text-shadow: 0 1px 0 rgba(24, 24, 24, 0.8);
}
.dialogContent {
background-color: #181818;
color: #F2F2F2;
}
.dialogContent .formSubmit {
background-color: #141414;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
border-top: 1px solid #000;
}
input[type="text"], input[type="search"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="url"], input[type="password"], textarea, select[multiple] {
background-color: #1b1b1b;
border-color: #3c3c3c;
color: #F0F0F0;
}
.commentList > li:hover:nth-child(2n):not(.commentAdd) {
background-color: #212121;
}
.commentList > li:nth-child(2n) .commentResponseList .commentResponse:nth-child(2n+1) {
background-color: #272727;
}
.commentList > li:nth-child(2n+1) .commentResponseList .commentResponse:nth-child(2n+1) {
background-color: #292929;
}
.commentResponseList > li:hover {
background-color: #2f2f2f !important;
}
.commentList > li:hover:not(.commentAdd) {
background-color: #232323;
}
input[type="text"]:hover, input[type="search"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="url"]:hover, input[type="password"]:hover, textarea:hover, select[multiple]:hover {
background-color: #1a1a1a;
border-color: #ffaa22;
}
.commentList textarea {
background-color: #232323;
border-color: #242424;
}
.interactiveDropdown > .interactiveDropdownItemsContainer > .interactiveDropdownItems > li:not(.loading):not(.noItems) {
text-shadow: 0 1px 0 rgba(35, 35, 35, 0.8);
}
.sidebar fieldset > nav ul > li:hover:not(.active) > a {
color: #fff;
}
.sidebar fieldset > nav ul > li > a {
color: #d5d5d5;
text-shadow: 0 1px 0 rgba(23, 23, 23, 0.8);
}
.sidebar fieldset > nav ul > li.active {
box-shadow: 0 0 2px 0 rgba(17, 17, 17, 0.1);
}
.sidebar fieldset > nav ul > li.active {
background-color: #3c3c3c;
}
.message.messageSidebarOrientationLeft .messageHeader::after {
border-right-color: #3c3c3c;
}
.messageList .messageGroupStarter > .message::after {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
color: #ffbd00;
}
.message.messageSidebarOrientationLeft .messageHeader::after {
border-right-color: #3b3b3b;
}
.quoteBoxAuthor > .quoteAuthorAvatar::after {
border-color: transparent #575757 transparent transparent;
}
.breadcrumbs > ul > li > .pointer > span {
border-color: transparent transparent transparent rgb(59, 59, 59);
}
.button:hover, input[type="reset"]:hover:not([disabled]), input[type="submit"]:hover:not([disabled]), input[type="button"]:hover:not([disabled]), button:hover:not([disabled]), .button.buttonPrimary:hover, input[type="submit"]:hover:not([disabled]), input.buttonPrimary[type="button"]:hover:not([disabled]), button.buttonPrimary:hover:not([disabled]) {
color: #D8D8D8;
}
.button.buttonPrimary:hover, input[type="submit"]:hover:not([disabled]), input.buttonPrimary[type="button"]:hover:not([disabled]), button.buttonPrimary:hover:not([disabled]) {
background-color: #465e7d;
border-color: rgba(0,0,0,0);
color: #242424;
text-shadow: 0 1px 0 rgba(36, 36, 36, 0.8);
}
.inlineCode {
background-color: #292929;
border: 1px solid #e1e1e2;
}
.tabMenuContainer > .menu {
border-bottom: 1px solid #2d2d2d;
background-color: #929292;
background-image: linear-gradient(#333,#3c3c3c);
}
.tabMenu > ul > li.ui-state-active > a {
background-color: #353535;
border-color: #303030 #2c2c2c #2f2f2f;
border-style: solid;
border-width: 1px;
color: #fff;
}
.tabMenu > ul > li.ui-state-active > a::before {
border: 0px solid rgba(255, 255, 255, 0);
border-bottom-right-radius: 0px;
border-width: 0 0px 0px 0;
bottom: 0px;
clip: rect(0,0px,0px,0);
content: " ";
height: 0px;
left: -0px;
position: absolute;
width: 0px;
box-shadow: 0px 0px 0 0 rgba(255,255,255,0.15);
}
.tabMenu > ul > li.ui-state-active > a::after {
border: 0px solid rgba(225, 225, 226, 0);
border-bottom-left-radius: 0px;
border-width: 0 0 1px 0px;
bottom: 0px;
clip: rect(0,0px,0px,0);
content: " ";
height: 0px;
position: absolute;
right: 0px;
width: 5px;
box-shadow: 0px 0px 0 0 rgba(252, 253, 254, 0);
}
.tabMenu > ul {
background-color: #3e3e3e;
border-color: #2d2d2d;
text-shadow: 0 1px 0 rgba(44, 44, 44, 0.8);
}
.pageNavigation ul li > a {
color: #E3E3E3;
}
.button.buttonPrimary .icon, input[type="submit"]:not([disabled]) .icon, input.buttonPrimary[type="button"]:not([disabled]) .icon, button.buttonPrimary:not([disabled]) .icon {
color: #CECECE;
}
.button.buttonPrimary, input[type="submit"]:not([disabled]), input.buttonPrimary[type="button"]:not([disabled]), button.buttonPrimary:not([disabled]) {
background-color: #3f3f3f;
border-color: rgba(24, 24, 24, 0);
color: #E4E4E4;
text-decoration: none;
text-shadow: 0 1px 0 rgba(30, 30, 30, 0.8);
}
.button, input[type="reset"]:not([disabled]), input[type="submit"]:not([disabled]), input[type="button"]:not([disabled]), button:not([disabled]) {
background-color: #3f3f3f;
border-color: rgba(24, 24, 24, 0);
color: #E4E4E4;
text-decoration: none;
text-shadow: 0 1px 0 rgba(30, 30, 30, 0.8);
}
.messageFooterNote {
border-left: 2px solid #363636;
color: #C0C0C0;
}
.breadcrumbs > ul > li:hover > a {
background-color: rgb(33, 46, 59);
}
.quoteBox.container {
background-color: #565656;
}
.message .messageContent {
background-color: #383838;
}
.codeBox.minimized > .codeBoxExpand {
background-color: #212121;
border-top: 1px solid #2a2a2a;
box-shadow: 0 -10px 25px 5px #141414;
}
.messageBody {
color: #E4E4E4;
line-height: 1.5;
}
.codeBox > div {
padding: 14px 21px 14px 14px;
box-shadow: inset 4em 0 0 #323232 , inset 4.1em 0 0 #272727;
}
.messageHeader + .messageBody > div:first-child:not(.redactor-box), .messageBody > div:not(.messageFooter):not(.messageTabMenu):not(.redactor-box):not(:first-child) {
border-top: 1px dotted #5c5c5c;
padding: 14px 0;
}
li:nth-child(2n+1) .message .messageContent {
background-color: #3b3b3b;
}
.message.messageSidebarOrientationLeft .messageContent {
border-left: 1px solid #333;
margin: 0 0 0 211px;
}
.message .messageContent .messageHeader .messageHeadline > h1 {
color: #F3F3F3;
text-shadow: 0 1px 0 rgba(32, 32, 32, 0.8);
}
.userTitleBadge {
box-shadow: 0 1px 0 rgb(92, 92, 92), inset 0 1px 0 rgba(0, 0, 0, .2);
}
.message.dividers .userCredits {
border-top: 1px solid #232323 !important;
box-shadow: inset 0 1px 0 0 #232323;
}
.message {
background-color: #2c2c2c;
border: 1px solid #000;
position: relative;
}
.breadcrumbs > ul > li > a {
color: #FFF;
white-space: nowrap;
word-wrap: normal;
text-shadow: none;
}
.breadcrumbs {
background-color: #303030;
border: 1px solid #262626;
border-radius: 6px;
}
.messageList .messageGroupStarter > .message.messageSidebarOrientationLeft::before {
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 40%);
background-image: linear-gradient(135deg, rgba(63, 63, 63, 0.9) 0%, rgba(152, 152, 152, 0) 40%);
}
.message {
background-color: #272727;
}
.message {
border: 1px solid #000;
position: relative;
}
a:hover {
color: #aeaeae;
text-decoration: underline;
}
.navigation > ul.navigationItems > li > a:hover, .navigation > ul.navigationMenuItems > li > a:hover {
color: #a9bdff;
text-decoration: none;
}
.boxHeadline > h1, .boxSubHeadline > h2 {
color: #ECECEC;
font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: bold;
text-shadow: 0 1px 0 rgba(86, 86, 86, 0.8);
}
dl.statsDataList > dd {
color: #929292;
}
.containerList > li:nth-child(2n) {
background-color: #2f2f2f;
}
.interactiveDropdown > .interactiveDropdownItemsContainer > .interactiveDropdownItems > li:hover:not(.loading):not(.noItems) {
background-color: #2F2F2F;
}
.interactiveDropdown > .interactiveDropdownItemsContainer > .interactiveDropdownItems > li {
background-color: #363636;
}
.interactiveDropdown > .interactiveDropdownItemsContainer > .interactiveDropdownItems > li.interactiveDropdownItemOutstanding:not(.loading):not(.noItems) {
background-color: #363636;
background-image: none;
}
.interactiveDropdown > .interactiveDropdownItemsContainer > .interactiveDropdownItems > li:not(.loading):not(.noItems):not(:last-child) {
border-bottom: 1px solid #474747;
}
.interactiveDropdown {
background-color: #363636;
border: 1px solid #000;
color: #E1F3FB;
}
.sidebar .sidebarBoxHeadline > h3 {
color: #91b0cf;
}
.sidebar fieldset > legend > a {
color: #FFF;
text-decoration: none;
}
#main > div > div > .sidebar > span > .collapsibleButton {
border-width: 1px 0 1px 1px;
border-color: #1D1D1D;
box-shadow: 0 0 2px 0 rgba(27, 27, 27, 0.1);
}
#main > div > div > .sidebar > span > .collapsibleButton {
background-color: #262626;
border-radius: 6px 0 0 6px;
}
.footer .footerContent a {
text-shadow: none;
}
.footerContent a, .logo a {
color: #8b9db0;
}
.footerContent {
text-shadow: none;
}
.footerContent, .logo {
color: #DEDBDB;
}
.navigation > ul.navigationItems > li > p {
color: #e4e4e4;
}
.navigation > ul.navigationItems .icon, .navigation > ul.navigationMenuItems .icon, .navigation > ul.navigationIcons .icon {
color: #c3c3c3;
}
.navigationFooter {
background-color: #232323;
border-top: 1px solid #2d2d2d;
}
.boxHeadline > h1 a, .boxSubHeadline > h2 a {
color: #FBFBFB;
}
.icon, .fa {
color: #D4D4D4;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
.containerList > li:hover {
background-color: #262626;
}
.container {
background-color: #333;
border: 1px solid #000;
}
.container {
background-color: #333;
border: 1px solid #000;
}
.table > tbody > tr:hover > td, .cke_wysiwyg_div table > tbody > tr:hover > td {
background-color: #212121;
}
.wbbBoardList .wbbBoard:hover {
background-color: #333a3e;
}
.containerHeadline > h3 > a {
text-shadow: none;
}
.wbbBoardList .wbbLastPost > div {
background-color: #47474700;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.02);
}
.wbbBoardList .icon {
color: #d9dce0;
}
.wbbBoardList .wbbBoardNode2 {
background-color: #31363c;
}
.wbbBoardList .wbbBoardNode1 {
background-color: #383d42;
}
.mainMenu > ul {
background-color: #171717;
}
.mainMenu > ul > li > a {
color: #c9c9c9;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
.sidebar fieldset > legend {
color: #FFF;
text-shadow: none;
}
#main {
border-right: 1px solid black;
background-color: rgb(31, 31, 31);
box-sizing: border-box;
-moz-box-sizing: border-box;
z-index: 110
}
body {
background-color: #1b1b1b;
color: #E7E7E7;
font-family: "Trebuchet MS", Arial, sans-serif;
line-height: 1.28;
word-wrap: break-word;
}
#main > div > div > .content {
background-color: #1d1d1d;
min-height: 100px;
padding: 7px 38px 21px;
z-index: 130;
}
.table td, .cke_wysiwyg_div table td {
background-color: #2F2F2F;
}
.table > tbody > tr:nth-child(2n) > td, .cke_wysiwyg_div table > tbody > tr:nth-child(2n) > td {
background-color: #3f3f3f;
}
a {
color: #fff;
cursor: pointer;
text-decoration: none;
}
.tabularBox {
border: 1px solid #1e1e1e;
}
.navigationHeader {
overflow: hidden;
background-color: #171717;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
.navigation > ul.navigationItems > li > a, .navigation > ul.navigationMenuItems > li > a {
color: #cecece;
}
#main > div > div > .sidebar {
background-color: #1d1d1d;
}
.sidebar {
border: 1px solid #000;
}
body {
background-image: url("http://srv01.idkme.pw/images/background_dark.png") !important;
}
.icon, .fa {
color: #FFF;
text-shadow: 0 1px 0 rgba(21, 21, 21, 0.8);
}
.redactor-toolbar {
background: repeating-linear-gradient(0deg,#000 0px,#000 3%,#2d2d2d 3%,#121212 100%);
}
.redactor-editor .codeBox .redactorEditCodeBox {
background-color: rgba(29, 29, 29, 0.8);
}
.box24 > *:not(:first-child) {
margin-left: 28px;
background-color: rgba(29, 29, 29, 0);
}
.wbbBoardList .wbbLastPost > div {
background-color: rgba(56, 61, 66, 0);
}
.message .messageSidebar header .username {
color: #212e3b;
font-size: 1.2rem;
font-weight: bold;
padding: 0 3px 1px;
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
#main.sidebarOrientationLeft .sidebar {
border-right: 1px solid #000000;
}
Alles anzeigen
Schritt 5
Abspeichern und Breadfish öffnen.
WICHTIG: Im Breadfish den
Schritt 6
Dark Design genießen
WICHTIG: Den Style "Breadfish.de" wählen
Screenshots:
Bekannte Unstimmigkeiten:
- Editor Icons noch zu dunkel
- "Dreiecke" haben noch einen falschen Border
(Falls ihr den Code für die Sachen kennt könnt ihr mir gerne schreiben)