Eigener Style fürs Forum mit Firefox (per AddOn Stylish) -- mein Entwurf: "Maroon" + "futurex_blue" + "futurex_darkblue"

**BugFix** · 15. Dezember 2012

Hi,
wir hatten ja die Tage schon in der SB dazu gesprochen.
Hier nun mein Stylish-Skript.
Der #headerContainer enthält das Hintergrundbild für den AutoIt-Titel. Dieses Image hätte in blau nicht zu meinem Style gepasst, desahlb habe ich es eingefärbt. Die Datei findet ihr im Anhang, abspeichern und in der Skriptzeile 4 ("#headerContainer...") euren Pfad anpassen.
Die Zeile 98 blendet einige Boxen im Portal aus, könnt ihr bedarfsweise anpassen.

Stylish-Skript "maroon"

CSS

@namespace url(http://www.w3.org/1999/xhtml);


@-moz-document domain("autoit.de") {
	#headerContainer                              { background-image: url("file:///C:/Users/BugFix/header.jpg") !important; }
	.containerHead                                { background-image: none !important; }
	html, body, #footerContainer, .userPanelInner { background: #F7F1F1 !important; } 
	.border, .mceResizeBox, .pmEditFolders, .pmUsageBar, .popupMenu, .quoteBox, .subTabMenu,
	#shoutbox25 .containerContent, #shoutboxFontsize, #shoutboxFontface, #shoutboxFontcolor, .userMemoSidebar ,
	#box1 .container-1 .containerContent, #box6 .container-1 .containerContent, #box10 p, #box11 p, h4, #box13 .container-1 .containerContent, 
	#box14 .container-1 .containerContent, #box18 .container-1 .containerContent, #box19 .container-1 .containerContent, #birthday21 p, 
	#news8 .container-2, .infoBox .container-1, .infoBox .container-2, #sortField, select[name="sortOrder"], select[name="prefix"], 
	#filterDate, #filterByStatus, select[name="boardID"], .pageNavigation a, .tabMenuContent .container-1, .tabMenuContent .container-1 fieldset,
	#fromDay, #fromMonth, #fromYear, #untilDay, #untilMonth, #untilYear, #containerType, #fileType, #shoutboxBoxStatus .container-1 , 	
	.pageMenu a, .messageLeft, .messageRight, .messageFramedLeft, .messageFramedRight, .messageTop, .messageFramedTop {
		background-color: #F7F1F1 !important;
	}
	.tabMenu .activeTabMenu a         { color: #F7F1F1 !important; }
	#footerContainer                  { border-top: 1px solid #A03535 !important; }
	.border .boardlistInner           { border-top: 1px solid #FFFFFF !important; }
	.containerHead, .containerHead a  { text-shadow: 0 -1px 0 #A03535 !important; }
	* a.externalURL                   { color: #5FCACA; }
	.userPanelInner p, .userPanelInner span, .breadCrumbs a { color: #800000 !important; }
	.containerHead, .inlineCalendarFooter td, .inlineCalendarHeader td, .tabMenu li.activeTabMenu a, .tabMenu li.activeTabMenu a:hover,
	.memberList li .memberName, .messageNumber, .optionButtons a, .smallButtons a, li.extraButton a, .largeButtons a {
		background-color: #A03535 !important;
	}
	.footerMenu a, .footerOptionsInner a, .copyright a , .info a:hover { color: #800000 !important; }
	.info { border-color: #A03535 !important; }
	.info, .info a { 
		background-image: none !important; 
		color: #800000 !important;
		background-color: #F7E7E7 !important;
	}
	#footer, #header, .attachmentFile ul li, .attachmentPreview ul li:hover, .avatarDisplay div, .avatarSelect li label, .border, 
	.footerMenu li, .footerOptions li, .inlineCalendarFooter, .inlineCalendarHeader, .inlineCalendarTable, .mainMenu, .marked, .mceResizeBox, 
	.message, .messageContentInner, .messageNumber, .pageNavigation li ul, .pmEditFolders, .pmUsageBar, .popupMenu, .quoteBox, .searchContainer, 
	.subTabMenu, .tabMenu li, .userAvatar a, .userAvatarFramed a, blockquote.wysiwygQuote, fieldset {
		border-color: #A03535 !important;
	}
	.tabMenu li a, .tabMenu li.disabled a:hover {
		background-color: #F7F1F1 !important;
		color: #A03535 !important;
	}
	.tabMenu li a:hover, .formSubmit input, .pageNavigation .active span, .containerHead .boardlistTitle .containerContent h4,
	.tabMenuContent .container-1 .containerHead h4 {
		background-color: #A03535 !important;
		color: #F7F1F1 !important;
	}          
	.subTabMenu ul .activeSubTabMenu a {
		background-color: #F7E7E7 !important;
		color: #A03535 !important;
	}
	.tableHead a, .columnMark label {
		background-color: #F7E7E7 !important;
		color: #333333 !important;
		border-color: #A03535 !important;
	}
	.tableHead .active a {
		background-color: #F7EEEE !important;
		color: #333333 !important;
		border-color: #A03535 !important;
	}  
	#box7 .emptyHead {
		background-color: #F7F1F1 !important;
		color: #800000 !important;
		border-color: #A03535 !important;
	}
	.tabMenuContent .container-1 fieldset legend         { color: #A03535 !important; }
	.formField input                                     { border-color:  #F7E7E7 !important; }
	#box8 .messageContent                                { border-left: 3px solid #A03535 !important; }
	.pageOptions span, #pmOutstandingNotifications p, li { color: #800000 !important; }
	.messageLeft                                         { border-color: #D16161 !important; }
	.threadStarterPost .messageLeft, #shoutboxMessage    { border-color: #A03535 !important; }
	.active a, .threadStarterPost .messageLeft, .threadStarterPost .messageRight, .threadStarterPost .messageFramedLeft, 
	.threadStarterPost .messageFramedRight, .threadStarterPost .messageTop, .messageFramedTop,
	tr.container-2, .container-2, .container-2 .boardTitle {
		background-color: #F7E7E7 !important;
	}
	.mainMenu .active a, .mainMenu .firstActive a, .mainMenu .lastActive a, .tabMenu ul li.activeTabMenu a {
		background-color: #A03535 !important;
		border-top: 2px solid #F7F1F1 !important;
	}
	.mainMenu a:hover {
		background-color: #A03535 !important;
		border-top: 2px solid #FFFFE1 !important;
	}
	#pmOutstandingNotifications {
		background-color: #F7E7E7 !important;
		background-image:  none !important;
		border-color: #A03535 !important;
	}
	tr.container-1, .container-1 { background-color: #F7EEEE !important; }


	tr.container-1:hover,tr.container-2:hover {
		background-color: #FFFFE1 !important;
		background-image: none !important;
	}
	#box8, #box18, #box19 { display: none;  }

}

Alles anzeigen

So sieht der Maroon-Style aus:
autoit.de/wcf/attachment/17602/

Der Standard-Style "futurex" sieht mit seinen in Header und :hover integrierten Grafikverläfen auf hochauflösenden Monitoren nicht sehr attraktiv aus. Auch das Background-grau passt irgendwie nicht zur Umgebung.
Ich habe für den Hintergrund jetzt die hellste Färbung aus dem Header-Image verwendet, die Grafikverläufe entfernt und eine andere :hover-Farbe eingesetzt.

Stylish-Skript "futurex_blue"

Für die Nachteulen hier eine weitere Version von futurex

Stylish-Skript "futurex_dark"

Edit 17.12.2012
Jetzt habe ich den Dark-Style noch etwas ausgebaut und die störenden hellen Stellen entfernt :D.
Wenn ich nichts übersehen habe, betrifft der Style auch alle Teile des Forums. Zum selber dranrumbasteln habe ich alles kommentiert.
Edit 18.12.2012
Hatte was übersehen in der allg. Unterforen-Beitragsauflistung. Nun sollte alles passen.
Edit 24.12.2012
Noch ein paar Kleinigkeiten gefixed.

Stylish-Skript "futurex_darkblue"

CSS

@namespace url(http://www.w3.org/1999/xhtml);


@-moz-document domain("autoit.de") {

    /* Grafik deaktiveren im Container-Head u. Info-Feld */
    .containerHead, .info { background-image: none !important; }

    /* Info Schrift, Anhang-Titel */
    .info, .attachmentPreview legend { color: #000080 !important; }

    /* Hintergrund global */
    body, #footerContainer, .userPanelInner { background: #1E2834 !important; } 

    /* Schrift Menüleiste-Top, Fußbereich */
    #userNote, .pageOptions a, .userPanelInner a, .footerMenu a, .copyright a, .footerOptionsInner li, 
    .breadCrumbs a, .breadCrumbs li, .portalFooterLink a { color: #F8FAFB !important; }

    /* Fußzeile in Nachrichten */
    .messageFooter .breadCrumbs li, .messageFooter .breadCrumbs a  { color: #000080 !important; }

    /* Benutzername (hinter "Angemeldet als") */
    #userNote a { color: #DC905D !important; }

    /* Board Titelleisten */
    .boardlistTitle .containerContent, .titleBarPanel .containerContent h3 { background: #164369 !important; } 
    /* in Titelleiste Rahmen entfernen */
    #tplPortal .containerContent, #tplPortalEdit .containerContent, .portalLeftColumn .containerContent, 
    .portalRightColumn .containerContent { padding: 0px !important; margin-left: 0px !important; }

    /* im Container Abgrenzungslinie zwischen Beiträgen */
    .border .boardlistInner { border-top: 1px solid #DDECF8 !important; }   

    /* SB-Box und Boxen */
    .containerContent, .container-1 .containerContent p, .pmFolders .container-3 { background: #BFDBF8 !important; }
    .pageMenu .active a { background: #DDECF8 !important; }


    /*   .pageMenu li a  */

    /* Spaltenüberschrift Container-1,  Mitglieder */
    .container-1 .containerContent .emptyHead, 
    .tabMenuContent .membersList .tableHead a,
    .tableHead .emptyHead, .tableHead th a { background: #8FB3DA !important; color: #000080 !important; }

    /* SB-Hintergrund */
    #shoutboxContent p { background: #CDE1F8 !important; }

    /* SB-Hintergrund Whisper */
    #shoutboxContent .shoutboxWhisper { background: #D8E8F8 !important; }

    /* SB-Codebox Schrift */
    #shoutboxContent .codeBox td h3 { color: #000080 !important; background: #8FB3DA !important; }

    /* SB-Input */
    #shoutboxMessage { background: #DDECF8 !important; border-color: #FFFFFF !important; }

    /* SB-Box Forum */
    #shoutboxBoxStatus .container-1, #shoutbox25 { background: #8FB3DA !important; }

    /* SB-Combos */
    #shoutboxFontsize, #shoutboxFontface, #shoutboxFontcolor { background: #DDECF8 !important; border-color: #FFFFFF !important; }

    /* Zeile 1 Liste Beiträge */
    .container-1 .containerContent .tableList .container-1,
    .container-1 .containerContent .tableList .container-1 p, 
    .tabMenuContent .container-1 .tableList .container-1,
    .pmMessages .border .tableList .container-2 { background: #CDE1F8 !important; }

    /* Zeile 2 Liste Beiträge */
    .container-1 .containerContent .tableList .container-2,
    .container-1 .containerContent .tableList .container-2 .columnTopic p,
    .container-1 .containerContent .tableList .container-2 .columnLastPost p,
    .tabMenuContent .container-1 .tableList .container-2,
    .pmMessages .border .tableList .container-1 { background: #BFDBF8 !important; }

    /* PN aktive Zeile */
    .pmMessages .border .tableList .activeContainer { background: #DDECF8 !important; }

    /* Hover Container-1 alle Zeilen */
    .titleBarPanel .container-1 .containerContent .tableList .container-1:hover,
    .titleBarPanel .container-1 .containerContent .tableList .container-2:hover { background-image: none !important; }   

    /* Forenregeln */
    .tabMenuContent .container-1 { background: #CDE1F8 !important; }

    /* Zeile 1 Bordliste */
    #boardlist .container-1, #boardlist .container-1 p, #boardlist .container-1 .containerContent,
    #topThreadsStatus .container-1, #normalThreadsStatus .container-1 { background: #CDE1F8 !important; }

    /* Zeile 2 Bordliste */
    #boardlist .container-2, #boardlist .container-2 .containerContent,
    #topThreadsStatus .container-2, #normalThreadsStatus .container-2, .infoBoxModerators { background: #BFDBF8 !important; }

    /* Info Box Fuß */
    .infoBox .container-1, .infoBox .container-1 .containerContent , .infoBox .container-1 .containerContent p
    { background: #CDE1F8 !important; }

    /* Zeile 2 Mitglieder */
    .tabMenuContent .membersList .container-2 { background: #BFDBF8 !important; }

    /* Mitgliedersuche - Inputs */
    .tabMenuContent .formElement .formField input,
    .tabMenuContent .formField .formField input { background: #DDECF8 !important; }

    /* Mitgliedersuche - Labels */
    .tabMenuContent .formElement label, #genderDiv .formGroupLabel, #genderDiv .formGroupField li, 
    .tabMenuContent .formField .formField label { color: #000080 !important; }

    /* Mitgliedersuche + Notizen - Innere Rahmen */
    .tabMenuContent .container-1 fieldset, #memoEditor fieldset { background: #BFDBF8 !important; }


    /* Mitgliedersuche - Innere Rahmen - Titel */
    .tabMenuContent .container-1 fieldset legend, #memoEditor fieldset legend { color: #000080 !important; }

    /* Main-Tab Hover */
    #mainMenu .mainMenuInner li a:hover { background: #8FB3DA !important; color: #000080 !important; }

    /* Inner-Tabs inaktiv */
    .tabMenu li a { background: #BFDBF8 !important; }

    /* Inner-Tabs Hover */
    .tabMenu li a:hover { background: #8FB3DA !important; color: #000080 !important; }

    /* Inner-Tab aktiv */
    .tabMenu .activeTabMenu a { background: #164369 !important; }

    /* Umrandung Post Threadstarter */
    .threadStarterPost .messageLeft {
        border-bottom: 3px solid #3D39A7 !important;
        border-color: #3D39A7 !important;
        border-right: 3px solid #3D39A7 !important;
        border-top: 3px solid #3D39A7 !important; }
    /* Abgrenzung left <--> Post */
    .threadStarterPost .messageContent { border-left: 1px solid #3D39A7 !important; }

    /* Post - Hintergrund u. Datumszeile */
    .content .messageInner, .messageContentInner, .messageHeader .containerContent, 
    .messageHeader .containerContent p, .layout-3 .columnContainer .container-1 { background: #CDE1F8 !important; }

    /* Post-linke Seite  Threadstarter, Select-Avatar links */
    .threadStarterPost .messageLeft, .threadStarterPost .messageRight, .threadStarterPost .messageFramedLeft, 
	.threadStarterPost .messageFramedRight, .threadStarterPost .messageTop, .messageFramedTop,
	.layout-3 .container-3 { background: #8FB3DA !important; } 
	/* .threadStarterPost .messageSidebar { border-right: 2px solid #DDECF8 !important; } */

    /* Post-linke Seite */
    .messageLeft, .messageRight, .messageFramedLeft, 
	.messageFramedRight, .messageTop, .messageFramedTop { background: #BFDBF8 !important; } 

	/* Post editieren */
	.content .container-1 { background: #CDE1F8 !important; }
    .content .container-1 fieldset { background: #BFDBF8 !important; }
    .content .container-1 fieldset legend, .messageContentInner fieldset legend { color: #000080 !important; }
    .content .container-1 .formField input, #editReason { background: #DDECF8 !important; } 

    /* Überschrift im Body */
    h2, h2 a { text-shadow: 0 2px 3px #DDECF8 !important; }

    /* Deaktivieren: Nachrichten(8), Spenden(18), Adsense(19) */ 
    #box8, #box18, #box19 { display: none; }       
}


/* Box Download (eingebettete Seite) */
@-moz-document domain("translation.autoit.de") {
    body { background: #BFDBF8 !important; } 
}

Alles anzeigen

Hier die futurex-Styles im Vergleich: Original vs. Angepasst
autoit.de/wcf/attachment/17607/autoit.de/wcf/attachment/17612/autoit.de/wcf/attachment/17647/

**funkey** · 15. Dezember 2012

Gefällt mir sehr gut, danke!!

**BugFix** · 16. Dezember 2012

Habe jetzt den Default-Style "futurex" etwas "entschärft".
s. Post #1

Cheater Dieter · 16. Dezember 2012

Warum packt man eigentlich diese tollen Styles nicht in die Einstellungen unter Darstellung -> Individueller Stil? Die dort angebotenen Stile sind nämlich teilweise vorsintflutlich und die Lise sollte dringend mal überarbeitet werden.

stayawayknight · 16. Dezember 2012

Werde dein futurex_blue verwenden, das finde ich passend - Danke dafür!
Noch eine andere Frage: Wie kommst du zu der "Tag-Leiste" unterhalb der SB? Ist das ein Greasemonkeyskript o. Ä., oder gibt es die für die "Normalsterblichen" nicht?

Gruß stay

**BugFix** · 16. Dezember 2012

Zitat von stayawayknight

oder gibt es die für die "Normalsterblichen" nicht?

Ja, das ist (aus leidvoller Erfahrung mit Abstürzen durch bb-Code Mißbrauch) nicht für alle User verfügbar.

Zitat von Cheater Dieter

Warum packt man eigentlich diese tollen Styles nicht in die Einstellungen unter Darstellung -> Individueller Stil?

Bis jetzt habe ich die Styles nur über Stylish-AddOn verwirklicht. Die CSS-Datei umschreiben um sie generell auch ohne AddOn einbinden zu können ist dann der nächste Schritt.
Das ist aber relativ aufwändig. In der CSS-Datei sind ca. 300 Farbanweisungen enthalten. Ich will ich erst mal versuchen, diese so zu gruppieren, dass man mit einem Konfigurator recht einfach eigene Farbkombinationen zusammenstellen kann. Das ist insofern schwierig, da die CSS-Datei nicht primär auf Farbgestaltung allein ausgelegt ist, sondern auch alle anderen Gestaltungsregeln enthält.

stayawayknight · 16. Dezember 2012

An dem futurex_blue hätte ich noch einen kleinen Kritikpunkt:
Die Box für die Downloads siehst etwas "seltsam" aus, mit dem blau innendrin:

Bild

Lässt sich das beheben?

Danke!

Gruß stay

**BugFix** · 16. Dezember 2012

Zitat von stayawayknight

Lässt sich das beheben?

Ja. Da es sich um einen iFrame handelt muss die Style-Änderung auf die eingebundene Seite zeigen. Deshalb einfach den Zusatz

CSS

@-moz-document domain("translation.autoit.de") {
    body { background: #F8FAFB !important; } 
}

unter das bestehende Stylish-Skript setzen. ( Habe es im Startpost editiert )

stayawayknight · 16. Dezember 2012

Super, danke!

**peethebee** · 16. Dezember 2012

Für konfigurierbare Farben kann LESS oder SASS helfen.

Techmix · 16. Dezember 2012

Schade das ich kein Firefox nutze...

**chesstiger** · 16. Dezember 2012

Stylish gibt's auch für Chrome.

lg chess

**BugFix** · 17. Dezember 2012

Neuer Style: "futurex_darkblue", s. Post #1

Gore · 19. Dezember 2012

klasse idee!

Teilen