Das Aussehen (Design/Layout) von bytepix im Kundenteil anpassen 

Auf Wunsch vieler Fotografen haben wir bereits Verison 2 im Vergleich zur Version 1 um raffinierte Design-Funktionen erweitert, mit denen jeder Fotograf ein ganz eigenes Gesicht verleihen und so z. B. an das Layout seiner eigenen Homepage angleichen kann.

bytepix bietet drei Verfahren das Erscheinungsbild in der Benutzeransicht zu verändern:

• Auswahl eines der sechs vorgefertigten Standard-Layouts.
  Sie wählen das Layout in den Basis-Einstellungen des jeweiligen Albums. 

• Erzeugen eines eigenen Layouts durch Verändern der "Parameter" eines der Standard-Layouts. Dies wird im Folgenden beschrieben.

• Vollkommen freie Gestaltung der Ansichten im Benutzerteil durch Definition eines eigenen Cascading Style Sheets (CSS). Diese Variante setzt ein tieferes Verständnis des Aufbaus von HTML-Seiten einerseits und der Anwendung von Cascading Style Sheets andererseits voraus. Was man damit so alles erreichen kann, erkennen Sie beispielhaft am Layout "eigenes CSS". Dies wird im Folgenden beschrieben. 

Bevor wir jedoch in die (Un-)Tiefen der Layoutanpassungen einsteigen, lesen Sie bitte die folgenden allgemeinen Anmerkungen.

 

Mit Version 2.9.2 von gibt es einige Neurungen bei den Layouts. Insbesondere können weitere Hintergrund-Bilder hochgeladen werden. Näheres erfahren Sie hier.

Allgmeine Anmerkungen zur Layoutanpassung 

HTML (Hypertext Markup Langauge) ist sozusagen die Programmiersprache des Web. Eigentlich war diese Sprache nie dazu gedacht, schön gestaltete Webseiten zu realisieren, wie man sie heutzutage im Internet antrifft. Viele Gestaltungsaspekte lassen sich nur mit großer Mühe über Tricks und "grafiklastige Bilder" realisieren. Hinzu kommt, dass die Sprache HTML zwar grundsätzlich von jedem Browser verstanden wird, die Browser sie aber unterschiedlich umsetzen. So fällt bei einem Browser eine Linie oder ein Abstand breiter aus als beim anderen, oder ein Objekt erscheint an einer unterschiedlichen Position im Fenster, je nachdem, ob man die Seite im Internet Explorer oder z. B. Firefox betrachtet.

Die Situation hat sich mit Einführung der Cascading Style Sheets (CSS) leider nicht wirklich verbessert. Trotzdem erlaubt CSS dank der Trennung von Inhalt und Aussehen vieles, wie z. B.  das Verändern der Anordnung einzelner Webseiten-Elemente ohne das Verändern der Webseite selbst. So können Sie etwa die Buttons des Menüs an einer anderen Stelle im Browser-Fenster erscheinen lassen oder sie sogar ganz verstecken.

Unsere Ausführungen sollen Sie darauf vorbereiten, dass Veränderungen an der Gestaltung "Ihres" nicht immer gleich zum gewünschten Resultat führen. Oftmals müssen Sie sich über einige "Versuche und Irrtümer" an die Lösung herantasten. Unsere Entwickler haben sich jedoch bemüht, bei der Veränderung von duplizierten Layouts Parameter anzubieten, die fast immer das Gewünschte leisten. Also bitte verzweifeln Sie nicht, sondern fangen Sie zunächst mit kleinen Änderungen an, bis Sie deren Wirkungen verstehen. Dann werden Sie mutiger und können vorausahnen, was passiert, wenn Sie an diesem oder jenem Parameter drehen.

Vorbereiten eines Test-Albums 

Um die Ergebnisse Ihre Veränderungen an einem konkreten Online-Album auszuprobieren, benötigen Sie ein Test-Album. Sie können hierzu jedes bestehende Kunden-Album verwenden, denn das Album selbst bleibt unverändert. Ein Kunde, der während Ihrer Tests sein Album (= Ihr Test-Album) besucht, merkt nicht, dass es ein Test-Album ist. Er sieht Ihre Layout-Veränderungen zunächst nicht.

Ein gutes Test-Album enthält einige Bilder, so dass Sie darin einzeln und seitenweise blättern können. Es sollte Bilder gemischt im Hoch- und Querformat enthalten, damit man sieht, welche Auswirkungen dies auf die Gestaltung der Album-Ansicht hat.

Das Test-Album legen Sie fest, indem Sie unter dem Hauptmenüpunkt "Fotograf" im Untermenü "Zusatzoptionen Layout" einen internen Albumnamen (z. B. album001) als "Interner Name des Voransicht-Albums" eintragen und anschließend auf Speichern klicken.

Rufen Sie dann später, bei der Veränderung der Layout-Parameter den Menüpunkt "Layout Voransicht"/"Test" auf, so öffnet sich ein neues Fenster und zeigt die Album-Ansicht dieses Albums. Temporär wird dabei das aktuell von Ihnen gerade bearbeitete Layout verwendet. Ein Besucher dieses Albums sieht jedoch nur das dem Album zugeordnete Original-Layout.

Ein fertiges Layout einem Album zuordnen 

Über das Hauptmenü "Albenliste" klicken Sie ein Album an und wählen als Basis-Einstellung das "Layout des Albums" aus der Klappliste. In dieser Klappliste wird auch Ihr neues Layout erscheinen, sobald es gespeichert wurde.

Beim Layout "eigenes CSS" verhält es sich etwas anders. Hier entsteht kein Layout mit einem eigenen Namen, sondern Sie verändern das CSS direkt und wählen aus der Klappliste den Eintrag "eigenes CSS", um es dem Album zuzuordnen.

Vergessen Sie nicht, abschließend auf "speichern" zu klicken.

Die Verwendung von Bildern bei der Layout-Gestaltung 

Wie schon in der Einleitung zu diesem Kapitel erwähnt, werden oftmals "grafiklastige Bilder" im Web verwendet, um eine bestimmtes Layout zu realisieren. Das ist bei nicht anders. Die Buttons im Benutzerteil sind beispielsweise überwiegend kleine Bildchen, wie das folgende:

Diese Bildchen sind meist nur wenige dutzend Pixel breit und hoch. Sie sollten bei Ihrem Bildbearbeitungsprogramm also auf die Größenangabe "Pixel" achten und "dpi-", "Millimeter-" oder "Zentimeter"-Angaben ignorieren.

Der Dateityp ist entweder JPEG, GIF oder PNG, RGB-codiert und nicht etwa CMYK.

Bevor Sie ein Bild als Button benutzen können, muss es auf Ihren Webserver gebracht werden. Hierzu bietet Ihnen jeweils eine Upload-Funktion an. Wie einzelne Bilder im Web hochgeladen werden, dürfte bekannt sein. Klicken Sie an entsprechender Stelle einfach auf "hochladen", um in die Maske zum Hochladen von Bildern zu gelangen. (Im Screencast "Konfiguration" wird das Hochladen am Beispiel des Logos demonstriert.)

Der Browser-Cache 

Webseiten bestehen häufig aus einer Vielzahl von immer gleichen Bildern oder verwenden immer wieder dieselben Stil-Vorlagen (CSS). Diese sich wiederholenden Elemente einer Webseite immer wieder neu aus dem Internet zu laden, würde den Aufbau der Seite (und vor allem aller Folgeseiten) sehr verlangsamen. Aus diesen Gründen (und vor allem, weil früher die Internet-Verbindungen noch schlechter waren als heute) wurde der so genannte Browser-Cache entwickelt. Es handelt sich dabei um einen Zwischenspeicher, in welchem die Elemente einer Webseite (vor allem Bilder) abgelegt werden. Wird eine Folgeseite aufgerufen, prüft der Browser zunächst, ob Bilder der neuen Seite bereits im Cache vorliegen und zeigt diese dann an, anstelle sie erneut aus dem Internet zu laden.

Das ist im Grunde eine feine Sache, stört aber gewaltig bei der Layout-Entwicklung: Denn wenn beispielsweise ein neuer grafischer Button auf den Server geladen wird, will man diesen ja auch sogleich sehen und nicht etwa den alten.

Wir haben uns bemüht, die Voransichten des Layouts so zu realisieren, dass dieses "Caching" verhindert wird, also alte Elemente nicht mehr gezeigt werden und dafür immer die neuen zu sehen sind. Sicher ausschließen konnten wir diesen unerwünschten Effekt jedoch nicht. Sehen Sie eine Änderung an einem Layout nicht sofort, hat dies im Allgemeinen zwei Gründe:

• das alte Element aus dem Browser-Cache kommt zur Darstellung 

• Sie haben vergessen auf "Speichern" zu klicken. 

Eine Möglichkeit, den Browser dazu zu bewegen, Bilder neu aus dem Internet zu laden statt aus dem Cache: Klicken Sie bei gedrückter Shift-Taste auf "Aktualisieren" im Browsermenü (Reload, Seite neu laden). Dazu hat Ihr Browser einen Menü-Unterpunkt oder entsprechenden Button.

Wenn Sie es sich zutrauen, können Sie das Caching auch abschalten (beim Internet Explorer funktioniert das leider nicht 100%ig). Begeben Sie sich hierzu in die Einstellungen Ihres Browsers. Suchen Sie dort nach den Einstellungen zum Thema "Cache", "Caching" oder "Temporäre Internet Dateien". In der Regel lassen sich zwei Einstellungen vornehmen:

• "nach neuerer Version der Seite suchen" oder ähnlicher Wortlaut; stellen Sie hier "immer" ein 

• setzen sie die Cache-Größe auf ein Minimum oder Null. 

Die Ansichten eines online-Albums 

Da im Folgenden immer wieder die Rede davon sein wird, möchten wir hier den einzelnen Ansichten eines Online-Albums Namen geben.

Login-Seite: Immer wenn Sie aufrufen, erscheint zunächst die Login-Seite, auf der Sie sich als Benutzer oder Administrator anmelden.

Begrüßungsseite: Je nachdem, ob Sie einen Begrüßungstext angegeben haben oder nicht, erscheint nach dem Login die Begrüßungsseite oder sofort die Album-Ansicht.

Album-Ansicht: Die Ansicht, in der Sie in den Briefmarken-Bildchen (Thumbnails) seitenweise oder in den vergrößerten Detailansichten einzeln vor- und zurückblättern können. Im Grunde das, was man unter einem Album versteht.

Warenkorb-Ansicht: Wenn der Benutzer auf den Button "Bestellung" oder "Warenkorb" klickt, erscheint die Warenkorb-Ansicht. Hier wird festgelegt, welche Formate in welcher Stückzahl bestellt werden.

Bestell-Formular: Um den "Warenkorb-Inhalt" zu bestellen, benötigen Sie die Adresse des Auftraggebers. Das Formular, das entsprechende Felder zur Erfassung anbietet, nennen wir Bestell-Formular.

Text-Ansichten (Hilfe, AGB, Preise): Diese Ansichten zeigen im Wesentlichen das Hauptmenü und viel Text. Sie erscheinen nach Klick auf den entsprechenden Button.

Layout duplizieren und ändern 

Der einfachste Weg zum eigenen Layout ist das Ändern eines Standard-Layouts. Um die Original-Standards nicht zu verlieren, sind diese vor Veränderungen geschützt. Um ein Standard-Layout zu ändern, müssen Sie es zunächst duplizieren.

Beginnen Sie Ihr eigenes Layout, indem Sie "Layout" im Hauptmenü auswählen.

 

Wählen Sie dann in der Klappliste das zu duplizierende Layout aus, klicken Sie anschließend auf "duplizieren". legt ein neues Layout an und öffnet es zum Bearbeiten.

Später wählen Sie hier Ihr vorhandenes Layout aus. Durch Klick auf den Button "ädern" können Sie es gemäß Ihren Wünschen anpassen.

Wie Sie sehen, trägt das neue Layout zunächst einen internen Namen (im Bild 3 "layout_5"). Ändern Sie den internen Namen in einen von Ihnen gewählten. Dieser neue Name erscheint später in den Klappliste, über die Sie das Album auswählen und ändern können.

Alle Felder der Grundeinstellungen und Schriften enthalten bereits Werte: nämlich die des  Original-Layouts, aus dem Sie dieses Duplikat abgeleitet haben. Insgesamt gibt es vier Gruppen von Parametern, an denen Sie Veränderungen vornehmen können. Sie erreichen diese über die Einträge im linken Untermenü:

• Basis-Einst. & Schriften 

• Element-Positionen 

• Rahmen & Abstände 

• Bilder & Buttons 

Die folgenden Abschnitte erläutern Ihnen die vier Parameter-Gruppen.

Hinweis: SPEICHERN NICHT VERGESSEN !

Bitte klicken Sie nach jeder Änderung eines Parameters lieber einmal zu viel auf "speichern" als einmal zu wenig, damit Ihre Änderungen übernommen werden. Speichern Sie Ihre Einstellungen vor allem, bevor Sie Auf "Voransicht" klicken. Denn sonst sehen Sie Ihre Änderungen nicht. Wir weisen auf das Speichern im folgenden nicht mehr explizit hin.

Nach einem Speicher-Vorgang wird die aktuelle Seite neu geladen. Das geht blitzschnell. Es zu sehen hilft jedoch um sicher zu gehen, dass die Daten gespeichert wurden.

Wichtig: AUSWIRKUNG AUF ANDERE ALBEN

Sollten Sie bereits ein eigenes Layout geschaffen und dieses einigen Alben zugeordnet haben, so bedenken Sie bitte, dass sich Ihre Änderungen sofort auf all diese Alben auswirkt.

Layoutänderungen in der Voransicht 

Klicken Sie doch einfach einmal auf den Link "Test" links im Untermenü "Layout Voransicht". Es öffnet sich ein neues Browser-Fenster und zeigt ein Album im dem Layout, das Sie gerade bearbeiten. Es handelt sich dabei um das Album, das Sie als Test-Album festgelegt hatten (siehe weiter oben).

Direkt nach dem Duplizieren eines Layouts sieht das Album natürlich genau so aus, als hätten Sie ihm das Original-Layout zugeordnet.

Verwenden Sie den Menüpunkt "Voransicht", wann immer Sie das Ergebnis einer Veränderung am Layout sehen wollen. Beachten Sie hierzu auch bitte unsere Anmerkungen zum Thema Browser-Cache (siehe weiter oben).

Basis und Schriften, Thumbnails pro Zeile und Spalte 

In den Grundeinstellungen eines Layouts legen Sie seinen Namen sowie die Anzahl der Briefmarken-Bildchen (Thumbnails) pro Zeile und pro Spalte in der Album-Ansicht fest.

Hinweis:

Achten Sie bei der späteren Wahl eines Hintergrundbildes darauf, dass er zu dem hier festgelegten "Raster" aus Thumbnails passt.

Text als Grafik

Für den Neuling sicherlich etwas verwirrend: Text kann auf Webseiten als reiner HTML-Text oder in Form eines Bildchens ausgegeben werden. In der unten stehenden Abbildung 5 erkennen Sie, dass der Titel der Site "DIGIs online bestellen" blau erscheint, die Texte "zur Bestellung >>>" und "aktualisieren" hingegen nicht. Bei letzteren handelt es sich um Texte in Form von zwei Bildern, die daher die Textfarbe blau nicht annehmen können.

Hinweis:

Die Beschriftung von Buttons können Sie bei reinen Text-Buttons im Menü "Fotograf" und dort unter "Begriffe & Textpassagen" ändern. Grafische Buttons laden Sie unter "Bilder & Buttons" hier im Layout-Menü hoch.

 

Wundern Sie sich also nicht, dass Ihre Text-Einstellungen nicht sofort zum gewünschten Resultat führen. Für "schöne" Buttons greift man üblicherweise auf kleine Grafiken zurück.

Schriftart

Ob eine spezielle Schriftart im Browser dargestellt werden kann oder nicht, hängt davon ab, ob auf dem Rechner des Benutzers diese Schriftart installiert ist. Da man dies nicht beeinflussen kann, greift man bei der Vorgabe auf sehr weit verbreitete Schriftarten zurück und spezifiziert nicht nur eine, sondern immer gleich mehrere ähnliche Schriftarten. In der Klappliste zur Schriftart finden Sie die am häufigsten verwendeten Kombinationen. (HTML 5 und CSS 3 bieten inzwischen dynamisch geladenen Schriften an, muss aber auch ältere Brwoser unterstützen).

Textfarbe

Text erscheint in den verschiedenen Ansichten von an vielen Stellen. Wichtig für gute Lesbarkeit ist dabei, welche Farbe oder welchen Farbton der Hintergrund aufweist. unterscheidet dabei zwei Situationen: "innen" und "außen".

Außer der Begrüßungsseite haben alle Seiten eines Albums den gleichen Hintergrund (wird bei Bilder & Buttons festgelegt). In der Warenkorb-Ansicht und im Bestell-Formular liegt der wesentliche Seiteninhalt im so genannten "Seitenblock", der wiederum einen eigenen Hintergrund haben kann. Die Farbe des "Außen-Texts" sollte so gewählt werden, dass Sie zu diesen beiden Hintergründen passt.

 

Anmerkung:
Mit Version 2.9.2 von gibt es einige Neurungen bei den Layouts. Insbesondere können weitere Hintergrund-Bilder hochgeladen werden. Näheres erfahren Sie hier.

 

Da die Darstellung der Briefmarken-Bildchen (Thumbnails) sehr wichtig ist, bietet für den "Innen-Text" die Möglichkeit, für die innerhalb eines Thumbnail-Rahmens liegenden Texte die Farbe getrennt vorzugeben.

Um die Wirkung der Farbe zu verdeutlichen, haben wir im folgendem Bild die Farben für Außen- und Innen-Text auf Blau und Rot gesetzt.  

Farben wählen

Farben wählen Sie in immer in gleicher Weise. Entweder Sie geben den Farbcode hexadezimal direkt ein, z.B. #FF0000 für ein kräftiges und reines Rot. Oder Sie klicken auf das kleine Symbol hinter dem Eingabefeld. Es öffnet sich anschließend ein Farbwahl-Fenster, in welchem sie die Farbe durch Anklicken auswählen. Vergessen Sie anschließend nicht auf "speichern" zu klicken!

Einige Bildbearbeitungsprogramme (z.B. Photoshop) können Ihnen Farbwerte direkt als "Web-Farben", also hexadezimal anzeigen.

Textgröße

Leider stellt fast jeder Browser eine Schrift bei gleicher Größenvorgabe unterschiedlich groß dar. Einige Browser erlauben auch nur bestimmte Schrittweiten bei der Größenangabe. Gemessen wird die Größe bei in Pixeln (px). Um auf der sicheren Seite zu liegen, wählen Sie für "normal", "klein" und "Überschrift" jeweils eine der Zahlen 8,10,12,14,16, 20. Die Angabe "px" als Größeneinheit ist nicht nötig.

Tipp:

Die Schriftgröße "normal" erscheint in der Album-Ansicht an keiner Stelle! Hier werden nur "klein" und "Überschrift" verwendet.

Hinweis für Profis:

Sie dürfen Größenangaben wie "em", "pt" hinter Zahlen machen. Diese werden in das generierte Style Sheet übernommen.

Textgröße und Stil bei Buttons

Wie oben angemerkt, sind Buttons oft als kleine Bildchen realisiert. Anders im "Gras"-Layout: Hier bestehen die Hauptmenü-Buttons tatsächlich aus reinem HTML-Text. Nur wenn Buttons nicht als Bild realisiert sind, greifen Stil, Farbe und Größenangaben für Buttons.

Übrigens: Ins Deutsche übersetzt, können Sie bei einigen Schriftgrößen-Vorgaben auch den Stil ändern: "bold" = Fettdruck, "italic" = kursiv, "underline" = unterstrichen.

"Links"

Die Menü-Buttons, die Ziffern zum Springen zwischen den Seiten/Bildern und die Pfeile zum Blättern sind im Grunde alle ganz normale "Web-Links". Sie haben das sicher schon selbst beobachtet: Fahren Sie mit der Maus über einen solchen Link, so ändert dieser oftmals sein Aussehen, seine Farbe und seinen Stil. Dieser Effekt wird "Rollover"-Effekt genannt. Farbe und Stil für den Rollover-Effekt bei Text-Links (keine Bildchen) können Sie für alle Ansichten hier festlegen.

Hinweis:

Die Grundfarbe eines Links entspricht in der für Außen-Texte.

Preisangaben

Weil die Angabe des Gesamtpreises so wichtig ist, haben die Entwickler von ihm eine eigene Farbgebung zukommen lassen.

Element-Positionen 

Buttons, Links, Thumbnails, Seitenblock, Unteralben (entfällt ab Version 2.9.2), Link-Liste: Das sind alles Elemente, aus denen die Seiten des Benutzerteils bestehen. Ein Großteil davon lässt sich frei durch Angabe der Koordinaten auf der jeweiligen Seite positionieren. Andere sind relativ positioniert – weil mit dem Wachsen der Seite (z. B. Warenkorb-Ansicht) die Elemente mitwandern müssen. Die Buttons "zur Bestellung", "aktualisieren", "Bestellung auslösen", die Gesamt-Preisangabe sowie der Inhalt des Seitenblocks sind daher nicht frei positionierbar. Wie Sie sehen, gibt es aber noch genügend Elemente, für die Sie neue Positionen festlegen können.

Keine Angst: Auf den ersten Blick sind es sehr viele Eingabefelder. Da aber Elemente bei einem gelungenen Layout sich meist in Ihrer Lage aneinander orientieren, folgt die eine Koordinate meist durch einfache Addition aus der anderen.

Vielleicht etwas ungewöhnlich:

Im Koordinatensystem bei Computern läuft die x-Koordinate wie gewöhnlich von links nach rechts, die y-Koordinate jedoch von oben nach unten. Erhöhen Sie den Wert der x-Koordinate, so verschiebt sich ein Element nach rechts. Erhöhen Sie den Wert der y-Koordinte, so verschiebt sich ein Element nach unten. Das Element selbst bleibt in der Größe unverändert. Am besten lernt man an Beispielen.

 

Beispiele: nichtquadratisches Logo

Wir erhalten oft Anrufe, weil das Logo eines Kunden nicht quadratisch ist. Was tun? Ganz einfach: Wir verschieben die obere Menüleiste nach rechts, um links Platz zu schaffen.

Der obere Teil des Untermenüs "Element-Positionen" enthält im Wesentlichen die Koordinaten der Hauptmenü-Buttons. Als Beispiel-Logo haben wir das Logo einfach in seiner Breite verzerrt, und zwar von 90 x 90 Pixel auf 180 x 90 Pixel.

Hinweis:

Das Logo laden Sie als vom Layout unabhängige Komponente im Menü "Fotograf" und dort im Untermenü "Logo & Login-Seite" hoch.

 

Wir brauchen also zusätzliche 90 Pixel auf der linken Seite. Der am weitesten links stehende Button "Album" hat im Layout "Gras" (das wir für dieses Beispiel dupliziert haben) die x-Koordinate bei 142. Die y-Koordinate bleibt gleich, da wir die Buttons in der Höhe nicht verschieben wollen. Für die Hauptmenü-Buttons erhalten wir bei +90: 232, 332, 432, 532, 632, 732. Das Ergebnis sehen Sie in der folgenden Abbildung, durch Klick auf den Eintrag "Test" im Untermenü "Layout Voransicht".

Wie Sie sehen, müssen die beiden Überschriften auch noch verschoben werden. Und die Pfeile zum Blättern und die Thumbnails schließen nach links noch etwas "haltlos" ab.

In der nächsten Abbildung haben wir weitere Änderungen eingebracht, um dies zu korrigieren:

Die Pfeile zum Blättern wurden nach links verschoben:

x=12,62,112,162

Der Text bzw. Link "Übersicht/Zoom" (in unserem Beispiel lautet er "Für eine größere Ansicht bitte auf das jeweilige Bild klicken"):

x=12, y=570

Die Dia-Show haben wir nach rechst oben gebracht:

x=880, y=65

Die Liste der Unteralben steht jetzt rechts (entfällt ab Version 2.9.2):

x=885, y=150

Die beiden letzten "Entscheidungen" waren keine so gute Idee. Denn was ist bei kleinen Monitoren, z. B. mit 800 x 600 Pixeln? Bei diesen muss nach rechts gescrollt werden, um die Unteralben und den Dia-Show-Button überhaupt zu sehen. Doch für unser Beispiel spielt das keine Rolle.

Wie Sie sehen, haben wir auch alle Thumbnails nach links und nach oben verschoben:

x=12, y=150

Dies geschieht, indem man das erste Thumbnail (links oben) verschiebt. Aber so ganz hat es nicht geklappt, denn das Thumbnail im Querformat in der zweiten Reihe beginnt nicht bei x=12, so wie die Pfeile zum Blättern.

Die Ursache werden wir bei den Rahmen & Abständen verstehen. Bisher genügt es zu wissen: Um so etwas auszugleichen, müssen die Positionen von Logo, Pfeilen und Text bzw. Link "Übersicht/Zoom" nach rechts korrigiert werden. Die Thumbnails lassen sich nicht vollständig nach links verschieben.

 

Mit Version 2.9.2 von gibt es einige Neurungen bei den Layouts. Insbesondere sind dort bereits die Layouts auf 180x90 Pixel Logos ausgerichtet. Näheres erfahren Sie hier.

 

Bislang haben wir weder die Breiten- und Höhenangaben noch den Z-Index (mit diesem steuern Sie die Reihenfolge der Überlappung einzelner Elemente) verändert. Und das ist gut so: Denn wenn diese verändert werden, müssen auch die Positionen neu berechnet werden. Macht man z. B. die Hauptmenü-Buttons breiter, so müssen die x-Koordinaten ebenfalls weiter auseinander liegen. Zur Veranschaulichung  geben wir ein etwas sinnfreies Beispiel.

In Abbildung 9 haben wir den "freien Link" gesetzt auf:

x=600, y=75, Breite=140, Höhe=30

Die Z-Indizes der Hauptmenü-Buttons haben wir einfach durchnummeriert von 1 bis 6. Dadurch überdeckt der "freie Link" (in der Abbildung belegt mit "Kontakt") seinen Vorgänger und wird selbst vom AGB-Button verdeckt. Sie sehen außerdem, wie der Button nach unten hängt, da wir seine Höhe verändert haben, jedoch seine y-Koordinate wie bei den anderen unverändert blieb.

Den Z-Index werden Sie vermutlich nur äußerst selten benötigen – es sei denn, Sie finden gerade die damit erzielbaren Überlappungseffekte interessant.

Breite und Höhe hingegen werden Sie öfters benötigen, nämlich immer dann, wenn Sie mit geänderten Texten arbeiten, die länger oder sehr viel kürzer sind.

Rahmen & Abstände 

In der oberen Hälfte der Einstellungen für "Rahmen & Abstände" können Sie Dicke, Farbe und Stil der Rahmen um Buttons, Seitenblock und Briefmarken-Bildchen (Thumbnails) anpassen. Im Layout "Gras" (von dem sich unsere Beispiele hier ableiten) sind alle Rahmen bereits gesetzt. Sie erkennen z. B. die durchgezogenen (solid) Rahmen in hellem Grau um die Menü-Buttons. Oder die gepunkteten Linien (dotted) um jedes Thumbnail.

Experimentieren Sie am besten ein wenig mit den verschiedenen Stilen, um Ihre persönlichen Favoriten dann für Ihr Layout einzusetzen.

Die Stärke der Rahmen wird wieder in Pixel gemessen, wobei nur ganze Zahlen zugelassen sind.

Hinweis für Profis:

Wenn Sie Größenangaben bei den Rahmenstärken machen, z. B. "em", dann werden diese in das Style Sheet eingetragen. Bei Zahlen ohne Größenangabe wird immer "px" ergänzt.

Einen Rahmen lassen Sie ganz verschwinden, indem Sie seine Stärke auf 0 setzen oder seine Farbe gleich der Hintergrundfarbe wählen.

 

Der wichtigere Teil der oben abgebildeten Eingabefelder sind sicher die "Abstände zum Rahmen" (unterer Teil im Bild). Bis auf die letzte Zeile entsprechen alle Abstände den Innenabständen des Inhalts zum Rahmen. Bei den Menü-Buttons ist das beispielsweise der Abstand des Textes zum Rahmen. Auch hier wieder ein kleines Beispiel:

In Abbildung 11 haben wir den Abstand oben und unten bei den Hauptmenü-Buttons von 2 auf 12 gesetzt. Sie sehen, dass die Buttons viel größer geworden sind. Die Gesamthöhe aus Schrifthöhe, Innenabständen oben und unten sowie Rahmenstärke übersteigt damit jetzt die Vorgabe von 20 Pixeln, die wir bei den "Element-Positionen" eingetragen hatten. Damit bleibt die Angabe ohne Auswirkung.

Interessant sind vielleicht die beiden folgenden Änderungen. Im Bild links haben wir die Innenabstände der Thumbnails von 12, 26, 12, 26 auf 3, 6, 3, 6 reduziert. Dadurch wurde der "Rahmen" um das Thumbnail enger. Im Bild rechts haben wir die Thumbnails dann noch weiter zusammengeschoben: von 6, 15, 6, 15 auf 3, 8, 3, 8. So liegen siedichter beieinander.

Bilder & Buttons 

Die "Spielregeln" noch einmal zusammengefasst:

• Setzen Sie für einen Button ein Bild ein, so greifen Änderungen an den Beschriftungen im Menü "Fotograf / Begriffe & Textpassagen" nicht. 

• Geben Sie bei den Buttons eine Farbe vor, dann werden eventuell hochgeladene Button-Bildchen nicht angezeigt. 

• Bei den Hintergründen verhält es sich anders: Überall dort ,wo das Hintergrundbild zu Ende ist, wird die angegebene Farbe angezeigt. 

• Achten Sie beim Hochladen darauf, ob der Bildtyp "GIF" oder "JPEG" gefordert ist. Hintergründe sind im Allgemeinen JPEGs, Buttons meist  GIF-Bilder. Ab Version 2.9.2 müssen Sie nicht auf den Typ achten. Erlaubt sind PNG, JPEG oder GIF für alle hochladbaren Layout-Bilder. 

Versuchen Sie, sich diese Regeln zu merken –  damit Sie nicht verzweifeln, wenn ein Bild hochgeladen wurde und Sie es nicht im Layout sehen. Denken Sie dabei auch an unsere Bemerkungen zum Thema Cache bei den allgemeinen Anmerkungen ganz oben auf dieser Seite.

Der Weg zu einem eigenen Hintergrund 

Als Beispiel für dieses Kapitel haben wir das "weiße" Layout dupliziert und wir beginnen mit Hintergrundbildern.

Zum Entwickeln eines neuen Hintergrunds für alle Seiten (außer der Einführungsseite), haben wir auf den ersten "hochladen"-Button geklickt und uns per Drag & Drop den duplizierten Hintergrund auf unseren Rechner gezogen. Er dient als Vorlage, weil wir unser Layout sonst so belassen möchten, wie es ist. In einem Bildbearbeitungsprogramm haben wir mit einfachen Werkzeugen das Hintergrundbild (rechts) aus dem Original (links) erzeugt (Stimmt, schön ist anders ;-).

Das neue Hintergrundbild haben wir dann hochgeladen. Weil es in seinen Dimensionen begrenzt ist und bei großen Monitoren der Hintergrund neben dem Bild dann weiß wäre, haben wir die Hintergrundfarbe der Seite auf das gleiche Gelb gesetzt: #FFFFCC. Anschließend haben wir uns eine kleine 16 x 16 Pixel große Grafik erzeugt:

und diese als Thumbnail-Hintergrund mit Wiederholung in beide Richtungen hochgeladen (in der Klappliste nach dem Hochladen "repeat" auswählen und auf speichern klicken). Einen roten Rahmen (dashed) haben die Thumbnails schließlich auch noch erhalten.

Das Ergebnis sehen Sie hier:

 

Transparenz 

In der Abbildung 16 haben wir einen Ausschnitt vergrößert. Sie erkennen hier: Um die ">"-Zeichen und Buchstaben liegen weiße oder hellgraue Pixel. Woher stammen diese?

Unser Beispiel-Layout ist ein Duplikat des weißen Layouts. Mit dem Duplizieren wurden auch alle Bildchen, die zum Layout gehören, dupliziert. Damit die Button-Beschriftungen des Hauptmenüs "schön glatt" aussehen, hatten wir im "weißen" Layout grafische Buttons verwendet, die noch dazu transparent sind. Möchte man eine "schön glatt" aussehende Schrift, so dürfen die Ränder nicht einfach von Transparent zu Schwarz werden, sonst sehen sie "pixelig" aus. Der Trick, den viele Bildbearbeitungsprogramme hier verwenden: Sie erzeugen eine Art Verlauf am Rand der Buchstaben, indem sie (beim Verlauf nach Weiß) ein paar hellgraue Pixel um die Buchstaben herum anordnen.

Dies erklärt Ihnen den hellgrauen Saum um die Schriftzeichen unserer Buttons. Je nach Hintergrund ist es also beim Entwurf eines neuen Layouts notwendig alle grafischen Buttons durch neue auszutauschen, damit es besser aussieht.

 

Anmerkung:

Das Gesagte gilt für teitransparente Buttons, die im GIF Format erzeugt wurden. Ab version 2.9.2 von können Sie auch PNG-Bilder hochladen und als Buttons verwenden. PNG erlaubt echte Alpha-Kanal Transparenz.

Grafische Buttons für Hauptmenü, Blättern und weitere Zwecke  

Bis hierher haben Sie gesehen, was sich hinter den drei Untermenüpunkten "Hauptmenü-", "Blättern-Buttons" und "Hintergründe" verbirgt:

Indem Sie kleine Grafiken mit entsprechenden Beschriftungen als Bilder hochladen, erzeugen Sie völlig individuelle Buttons für Ihr selbst kreiertes Layout.

Mit Hilfe von Abbildung 18 möchten wir noch auf drei Aspekte hinweisen:

1. Ob ein Bild bereits hochgeladen wurde und existiert erkennen Sie daran, dass hinter dem "hochladen"-Button der interne Name des Bildes steht. Wenn Sie eine Grafik hochladen, benennt diese in den internen Namen um. Existiert noch kein Bild für den Button oder den Hintergrund des Layouts, so wird auch kein Dateiname angezeigt. Sie erkennen an der Dateinamen-Endung auch, ob es sich um eine JPEG(.jpg)- oder GIF(.gif)-Bild handelt (ab Vs. 2.9.2 auch Endung .png). 

2. Die Abbildung zeigt ein leeres Feld "Farbe der Blättern-Buttons". Das ist so, damit die Blättern-Buttons sichtbar werden und nicht etwa Text-Buttons mit Begriffen aus dem Menü "Fotograf / Begriffe & Textpassagen". Sie leeren ein Farb-Eingabefeld übrigens, indem Sie die darin enthaltenen Zeichen löschen und auf "speichern" klicken.  

3. Aus technischen Gründen verhält es sich mit den "weiteren Buttons", die für den Bestellvorgang verwendet werden, etwas anders. Löschen Sie einmal unter dem Menüpunkt "Weitere Buttons" die Grafiken für die Buttons der Warenkorb-Ansicht. Das Ergebnis sieht dann etwa wie folgt aus: 

Ohne hochgeladene Bildchen werden die bytepix-Buttons zu ganz normalen Betriebssystem-Buttons wie Sie sie von Windows- oder Mac-Anwendungen her kennen. Die Aufschrift wird allerdings auch hier dem Menü "Fotograf / Begriffe & Textpassagen" entnommen.

Der Seitenblock 

Wir haben bisher immer nur das Aussehen der wichtigsten Seite des Kundenteils, nämlich das Aussehen der Alben-Ansicht, verändert.

Der Grund dafür ist recht einfach: Da alle Elemente innerhalb des Seitenblocks wechselseitig voneinander abhängen, sind die Positionen relativ zueinander. Wir können hier also kaum irgendwelche Positionen verändern. Je umfangreicher Ihr Bestelltext oder die Bestellung selbst ist, desto länger wird das Bestellformular.

 

Wie Sie Schrift, Position, Rahmen und Hintergrund bzw. die Bestell-Buttons verändern, konnten Sie in den vorstehenden Abschnitten sehen. In den folgenden Abbildungen haben wir den Seitenblock orange umrahmt. Am besten erkennt man ihn im Layout "Türkis", da er hier sogar ein eigenes Hintergrundbild besitzt.

 

Rahmen aus Bildern 

Zuletzt kommen wir zur Kür der Gestaltung: ein individueller Rahmen um jedes Thumbnail und um die vergrößerten Detailansichten in der größeren Ansicht (nicht im Web 2.0 Zoom-Modus).

Technisch gesehen besteht ein solcher Rahmen aus neun Einzelbildchen: vier für die Ecken, vier für die Seiten und eines für das Innere des Rahmens.

Rufen Sie den entsprechenden Untermenüpunkt "Rahmen aus Bildern" auf, so sehen Sie, dass Sie insgesamt neun GIF-Bildchen hochladen können. Über den "hochladen"-Buttons befindet sich ein Optionsfeld, mit dem Sie den Rahmen insgesamt an- oder abschalten können. Speichern nicht vergessen!

Wichtig!

Den Rahmen aus Bildern um jedes Thumbnail sehen Sie nur, wenn sie kein Hintergrundbild (Unter-Untermenü "Hintergründe") für das Thumbnail hochgeladen haben. Auf Grund von Darstellungsfehlern ist die Hintergrundfarbe wichtig, da das mittlere Rahmenbild nicht bündig mit den Rändern abschließt. Lassen sie es weg, dann wirkt lediglich die Hintergrundfarbe.

In Abbildung 21 haben wir die neun kleinen Einzelbildchen, aus denen der gezeigte Rahmen aufgebaut ist, orange markiert. An den Seiten werden die Bildchen in x- oder y-Richtung wiederholt. Der Rahmen passt sich dadurch sozusagen der Größe des gezeigten Bildes automatisch an.

Mit dem Bild der Innenfläche wird der Hintergrund des gezeigten Bildes erzeugt. Beachten Sie hierzu bitte auch den Hinweis zu Beginn dieses Abschnitts. Mit solchen "Rahmen aus Bildern" erzeugen Sie z. B. auch einen Schattenwurf. Das Ganze ist jedoch – wie Sie vielleicht erkennen – recht aufwändig und erfordert Zeit und Übung.

Vollkommen freies Layout mit eigenem CSS 

Das Layout des Kundenteils basiert auf Cascading Style Sheets (CSS). Dabei liegen die fünf Standard-Layouts als Parameter-Listen vor, aus denen das jeweilige CSS eines Layouts generiert wird. Die vorangegangenen Abschnitte erklärten, wie Sie diese Parameter-Listen duplizieren und mittels Anpassung ein neues CSS (= Layout) erzeugen können.

Über dieses Gestalten hinaus können Profis auch ein eigenes CSS vollkommen frei entwickeln, es im Verwaltungsteil abspeichern und einem Album zuordnen. Das sechste Layout, das in zur Verfügung steht, ist ein Beispiel dafür.

Die Entwicklung eines eigenen CSS setzt profunde Kenntnisse über diese "Layout-Sprache" voraus. Besitzen Sie sie, so verfügen Sie sicherlich auch über weiteres Wissen oder kennen Informationsquellen zur Layout-Entwicklung. Dieses Kapitel gibt Ihnen daher zwar wichtige Hilfestellungen, kann aber nicht das gesamte Thema erschöpfend behandeln.

Hinweis:

Bevor Sie mit dem Entwickeln eines eigenen CSS beginnen, machen Sie sich bitte mit den allgemeinen Anmerkungen ganz oben vertraut. Lesen Sie bitte auch über die kurzen Namen der verschiedenen Ansichten des Kundenteils von nach.

Tipp:

Für den Browser Firefox existiert ein sehr hilfreiches Plug-in "Web Developer". Es bietet zahlreiche Hilfsmittel, eine im Browser angezeigte Webseite zu analysieren und so auf die Elemente des CSS rückzuschließen.

Ein eigenes CSS editieren, speichern und aktivieren 

Im Hauptmenü "Fotograf" und dort im Untermenü "Zusatzoptionen Layout" finden Sie zwei Buttons zum Ändern und Löschen Ihres eigenen CSS-Layouts. Außerdem sehen Sie, ob das eigene CSS aktiv ist oder nicht. Ist es inaktiv, so erzeugt beim Klick auf "ändern" eine Kopie des sechsten Layouts und öffnet dieses im Texteditor. Klicken Sie jetzt auf "speichern" und anschließend auf "zurück", zeigt Ihnen an, dass das CSS aktiv ist (rechts neben dem Button "löschen").

Bei bereits aktivem CSS öffnet die aktuelle Fassung.

 

Sie können nun noch die Zahl der Thumbnails pro Zeile und Spalte festlegen (auch hier "speichern" nicht vergessen) und anschließend bei den Basis-Einstellungen zum Album das Layout zuordnen. Das sechste, mitgelieferte Layout ist etwas unflexibel hinsichtlich der Zahl der Thumbnails pro Zeile und Spalte (die Sie im Menü "Fotograf/Zusatzoptionen Layout" vorgeben müssen). Wir empfehlen, bei Thumbnails mit einer Breite von ca. 150 Pixeln, die Zahl der Thumbnails pro Zeile gleich 4 und pro Spalte gleich 2 zu setzen.

Wenn Sie auf den Button "löschen" klicken, wird das von Ihnen angelegte CSS unwiederbringlich gelöscht! Rechts neben dem Button "löschen" steht dann auch "CSS ist nicht aktiv".

Hinweis:

Klicken Sie nach dem Löschen Ihres eigenen CSS erneut auf "ändern", wird wieder eine Kopie des sechsten, mitgelieferten Layouts erzeugt. Dieses können Sie wiederum mittels "speichern" aktivieren. Die von Ihnen vormals eingebrachten Änderungen sind durch das Löschen zuvor jedoch verloren.

Hinweis:

Sollten Sie einem Album das "eigene CSS" als Layout (noch) zugeordnet, das Layout aber gelöscht haben, so kann es nicht mehr richtig darstellen und das Album sieht "chaotisch" aus. Um dies zu vermeiden, aktivieren Sie einfach das sechste, als Standard vorgegebene, Layout. Dann erhalten Alben, denen Sie Ihr eigenes CSS zugeordnet hatten, zumindest dieses und alle Inhalte werden korrekt angezeigt.

Tipp:

Als CSS-Profi wissen Sie sicher, wie man im Browser ein CSS direkt im Quellcode anzeigen lassen kann. Sie können auf diese Weise Code eines der fünf Standard-Layouts kopieren und als eigenes CSS aktivieren. Sie müssen dann lediglich noch die Pfade zu Bildern korrigieren – und schon haben Sie einen weiteren "Ausgangspunkt" für Ihre Änderungen.

Hinweise zum Seitenaufbau des bytpix Kundenteils 

Jetzt geht es ins "Eingemachte". Wir weisen nochmals darauf hin, dass die folgenden Erläuterungen eine Hilfestellung für den "schon wissenden CSS-Profi" sind und keine Basis-Einführung oder ein Lehrbuch für CSS ersetzen. Eine erschöpfende Darstellung würde den Rahmen dieser Anleitung sprengen.

• Für jede Ansicht des Kundenteils ist dem <body>-Tag eine Klasse zugeordnet. Die Klassennamen finden Sie in der folgenden Tabelle:
   

Ansicht	CSS body class	Wrapper-<div>
Album-Ansicht	.gallery	#wrapper
Warenkorb-Ansicht (auch Entscheidung Einzelbild/Fotoarbeit, Zoom-Ansicht)	.basket	#basketwrapper
Bestellformular (auch Zusammenfassung)	.orderform	#orderformwrapper
Text-Ansicht (Preise, AGB, Hilfe)	.showtext	#showtextwrapper

• Sobald das "eigene CSS" einem Album zugeordnet ist, wird um den gesamten Content jeder Seite jeweils ein <div>-Tag (Wrapper) gelegt. Die Namen befinden sich ebenfalls in der obigen Tabelle (die Wrapper fehlen bei den Standard-Layouts, dort werden sie nicht benötigt, Achtung: Ab Version 2.9.2 sind diese Wrapper ständig präsent). 

• In die folgende Abbildung 23 haben wir die IDs (#-Namen) der wesentlichen Elemente in der Album-Ansicht eingetragen. Sie stehen nahe beim jeweiligen Element. Die Elemente sind alle <div>-Tags. 

• Die <div>-Tags des Hauptmenüs oben wiederholen sich auf den Folgeseiten.  

• Abbildung 25 zeigt den "Seitenblock" in den verschiedenen Ansichten. Sein Content wird umschlossen von einem <div>-Tag mit den IDs: #basketpageblock, #orderformpageblock, #showtextpageblock. Die Album-Ansicht und die letzte Seite besitzen keinen "pageblock".
   

• Abbildung 24 zeigt die Tabellen der Thumbnails. Die CSS-Klassen der einzelnen Tabellen-Tags sind in Rot und Grün eingetragen. Nur bei aktiviertem "Rahmen aus Bildern" besteht die innere, grüne Tabelle aus 3 x 3 Zellen. Im Falle der Darstellung ohne "Rahmen aus Bildern" enthält die innere, grüne Tabelle nur eine mittlere Zelle, deren <td>-Tag in beiden Fällen die Klasse ".middle" zugewiesen ist.
   

• Die vergrößerte Detail-Ansicht eines Einzelbilds weist die gleiche Tabellenstruktur auf, lediglich eine Zelle (CSS-Klasse ".thumb") ist mit Content (Bild etc.) gefüllt. (ACHTUNG: ab Version 2.9.2 wird das vergrößerte Bild durch jQuery dynamisch in weitere <div>-Tags eingebettet.)

• Die Links zum Vorwärts- oder Rückwärtsspringen zwischen mehreren Bildern/Seiten  liegen im <div> mit der ID "#pagerlinks". Die Texte vor und hinter den Zahlen-Links werden je von einem <span class="pagertext"> umschlossen. Aktuelle Seite/Bild wird immer von einem <span class="pageractual"> umschlossen. Die Links selbst gehören zur Klasse ".pagerlink". 

• Die <img>-Tags von Thumbnails und vergrößerter Einzelbild-Ansicht gehören zur Klasse ".thumbnail". 

• Kopierschutz:
  In der vergrößerten Einzelbild-Ansicht gibt anstelle des Bildes eine einzellig Tabelle aus. Diese Zelle enthält ein transparentes GIF als "Bild" gleicher Größe. Das Bild selbst ist via CSS als Hintergrund definiert. ID dieses <td>-Tags ist "#tdwithbg". Das transparente GIF hat die CSS-Klasse ".thumbnail". Die einzellige Tabelle liegt in einer Tabellenzelle der CSS-Klasse ".middle". (ACHTUNG: ab Version 2.9.2 wurde dieser Aufbau geändert; hier gibt es Außerdem einen Unterschied, ob die Lupenfunktion aktiv ist oder nicht...) 

• Die <div>-Tags der Warenkorb-Ansicht liegen alle innerhalb des "#basketpageblock" und sind relativ untereinander angeordnet. Die Buttons unten floaten. Der Warenkorb-Inhalt besteht aus Zeilen der Tabelle ".basketitems", die jeweils zwei Zellen besitzen. In jeder Zelle liegt wiederum eine Tabelle ".basketitemleft" und ".basketitemright". 

• Abbildung 26 zeigt einen Ausschnitt des Bestellformulars. Die <div>-Tags liegen alle innerhalb des "#orderformpageblock" und sind relativ untereinander angeordnet. Der Button unten floatet. Die Eingabefelder liegen in einer Tabelle mit drei Spalten, z.T. via "colspan" zu einer verbunden. Die Auflistung der Bestellung besteht aus <p>-Tags.  

Schlussbemerkungen zu den CSS-Hinweisen

Wir empfehlen bei der Erstellung eines eigenen CSS, von einem bestehenden CSS auszugehen. In der Datei werden alle wichtigen Stile definiert. Viele im HTML-Code angelegten CSS-Klassen bleiben in den Standard-Layouts ungenutzt. Umgekehrt hoffen wir, dass keine wichtigen fehlen.

 

Bitte prüfen Sie den Aufbau der HTML-Seite mit einem Plugin wie WebDeveloper für Firefox. Die Angaben der CSS IDs und classes erfolgen ohne gewähr und können von Version zu Version leicht von den Abbildungen hier unterscheiden.

 

Die Hinweise des vorangegangenen Kapitels ersetzen keine Einführung in CSS. Sie versuchen lediglich, einen ersten Überblick zu verschaffen. Ohne einen Blick auf den Quelltext oder auf die CSS-Selektoren wird man kaum alle Aspekte erkennen und verstehen.  

Aus gleichen Gründen wird nicht näher auf die übrigen Seiten des Kundenteils von eingegangen. Diese sind außerdem ausgesprochen einfach.

Uns ist bewusst, dass die entwickelten CSS weiter verbessert werden können. Gesucht wurde ein Kompromiss aus Flexibilität, Einfachheit und Browser-Unabhängigkeit.

CSS der Begrüßungsseite und der Login-Seite 

Im Untermenü "Begrüßungsseite" bei den Einstellungen zum Album sowie im Hauptmenü "Fotograf"  (dort im Untermenü "Zusatzoptionen Layout") finden Sie je zwei weitere Buttons zum "ändern" und "löschen" der CSS für Begrüßungs- und Login-Seite.

Diese Buttons verhalten sich genau wie der des "eigenen CSS" im vorangegangenen Abschnitt.

Wichtig:

Beachten Sie jedoch, dass – sobald eines der beiden CSS aktiv ist – die Text- und die Hintergrund-Farben von Begrüßungs- bzw. Login-Seite ihre Bedeutung verlieren. Es gelten bei aktivem CSS die darin definierten Farbeinstellungen.

Begrüßungs- und Login-Seite bestehen im Wesentlichen aus einem Bild, etwas Text, einem Link ("weiter", "Impressum") und bei der Login-Seite dem Eingabefeld und Absende-Button.

Beide Seiten sind hinsichtlich ihrer CSS sehr einfach aufgebaut. Wir gehen daher auf den inneren Aufbau in dieser Anleitung nicht weiter ein.

 

Mit Version 2.9.2 von gibt es einige Neurungen hinsichtlich des Hintergrunds bei Login- und Begrüßungsseite. Es können weitere Hintergrund-Bilder hochgeladen werden. Näheres erfahren Sie hier.