http://forumtreff.pytalhost.de/
Als Hilfsmittel habe ich den gesamten CSS-Text, bzw. den ganzen Theme-Text, so verändert, dass ich alle Farbangaben durch die Angabe für rot ersetzte. Durch systematisches Einschachteln, indem ich jeweils Teile dieses Textes durch den modifizierten Text ersetzte; und jeweils schaute, ob sich der Farbton an der gewünschten Stelle entsprechend verändert hat, konnte ich jeweils herausfinden, an welches Stelle des Textes man was verändern muss.
Im Prinzip genauso kann man auch mit Größenangaben arbeiten, indem man den ganzen Text so modifiziert, dass alle diese Angaben jeweils so verändert werden, dass diese Angaben jeweils ein deutlich größeres Maß haben. Wer einen guten Editor hat, so geht das Modifizieren so eines Textes ziemlich fix.
Wie ich die Buttons für das Erstellen eines neuen Themas (bzw. "neuen Beitrags") austauschte, siehe hier: Klick! Die Abstufungen für den internen Link "Ändere Schriftgröße" ist hier beschrieben: Klick! Um jeweils eine geeignete Farbe zu finden, empfehle ich den Color Cop. Eine ausführliche Beschreibung ist hier: Klick!
Die Farbangabe als Farbe kann man anzeigen und den Farbwert jeder beliebigen Farbe. Auch kann man mit diesem Tool eine bereits bekannte Farbe entsprechend umformen, indem man Helligkeit und Farbsättigung verändern kann, wovon ich in diesem Fall Gebrauch machte, um zu den im Forum bereits vorhandenen Farbtönen jeweils durch entsprechende Abwandlung neue jeweils möglichst passende Farben zu kreieren. Unter >Administrations-Bereich - STYLES - Themas - Prosilver - Ändern< diese Änderungen durchführen:
Code: Alles auswählen
.headerbar {
background-color: #12A3EB;
background-image: url("{T_THEME_PATH}/images/bg_header.gif");
color: #FFFFFF;
Code: Alles auswählen
.headerbar {
background-color: #26ADEE;
color: #FFFFFF;
Diesen Farbton habe ich mit dem Color Cop etwas aufgehellt, vom Helligkeitswert 119 auf 130; und ersetzt. Und somit den Farbton für die Headerbar ganz oben ein wenig heller gemacht. Also, ich finde den Header im schlichten blau ohne Farbverlauf irgendwie schöner und moderner wirkend. Genau diese neue Farbe verwendete ich dann auch für alle Rahmen, die mit ihrer 6 Pixel Breite im hellblauen Farbton ansprechend vorkommen, im Gegensatz zu diesen ewigen erbärmlichen Ein-Pixel-Linien.
Darunter ist die Navbar, um die ich einen Rahmen machte; und für die ich für die Hintergrundfarbe ein extrem helles blau wählte. Das ursprüngliche vorhin erwähnte blau hellte ich mit dem Color Cop sehr stark auf und entfernte zudem den Grau-Anteil komplett, indem ich die Farbsättigung auf maximal stellte.
Code: Alles auswählen
Colours and backgrounds for common.css
----------------------------------------
.navbar {
background-color: #cadceb;
Code: Alles auswählen
Colours and backgrounds for common.css
----------------------------------------
.navbar {
background-color: #F9FEFF;
border:6px solid #26ADEE
Code: Alles auswählen
ul.forums {
background-color: #eef5f9;
background-image: url("{T_THEME_PATH}/images/gradient.gif");
Code: Alles auswählen
ul.forums {
background-color: #F4FCFF;
Code: Alles auswählen
.forabg {
background-color: #0076b1;
background-image: url("{T_THEME_PATH}/images/bg_list.gif");
Code: Alles auswählen
.forabg {
background-color: #26ADEE;
Code: Alles auswählen
li.row {
border-top-color: #FFFFFF;
border-bottom-color: #00608F;
Code: Alles auswählen
li.row {
border-top-color: #26ADEE;
border-bottom-color: #26ADEE;
Code: Alles auswählen
li.row {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #8f8f8f;
Code: Alles auswählen
li.row {
border-top: 3px solid #FFFFFF;
border-bottom: 1px solid #8f8f8f;
Code: Alles auswählen
.forumbg {
background-color: #12A3EB;
background-image: url("{T_THEME_PATH}/images/bg_header.gif");
Code: Alles auswählen
.forumbg {
background-color: #26ADEE;
Colours and backgrounds for common.css
----------------------------------------
Code: Alles auswählen
.bg1 { background-color: #ECF3F7; } (jeder 2. 4. ... Beitrag)
Code: Alles auswählen
.bg1 { background-color: #F9FEFF; border: 6px solid #26ADEE; }
Code: Alles auswählen
.bg2 { background-color: #e1ebf2; } (jeder 1. 3. ... Beitrag)
Code: Alles auswählen
.bg2 { background-color: #F9FEFF; border: 6px solid #26ADEE; }
Als ich das Forum mit dem neuen Style mit dem FireFox aufrief, fiel mir negativ auf, dass der Hintergrund der Forenliste auffällig gelb wird, wenn ich darauf zeige, was zumindest zu meinem Style nicht richtig passt.
Also habe ich eingeschachtelt, wo man die Farbangabe verändern muss, um diesen Farbton wunschgemäß zu ändern. Diese Farbe habe ich durch eine ersetzt, die ein wenig dunkler ist, als die Hintergrundfarbe. Wenn ich aber jetzt darauf zeige, wird der extrem hellblaue Ton nur ein wenig dunkler, was mir passender erscheint.
Unter >Colours and backgrounds for content.css<:
Code: Alles auswählen
li.row:hover {
background-color: #F6F4D0;
}
=>
li.row:hover {
background-color: #EEFDFF;
}
Die Schriftfarben für die jeweiligen Benutzergruppen >Gruppen verwalten< sollten am besten nicht aufdringlich bunt sein. Deswegen verwende ich solche Farben, die nicht aufdringlich bunt sind. Man kann mit dem Color Cop Farben kreieren, die zum einen in Richtung grau gehen und/oder (dabei auch noch) besonders dunkel gehalten sind. In meinem Fall habe ich mich für den
Administrator für ein dunkles Grau entschieden: 5F5F5F.
Die Bots haben ein helleres grau: 949494.
Global-Moderatoren sind dunkelrot: 800000.
Registrierte Benutzer werden dunkelblau angezeigt: 000080.
Und Gäste erscheinen dunkelgrün: 008000.
Wenn ich nach allen Beiträgen suche (klick), sind alle Wörter rötlich eingefärbt, was das Lesen doch sehr erschwert. Das kann man so ändern. >Administrationsbereich - Styles - Themas - Prosilver - Ändern<
Code: Alles auswählen
.posthilit {
background-color: #F3BFCC;
color: #BC2A4D;
Code: Alles auswählen
.posthilit {
background-color: #F9FEFF;
color: #000000;
Dann war aber noch das Problem, dass Umlaute in Beitragstiteln verfärbt waren. Die Farbe muss hier an zwei Stellen in schwarz geändert werden. Die zweite (hover) ist die Farbe, wenn man darauf zeigt.
Code: Alles auswählen
--------------------------------------------------------------
Colours and backgrounds for links.css
-------------------------------------------------------------- */
a:link { color: #105289; }
a:visited { color: #105289; }
a:hover { color: #D31141; }
Code: Alles auswählen
--------------------------------------------------------------
Colours and backgrounds for links.css
-------------------------------------------------------------- */
a:link { color: #000000; }
a:visited { color: #105289; }
a:hover { color: #000000; }
=>
Code: Alles auswählen
.posthilit {
background-color: #F9FEFF;
color: #0b3960;
Code: Alles auswählen
a:link { color: #0b3960; }
a:visited { color: #0b3960; }
a:hover { color: #0b3960; }