Mein Style-Vorschlag für Prosilver

[dieweltist]

Hiermit stelle ich allen die Anleitung zu meinem persönlichen Forumstyle für Prosilver zur Verfügung; denn vielleicht bin ich nicht der einzige, dem er gefällt. Und weil ich dabei genau erkläre, was jeweils wo verändert werden muss, kann jeder dadurch nebenbei erfahren, wo jeweils was verändert werden muss, um dort auch nach den eigenen Vorstellungen was zu verändern.

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;

Als erstes habe ich die Image-Grafik entfernt, weil sie mir wegen ihres Farbverlaufs von oben (dunkler) nach unten (heller) nicht sehr gefiel. Ist diese nicht mehr vorhanden, wird die hier angegebene Farbe #12A3EB angezeigt. Genau dieser blaue Farbton ist quasi das farbliche Herz des (ursprünglichen) Farbschemas von Prosilver. Exakt von diesem Farbton bin ich ausgegangen, um weitere zu diesem Farbton passende Farben zu kreieren.

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

Zwei weitere Image-Grafiken habe ich auch noch entfernt, weil ich sonst den Farbton an diesen beiden Stellen nicht ändern konnte; und dabei auch gleich die Farbwerte entsprechend wie angegeben verändert: (unter content.css):

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;

Linienfarbton im Forenverzeichnis und Threadübersicht dazwischen, unten + oben:

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;

Linienbreite im Forenverzeichnis und Threadübersicht dazwischen, unten + oben:

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;

Kopf von Threadliste (Image-Grafik entfernt und Farbton verändert):

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;

Beitragshintergrund und Rahmen um Beiträge hinzugefügt unter:

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; }

Den Hintergrund des Boards habe ich weiß gelassen. Wenn man diese Farbe ändern will und und/oder vielleicht ein Hintergrundbild machen will, siehe hier: Klick! Wer das Registrierungsformular bzw. die Benutzungsbestimmungen verändern möchte, bzw. bspw. die Schriftgröße, siehe diesen Beitrag von mir: Klick!

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;
}

Ich erinnere mich auch an das alte IPB, wo sich die blaue Schrift nur etwas in Richtung dunkel verändert, wenn man auf die Schrift zeigt. Dass aber sich die Schrift beim phpBB3 von knallig blau zu knallrot verfärbt, wenn man darauf zeigt, wirkt irgendwie vielleicht etwas unprofessionell.


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;

Die erste Farbe ist die Hintergrundfarbe, die man entsprechend dem Beitragshintergrund anpassen muss. Und die andere Farbe ist die Schriftfarbe der gefundenen Wörter, die ich auf schwarz stellte.

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; }

Unglücklicherweise wird dadurch (a:link) aber auch der Abmelden-Link auch schwarz, was vielleicht nicht so ganz gut aussieht. Würde man aber anstatt schwarz das blau nehmen würde, was vorher bei a:link war, hat das wiederum den Nachteil, dass bei den Suchergebnissen im Beitragstext ä und ß schwarz bleiben. Ich habe mich deswegen für den Kompromiss entschieden, schwarz durch ein dunkelblau-grünlich zu ersetzen. Bei dieser Gelegenheit kann man den anderen Links (a:visited) oben auch diesen dunkleren Farbton geben.

=>

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; }

[4seven]

Mal ganz ehrlich: Ich finde deine gesamten Anleitungen und Posts echt affenscharf

so grade raus und ausführlich