- Offizieller Beitrag
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"
@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"
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("autoit.de") {
.containerHead, .info { background-image: none !important; }
html, body, #footerContainer, .userPanelInner { background: #517EA8 !important; }
.border .boardlistInner { border-top: 1px solid #FFFFFF !important; }
.containerHead { background-image: none !important; }
tr.container-1:hover,tr.container-2:hover {
background-color: #F2F2E4 !important;
background-image: none !important;
}
#box8, #box18, #box19 { display: none; }
}
@-moz-document domain("translation.autoit.de") {
body { background: #F8FAFB !important; }
}
Alles anzeigen
Für die Nachteulen hier eine weitere Version von futurex
Stylish-Skript "futurex_dark"
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("autoit.de") {
.containerHead, .info { background-image: none !important; }
body, #footerContainer, .userPanelInner { background: #1E2834 !important; }
#userNote, .userPanelInner a, .footerMenu a, .copyright a, .footerOptionsInner li,
.breadCrumbs a, .breadCrumbs li, .portalFooterLink a { color: #F8FAFB !important; }
#userNote a { color: #DC905D !important; }
.border .boardlistInner { border-top: 1px solid #FFFFFF !important; }
.containerHead { background-image: none !important; }
tr.container-1:hover,tr.container-2:hover {
background-color: #F2F2E4 !important;
background-image: none !important;
}
.threadStarterPost .messageLeft {
border-bottom: 3px solid #3D39A7 !important;
border-color: #3D39A7 !important;
border-right: 3px solid #3D39A7 !important;
border-top: 3px solid #3D39A7 !important;
}
#box8, #box18, #box19 { display: none; }
}
@-moz-document domain("translation.autoit.de") {
body { background: #F8FAFB !important; }
}
Alles anzeigen
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"
@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/