EasyWeb CSS Editor Version 2.0.1 Deutsch 19.05.2014 In diesem HOWTO wird beschrieben wie Sie mit Hilfe des EasyWeb CSS Editor die Kunden-Anmeldeseite der IAC-BOX bearbeiten. EasyWeb CSS Editor TITEL
Inhaltsverzeichnis Inhaltsverzeichnis... 1 1. Allgemein... 2 2. EasyWeb CSS Editor... 3 2.1. Beispiel 1... 5 2.2. Beispiel 2... 7 EasyWeb CSS Editor s 1 8
1. Allgemein Der EasyWeb CSS Editor ermöglicht es Ihnen, Ihre Kundenanmeldeseite selbst zu verändern und nach Ihren Wünschen anzupassen. Dabei lassen sich alle vorhandenen Elemente in Sachen Farbe, Positionierung, Schriftgröße etc. verändern. Neue Elemente können dabei nicht hinzugefügt werden. EasyWeb CSS Editor s 2 8
2. EasyWeb CSS Editor Der EasyWeb CSS Editor befindet sich im Menü Kunden Anmeldung/Design Themes dort können neue Themes erstellt und anschließend mit dem Editor bearbeitet werden. Sobald ein Theme zur Bearbeitung geöffnet wurde, können die unterschiedlichen Elemente der Anmeldeseite ausgewählt werden. Nachdem Sie ein Element ausgewählt haben, öffnet sich ein Fenster in welchem Sie die CSS Attribute des Elements bearbeiten und neue hinzufügen können. Dabei können neue Attribute wie zum Beispiel Hintergrundfarbe, Schriftgröße, Position etc. hinzugefügt oder bestehende Attribute geändert werden. Zusätzlich können Sie alle Elemente, die dem angeklickten Element gleich sind, auf einmal ändern. EasyWeb CSS Editor s 3 8
Wie Sie an dem Bild oben sehen, enthält der EasyWeb CSS Editor zwei Felder an denen Attribute geändert werden können. Einmal das angeklickte Feld, die Willkommen-Box (hier beschrieben als Left-Box1 ) und einmal alle anderen gleichen Boxen (hier beschrieben als All Boxes ). Wollen Sie also bestimmte Attribute für alle gleichen Elemente ändern, muss das nicht für jedes dieser Elemente einzeln gemacht werden, sondern kann global für alle Elemente des gleichen Typs eingestellt werden. Dabei werden die Einstellungen einzelner Felder, den globalen Einstellungen für alle Felder, bevorzugt. Die eingestellten Attribute eines Feldes können auch untereinander verschieden priorisiert werden. Klicken Sie dazu links neben dem Attribut- Namen in das leere Feld und ziehen Sie dieses nach oben oder unten. Höchste Priorität hat das erste Attribut in der Liste, die niedrigste Priorität hat das letzte. Hier sehen Sie drei eingestellte Attribute für die Willkommen-Box. Klicken Sie links neben dem Namen des Attributs in das leere Feld und ziehen Sie das Attribut an eine andere Stelle nach oben oder unten. Wie Sie hier sehen, haben wir die Priorität des Attributs padding-right geändert. Dieses Attribut steht nun an letzter Stelle und hat somit die niedrigste Priorität. EasyWeb CSS Editor s 4 8
2.1. Beispiel 1 In diesem Beispiel wird die Überschrift der Willkommen-Box geändert. Klicken Sie also auf die Überschrift der Box um den EasyWeb CSS Editor dazu zu öffnen. Wie Sie auf der Abbildung unten sehen, enthält der EasyWeb CSS Editor wieder ein globales Feld für alle Box Überschriften und eines für die von uns ausgewählte Überschrift. Da nur die Überschrift der Willkommen-Box geändert werden soll, werden auch nur dort neue Attribute hinzugefügt bzw. bestehende Attribute geändert. In diesem Beispiel werden die Hintergrundfarbe der Überschrift, die Schriftfarbe und die Schriftgröße geändert. Das Attribut für die Hintergrundfarbe ist bereits vorhanden und muss somit nicht hinzugefügt werden. EasyWeb CSS Editor s 5 8
Um die Farbe zu ändern können Sie entweder den Farbcode der gewünschten Farbe eingeben oder die Farbe beim Farbkreis links neben dem Delete Button auswählen. Um die Schriftfarbe zu ändern, muss erst das entsprechende Attribut ( color ) hinzugefügt werden. Ist dieses Attribut hinzugefügt, kann auch hier wieder die Farbe durch Eingabe des Farbcodes oder auswählen der Farbe mit Hilfe des Farbkreises, eingestellt werden. Um die Schriftgröße zu ändern, muss auch dafür wieder das entsprechende Attribut ( font-size ) hinzugefügt werden. Die gewünschte Schriftgröße wird dann in Pixel angegeben (Bsp.: 20px). Wie Sie hier sehen, wurde in diesem Beispiel als Hintergrundfarbe Gelb und als Schriftfarbe Schwarz gewählt. Die Schriftgröße wurde dabei auf 20px eingestellt. Diese Einstellungen führen zu folgendem Ergebnis. EasyWeb CSS Editor s 6 8
2.2. Beispiel 2 In diesem Beispiel wird ein eigener Rahmen für die Boxen definiert. Klicken Sie dazu auf die gesamte Box um den Editor dazu zu öffnen. Da ein eigener Rahmen für alle Boxen definiert werden soll, werden wieder nur Attribute im Feld All Boxes geändert bzw. hinzugefügt. In diesem Beispiel wird ein durchgehender, schwarzer Rahmen mit einer Breite von 3px und einem Abstand von 2px definiert. Fügen Sie die dafür benötigten Attribute hinzu ( border-color Rahmenfarbe, border-width Rahembreite, border-style Rahmenart, padding Rahmenabstand). Geben Sie die gewünschten Werte für die Attribute ein und speichern Sie diese dann. EasyWeb CSS Editor s 7 8
Die Einstellungen für dieses Beispiel sehen dann wie oben gezeigt aus. Diese Einstellungen führen zu folgendem Ergebnis. Jetzt wurde ein schwarzer, durchgehender Rahmen mit einer Breite von 3px und einem Abstand von 2px für alle Boxen eingestellt. EasyWeb CSS Editor s 8 8