Drachenbeere
New Member
Hallöchen, allerseits. 
Hier noch mehr über VHCS Webmail Standardmodus, modern_blue, eigenbau.
Login Seite wurde schon in anderem Beitrag beschrieben:
/var/www/vhcs2/gui/tools/webmail/themes/modern_blue/login.htm
Zusätzlich gibt es noch die Seite für Login Fehler, die man der Loginseite anpassen sollte:
/var/www/vhcs2/gui/tools/webmail/themes/modern_blue/bad-login.htm
Wie bei der Loginseite, würde man hier die Zeile:
bgcolor="#334163"
... ändern, um diese mit der Farbe der Loginseite anzupassen.
!!! WICHTIG !!!
Beim ändern eines gesamten Farbschemas sollte man sich beim bearbeiten der Dateien nebenbei eine eigene Textdatei erstellen um die Pfade aufzuschreiben, sowohl als auch die Originalfarbe, und die Farbe welche die Originalfarbe ersetzt. Auch ist es nützlich Kopien der geänderten Dateien, und was Grafiken betrifft, der gesamten Ordnern mit Grafiken zu erstellen, um immer ein Original parat zu haben.
Folgendes, inklusive der meisten Farben, lässt sich in dieser Datei ändern:
/var/www/vhcs2/gui/tools/webmail/themes/modern_blue/css/vhcs.css
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
(Das ist die Entfernung bzw. der Abstand von allen 4 Bildschirmrändern) Bei der obigen Standardeinstellung verläuft das Webmail von Bildschirmrand zu Bildschirmrand. Für diejenigen mit großen Displays die ihren Browser, vor allem wegen den Populären Browser Tabs - Registerkarten - in Vollbildschirm Modus benutzen, könnten solche margin 0px Einstellungen durchaus ein wenig störend wirken.
++++++++++
a.link {color:#640002;text-decoration:underline;font-weight: normal;}
a.link:link {color:#640002;text-decoration:underline;font-weight: normal;}
a.link:visited {color:#640002; text-decoration:underline; font-weight:normal}
a.link:hover {color:#000000; text-decoration: none;}
a.link:active {color:#000000;text-decoration:none;}
Im Webmail sind einige Links vorhanden, zu gelesenen/gespeicherten Emails, Weblinks innerhalb von Email Nachrichten, usw. Obiges enthällt die Farben für solche Links ehe sie angeclickt werden, und nachdem solche angeclickt wurden. Die Standareinstellung hierfür ist Schwarz, aber wenn das Farbschema später dunkle Hintergründe haben sollte, dann müsste das logischerweise geändert werden.
++++++++++
Nun kommen text farben für das hauptmenü der Webmail, also die Funktionen welche in der linken Spalte aufgeführt werden. Die ersten beiden sind eigentlich die wichtigsten. In diesem Beispiel ist die angezeigte Farbe relativ dunkel, aber wenn man mit der Maus über das Menü in der linken Spalte fährt sehen die Wahloptionen sogar noch dunkler aus, bzw. "000000" ist eben die Farbe Schwarz.
a.menu {
MARGIN-TOP: 6px;
DISPLAY: block;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #5d4949;
height: 26px;
padding: 1px;
white-space: nowrap;
font-weight: bold;
}
a.menu:link {
color: #5d4949;
TEXT-DECORATION: none;
}
a.menu:visited {
color: #5d4949;
TEXT-DECORATION: none;
}
a.menu:hover {
color: #000000;
TEXT-DECORATION: none;
}
a.menu:active {
color: #000000;
TEXT-DECORATION: none;
++++++++++
Die Zeile mit: /* menu active begin */
(und den Optionen darunter)
Habe Ich bewusst ignoriert, da sich beim manipulieren dieser Farbern kaum etwas geändert hat. Also liess Ich das alles auf "000000" Schwarz beruhen.
++++++++++
Im Bereich von /* submenu begin */ habe Ich ebenfalls nichts feststellen können wobei sich beim ändern der Farben für den Benutzer großartig was geändert hätte.
++++++++++
Folgend sind ZWEI verschiedene Bereiche. Das sind die Farben für den HINTERGRUND der Textfelder, also dort wo viele solcher Felder zu sehen sind ... Mail Verfassen ... Einstellungen ... Ordner ... Ich fand das am besten wenn diese Hintergrundfarben durchgehend überein stimmten, und deswegen habe Ich das in beide der folgenden Bereiche geändert:
.bottom {
color: #FFF6E9;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}
Sowohl als auch hier ....
td.content3 {
font-size: 12px;
color: #333333;
white-space: nowrap;
background: #FFF6E9;
white-space: nowrap;
BORDER-TOP: #D7D7D7 1px solid;
BORDER-LEFT: #D7D7D7 1px solid;
BORDER-RIGHT: #D7D7D7 1px solid;
BORDER-BOTTOM: #D7D7D7 1px solid;
height: 22px;
padding: 2px;
}
Bei der Zeile mit (dunkel) color: #333333 handelt es sich um die Textfarbe innerhalb solcher (hellen) Feldern mit dem #FFF6E9 Hintergrund.
Bei den 4 Zeilen mit BORDER-TOP #D7D7D7 usw. handelt es sich jeweils um EINE der Vier Ränder solcher Felder. Man könnte also Clownmässig Vier verschiedene Farben einfügen, oder Vier mal die selbe Farbe, damit diese Ränder insgesamt die selbe Farbe haben. Übrigens lässt sich die Randstärke solcher Felder ebenfalls verbreitern .... 1px solid .... ist also normal, dünn.
++++++++++
Hier folgt nun die Hintergrundfarbe für den Teil des Fensters der links neben den obigen Feldern erscheint. Im Webmail Bereich von Mail Verfassen wäre dies beispielsweise die Hintergrundfarbe wo auch An, CC, Bcc, Nachricht, Priorität, usw. zu sehen ist. Die Hintergrundfarbe ist immer dort wo - background - steht. Die "BORDERS" also Randfarben sind hier mit #EFF0F7 zu erkennen, und das wäre natürlich der Rand um die Felder mit dem hier erwähnten Hintergrund.
td.content2 {
font-size: 12px;
color: #333333;
white-space: nowrap;
background: #FFE4C1;
white-space: nowrap;
BORDER-TOP: #EFF0F7 1px solid;
BORDER-LEFT: #EFF0F7 1px solid;
BORDER-RIGHT: #EFF0F7 1px solid;
BORDER-BOTTOM: #EFF0F7 1px solid;
height: 22px;
padding: 2px;
}
++++++++++
Hier befindet sich die Hintergrundfarbe für die Headers, bzw. den Beschreibungszeilen von Webmail Funktionen: Ordner, Suchfunktion, Adressen, usw. Im Bereich für ORDNER wäre der Hintergrund von Wörtern wie - Ordner, Nachrichten, Grösse, usw. genau die eingetragene Farbe. Normallerweise wären solche Bereiche mit Text ein wenig übersichtlicher und deswegen nahmen wir eine Farbe die etwas dunkler als das Umfeld der anderen Felder ist (siehe weiter oben), und machten auch die Umrandung dieser Felder wesentlich dunkler, um diese sichtlich mehr hervor zu heben.
td.content {
font-size: 12px;
color: #000000;
white-space: nowrap;
background: #FFD8A5;
white-space: nowrap;
BORDER-TOP: #A05200 1px solid;
BORDER-LEFT: #A05200 1px solid;
BORDER-RIGHT: #A05200 1px solid;
BORDER-BOTTOM: #A05200 1px solid;
height: 30px;
padding: 2px;
}
++++++++++
Und hier befindet sich die Hintergrundfarbe für die Felder die man selber in Webmail ausfüllen muss. Also die Felder wo man neue Kontakte anlegt, zusätzliche Ordner erstellt, oder auch eine Suche eintippt. Diese Felder waren uns ebenso wichtig wie die obigen, und deswegen gaben wir hier der Umrandung ebenfalls die selbe dunklere Farbe. Dasselbe wiederholten wir weiter unten in der CSS für .textinput2 damit alle Text Input Felder überall die selbe Farbe bekamen.
.textinput
{
background-color: FFFACD;
border-style: solid;
border-width: 1;
border-color: #A05200;
font-family: Verdana;
font-size: 8pt;
height: 21px;
margin: 2px;
}
++++++++++
Vorsicht mit folgenden BUTTON Optionen denn dieser Button wird aus einer Grafik erstellt die eine Gesamtbreite von nur 2px. hat. Es gibt nur diese eine Button Option, also wird dieser Buttom automatisch überall vergrössert oder verkleinert, dementsprechend wie viel Text dort hinein muss. Wer eine eigene Buttongrafik erstellen will, muss also unbedingt daran denken das die Grösse sich verändert, was natürlich das Aussehen beeinflussen kann. Die Höhe des Buttons wird durch "HEIGHT" angegeben. Spielt einfach mit den tags für font-size, color, und border ein wenig. Ihr werdet merken was passiert wenn die Loginseite das nächste mal betrachtet wird.
.button
{
font-family: Geneva, Arial, Helvetica, sans-serif;
height: 22px;
font-size: 12px;
color: #000000;
text-align: center;
background-image: url(../images/button.gif);
background-repeat: repeat-x;
border: 1px solid #981900;
}
++++++++++
Farbe #F8EB74 ist hier die Textfarbe von der Uhrzeit und dem Datum auf der Login Seite. Farbe #422222 ist die Farbe vom Text der neben den Loginfeldern zu sehen ist.
.login_bottom {
font-size: 10px;
color: #F8EB74;
}
.login_text {
color: #422222;
}
.login_time {
color: #F8EB74;
font-size: 24px;
font-weight: bold;
}
++++++++++
Am besten macht man solche Änderungen, um wirklich sicher zu sein, mit einer oder auch zwei Kopien des gesamten Webmail Inhalts auf der eigenen Festplatte. Das ganze mit FTP herunter laden, auf der lokalen Festplatte die erwünschte Datei finden, in einem anständigen Text Editor editieren bzw. die erwünschten Änderungen vornehmen .... und dann erst die Originaldatei im Serververzeichniss umbenennen (login.html = login.htm.old) ehe die neue, veränderte Datei hochgeladen wird.
Viel Spass, viel Glück, und äh .....
Alle Änderungen grundsätzlich auf eigene Gefahr machen !!!!
Hier noch mehr über VHCS Webmail Standardmodus, modern_blue, eigenbau.
Login Seite wurde schon in anderem Beitrag beschrieben:
/var/www/vhcs2/gui/tools/webmail/themes/modern_blue/login.htm
Zusätzlich gibt es noch die Seite für Login Fehler, die man der Loginseite anpassen sollte:
/var/www/vhcs2/gui/tools/webmail/themes/modern_blue/bad-login.htm
Wie bei der Loginseite, würde man hier die Zeile:
bgcolor="#334163"
... ändern, um diese mit der Farbe der Loginseite anzupassen.
!!! WICHTIG !!!
Beim ändern eines gesamten Farbschemas sollte man sich beim bearbeiten der Dateien nebenbei eine eigene Textdatei erstellen um die Pfade aufzuschreiben, sowohl als auch die Originalfarbe, und die Farbe welche die Originalfarbe ersetzt. Auch ist es nützlich Kopien der geänderten Dateien, und was Grafiken betrifft, der gesamten Ordnern mit Grafiken zu erstellen, um immer ein Original parat zu haben.
Folgendes, inklusive der meisten Farben, lässt sich in dieser Datei ändern:
/var/www/vhcs2/gui/tools/webmail/themes/modern_blue/css/vhcs.css
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
(Das ist die Entfernung bzw. der Abstand von allen 4 Bildschirmrändern) Bei der obigen Standardeinstellung verläuft das Webmail von Bildschirmrand zu Bildschirmrand. Für diejenigen mit großen Displays die ihren Browser, vor allem wegen den Populären Browser Tabs - Registerkarten - in Vollbildschirm Modus benutzen, könnten solche margin 0px Einstellungen durchaus ein wenig störend wirken.
++++++++++
a.link {color:#640002;text-decoration:underline;font-weight: normal;}
a.link:link {color:#640002;text-decoration:underline;font-weight: normal;}
a.link:visited {color:#640002; text-decoration:underline; font-weight:normal}
a.link:hover {color:#000000; text-decoration: none;}
a.link:active {color:#000000;text-decoration:none;}
Im Webmail sind einige Links vorhanden, zu gelesenen/gespeicherten Emails, Weblinks innerhalb von Email Nachrichten, usw. Obiges enthällt die Farben für solche Links ehe sie angeclickt werden, und nachdem solche angeclickt wurden. Die Standareinstellung hierfür ist Schwarz, aber wenn das Farbschema später dunkle Hintergründe haben sollte, dann müsste das logischerweise geändert werden.
++++++++++
Nun kommen text farben für das hauptmenü der Webmail, also die Funktionen welche in der linken Spalte aufgeführt werden. Die ersten beiden sind eigentlich die wichtigsten. In diesem Beispiel ist die angezeigte Farbe relativ dunkel, aber wenn man mit der Maus über das Menü in der linken Spalte fährt sehen die Wahloptionen sogar noch dunkler aus, bzw. "000000" ist eben die Farbe Schwarz.
a.menu {
MARGIN-TOP: 6px;
DISPLAY: block;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #5d4949;
height: 26px;
padding: 1px;
white-space: nowrap;
font-weight: bold;
}
a.menu:link {
color: #5d4949;
TEXT-DECORATION: none;
}
a.menu:visited {
color: #5d4949;
TEXT-DECORATION: none;
}
a.menu:hover {
color: #000000;
TEXT-DECORATION: none;
}
a.menu:active {
color: #000000;
TEXT-DECORATION: none;
++++++++++
Die Zeile mit: /* menu active begin */
(und den Optionen darunter)
Habe Ich bewusst ignoriert, da sich beim manipulieren dieser Farbern kaum etwas geändert hat. Also liess Ich das alles auf "000000" Schwarz beruhen.
++++++++++
Im Bereich von /* submenu begin */ habe Ich ebenfalls nichts feststellen können wobei sich beim ändern der Farben für den Benutzer großartig was geändert hätte.
++++++++++
Folgend sind ZWEI verschiedene Bereiche. Das sind die Farben für den HINTERGRUND der Textfelder, also dort wo viele solcher Felder zu sehen sind ... Mail Verfassen ... Einstellungen ... Ordner ... Ich fand das am besten wenn diese Hintergrundfarben durchgehend überein stimmten, und deswegen habe Ich das in beide der folgenden Bereiche geändert:
.bottom {
color: #FFF6E9;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}
Sowohl als auch hier ....
td.content3 {
font-size: 12px;
color: #333333;
white-space: nowrap;
background: #FFF6E9;
white-space: nowrap;
BORDER-TOP: #D7D7D7 1px solid;
BORDER-LEFT: #D7D7D7 1px solid;
BORDER-RIGHT: #D7D7D7 1px solid;
BORDER-BOTTOM: #D7D7D7 1px solid;
height: 22px;
padding: 2px;
}
Bei der Zeile mit (dunkel) color: #333333 handelt es sich um die Textfarbe innerhalb solcher (hellen) Feldern mit dem #FFF6E9 Hintergrund.
Bei den 4 Zeilen mit BORDER-TOP #D7D7D7 usw. handelt es sich jeweils um EINE der Vier Ränder solcher Felder. Man könnte also Clownmässig Vier verschiedene Farben einfügen, oder Vier mal die selbe Farbe, damit diese Ränder insgesamt die selbe Farbe haben. Übrigens lässt sich die Randstärke solcher Felder ebenfalls verbreitern .... 1px solid .... ist also normal, dünn.
++++++++++
Hier folgt nun die Hintergrundfarbe für den Teil des Fensters der links neben den obigen Feldern erscheint. Im Webmail Bereich von Mail Verfassen wäre dies beispielsweise die Hintergrundfarbe wo auch An, CC, Bcc, Nachricht, Priorität, usw. zu sehen ist. Die Hintergrundfarbe ist immer dort wo - background - steht. Die "BORDERS" also Randfarben sind hier mit #EFF0F7 zu erkennen, und das wäre natürlich der Rand um die Felder mit dem hier erwähnten Hintergrund.
td.content2 {
font-size: 12px;
color: #333333;
white-space: nowrap;
background: #FFE4C1;
white-space: nowrap;
BORDER-TOP: #EFF0F7 1px solid;
BORDER-LEFT: #EFF0F7 1px solid;
BORDER-RIGHT: #EFF0F7 1px solid;
BORDER-BOTTOM: #EFF0F7 1px solid;
height: 22px;
padding: 2px;
}
++++++++++
Hier befindet sich die Hintergrundfarbe für die Headers, bzw. den Beschreibungszeilen von Webmail Funktionen: Ordner, Suchfunktion, Adressen, usw. Im Bereich für ORDNER wäre der Hintergrund von Wörtern wie - Ordner, Nachrichten, Grösse, usw. genau die eingetragene Farbe. Normallerweise wären solche Bereiche mit Text ein wenig übersichtlicher und deswegen nahmen wir eine Farbe die etwas dunkler als das Umfeld der anderen Felder ist (siehe weiter oben), und machten auch die Umrandung dieser Felder wesentlich dunkler, um diese sichtlich mehr hervor zu heben.
td.content {
font-size: 12px;
color: #000000;
white-space: nowrap;
background: #FFD8A5;
white-space: nowrap;
BORDER-TOP: #A05200 1px solid;
BORDER-LEFT: #A05200 1px solid;
BORDER-RIGHT: #A05200 1px solid;
BORDER-BOTTOM: #A05200 1px solid;
height: 30px;
padding: 2px;
}
++++++++++
Und hier befindet sich die Hintergrundfarbe für die Felder die man selber in Webmail ausfüllen muss. Also die Felder wo man neue Kontakte anlegt, zusätzliche Ordner erstellt, oder auch eine Suche eintippt. Diese Felder waren uns ebenso wichtig wie die obigen, und deswegen gaben wir hier der Umrandung ebenfalls die selbe dunklere Farbe. Dasselbe wiederholten wir weiter unten in der CSS für .textinput2 damit alle Text Input Felder überall die selbe Farbe bekamen.
.textinput
{
background-color: FFFACD;
border-style: solid;
border-width: 1;
border-color: #A05200;
font-family: Verdana;
font-size: 8pt;
height: 21px;
margin: 2px;
}
++++++++++
Vorsicht mit folgenden BUTTON Optionen denn dieser Button wird aus einer Grafik erstellt die eine Gesamtbreite von nur 2px. hat. Es gibt nur diese eine Button Option, also wird dieser Buttom automatisch überall vergrössert oder verkleinert, dementsprechend wie viel Text dort hinein muss. Wer eine eigene Buttongrafik erstellen will, muss also unbedingt daran denken das die Grösse sich verändert, was natürlich das Aussehen beeinflussen kann. Die Höhe des Buttons wird durch "HEIGHT" angegeben. Spielt einfach mit den tags für font-size, color, und border ein wenig. Ihr werdet merken was passiert wenn die Loginseite das nächste mal betrachtet wird.
.button
{
font-family: Geneva, Arial, Helvetica, sans-serif;
height: 22px;
font-size: 12px;
color: #000000;
text-align: center;
background-image: url(../images/button.gif);
background-repeat: repeat-x;
border: 1px solid #981900;
}
++++++++++
Farbe #F8EB74 ist hier die Textfarbe von der Uhrzeit und dem Datum auf der Login Seite. Farbe #422222 ist die Farbe vom Text der neben den Loginfeldern zu sehen ist.
.login_bottom {
font-size: 10px;
color: #F8EB74;
}
.login_text {
color: #422222;
}
.login_time {
color: #F8EB74;
font-size: 24px;
font-weight: bold;
}
++++++++++
Am besten macht man solche Änderungen, um wirklich sicher zu sein, mit einer oder auch zwei Kopien des gesamten Webmail Inhalts auf der eigenen Festplatte. Das ganze mit FTP herunter laden, auf der lokalen Festplatte die erwünschte Datei finden, in einem anständigen Text Editor editieren bzw. die erwünschten Änderungen vornehmen .... und dann erst die Originaldatei im Serververzeichniss umbenennen (login.html = login.htm.old) ehe die neue, veränderte Datei hochgeladen wird.
Viel Spass, viel Glück, und äh .....
Alle Änderungen grundsätzlich auf eigene Gefahr machen !!!!