Logos und Hintergrund

Für Version 2.9.2 wurde das Aussehen des Kundenteils von bytepix durch neue Layouts modernisiert. Dadurch ergeben sich ausserdem neue Möglichkeiten, das Erscheinungsbild von bytepix zu verändern:

Ein Layout verändern Sie, indem Sie ein vorhandenes Layout unter dem gleichnamigen Hauptmenüpunkt duplizieren, anpassen und abschließend dem Album zuordnen.

Im Gegensatz zu älteren Versionen von bytepix können Sie jetzt überall Bildchen in den Formaten GIF, JPEG und PNG (Dateinamen enden in .gif, .jpg oder .png) als Layout-Elemente hochladen. Vor allem mit dem .png-Format kann man interessante Effekte erzielen, da es in allen modernen Browsern echte Alpha-Kanal-Transparenzen erlaubt. In den überarbeiteten Layouts macht bytepix hiervon bereits Gebrauch.

Logos

Die fünf überarbeiteten Standard-Layouts von bytepix sind jetzt auf ein Logo-Format von 180x90 Pixel ausgelegt (rechtes Logo in Bild 1, weisser Rahmen). Wie gehabt laden Sie Ihr vorbereitetes Logo im Menü "Fotograf" und dort unter "Logo & Loginseite" hoch. Ab sofort können Logos auch im .png-Format eingesetzt werden. Wichtig ist die Größe des Logos in Pixeln. Angaben in "cm" oder "dpi" sind für das Web nicht relevant.

Größere Logos oder solche mit einem anderen Seitenverhältnis sind selbstverständlich ebenfalls möglich. Meist müssen hierfür die Menü-Buttons im Layout verschoben werden. Buttons verschiebt man, indem man eines der Standard-Layouts dupliziert, im Duplikat die "Element-Positionen" verändert und dann das neue Layout den Alben zuordnet. Im Bild 1 auf der linken Seite sehen Sie das Untermenü zum Punkt Layout und dort auch den Eintrag "Element Positionen".

Im gleichen Menü finden Sie weiter unten den Menüpunkt "Weitere Buttons & Logo". Hier können Sie ein weiteres Logo ins System hochladen und zwar eines, dass nur im aktuellen Layout Verwendung findet. Das ist immer dann interessant, wenn Sie mehrere, unterschiedliche Layouts für Ihre Kunden einsetzen möchten.


Bild 1: Standard- und layoutspezifisches Logo

Mit bytepix Version 2.9.2 sind nun also ein Standard-Logo und layoutspezifische Logos möglich. Damit nicht genug, das Logo kann auch auf der rechten Seite eines Layouts plaziert werden, wie im schwarzen und weissem Standard-Layout gezeigt. Schauen Sie sich doch einmal an, wie das dort gemacht wird, indem Sie eines der beiden Standard-Layouts duplizieren und sich die Element-Positionen ansehen. Das Logo besitzt eine relativ große X-Koordinate. Ausserdem ist ihm eine Breite und Höhe vorgegeben. Innerhalb des so definierten Kastens wird das Logo rechts ausgerichtet. Letzteres merken Sie erst, wenn Sie ein kleineres Logo verwenden. Ein größeres Logo wird durch den Kasten beschnitten. Ohne Breiten- und Höhen-Angabe ist der Kasten so groß wie das Logo, das Logo sitzt dann quasi links oben im Kasten.

Hintergrundbilder, Hintergrundbilder und noch mehr Hintergrundbilder …

Sie wissen es selbst am Besten, ein Bild kann ganz besondere Stimmungen erzeugen und genau darauf zielen die neuen bytepix-Layouts ab:
Verändern Sie die Stimmung im Kundenteil durch Einsatz Ihres Bildmaterials!

Bitte beachten Sie, dass die folgenden Screenshots der Erläuterung dienen und deshalb alles andere als eine schöne Stimmung erzeugen. Diesen Teil der Kreativität überlassen wir Ihnen. Wir zeigen hier nur, wie es gemacht wird.

Bild 2. Zentrierter Inhalt im Browserfenster

Ein Hintergrundbild im Wrapper-<div> wird rechts abgeschnitten, wenn Sie seine Breite zu klein wählen. Das Bild im Fensterhintergrund "(Hintergrund der Seite" genannt) "skaliert" hingegen mit der Größe des Browser- Fensters und zwar so, dass das Fenster immer gefüllt ist. Deshalb zeigt die Klappliste neben dem Button "hochladen" auch den Wert "füllend" an und nicht wie bei den anderen "no-repeat".

Wrapper-<div> und Seiten-Hintergrund

In den neuen Layouts sitzt der eigentlich Inhalt, den Ihr Kunde sieht, zentriert im Fenster des Browsers. Im Bild 2 links ist dies die graue Fläche im Hintergrund, der sogenannte "Wrapper-<div>", der im gezeigten Beispiel auf einem rotem Hintergrund des Browser-Fensters liegt.

In einem eigenen Layout können Sie unter den "Layout Einstellungen" und dort unter "Bilder & Buttons" entweder eine Farbe für den Wrapper- und den Seiten-Hintergrund vorgeben und/oder je ein Bild hochladen.

Unter den "Element Positionen" finden Sie ganz unten ein neues Feld, in welchem Sie die Breite des Wrapper-<div> vorgeben. Dies zeigt das folgende Bild 3.

Breite des wrapper-<div>

Bild 3. Breitenvorgabe des Wrapper-<div>

Seitenblock und überlagerter Seiten-Hintergrund

Der "Wrapper-<div>" (grau im Bild2) liegt über dem "Hintergrund der Seite" (rot im Bild 2). Beachten Sie jedoch, wenn Sie kein ausreichend hohes Bild für den Wrapper-<div> verwenden (nur bei "no-repeat" ), so erfolgt im Rest der Seite nach unten die Ausgabe der Farbe des Wrappers. Lassen sie das Farbfeld beim Wrapper-<div> leer, so scheint der "Hintergrund der Seite" durch.

--

Bei der Fortsetzung eines Bestellvorgangs, also bspw. im Warenkorb oder im Bestellformular sieht der Kunde einige Textpassagen. Bei stark strukturierten Hintergrundbildern sind diese Textpassagen unter umständen nicht mehr lesbar. Abhilfe kann hier ein weiterer Hintergrund schaffen, der sozusagen hinter der Schrift aber vor dem Wrapper-<div> liegt: der Hintergrund des sogenannten "Seitenblocks".

Das folgende Bild 4 zeigt einen Kniff, der oft eine besonders schöne Wirkung erziehlt. Als Hintergrundbild des "Seitenblocks" wurde ein einfarbig weisses, halbtransparentes 10x10 Pixel großes .png-Bild hochgeladen. Die Wiederholung wurde auf "repeat", also in x- und y-Richtung wiederholend, eingestellt. Mit dem halbtransparenten Bildchen wird so die gesamte Fläche des Seitenblocks gefüllt. Breite und Startposition wurden im untermenü "Element-Positionen", ähnlich wie in Bild 3 gezeigt, auf 700 Pixel und unterhalb des Menü-Abschnitts eingestellt. Die Höhe wird vom Inhalt des Seitenblocks bestimmt.

Bild 4. Der "Seitenblock" mit halbtransparentem Hintergrund.

Bild 4 zeigt aber noch ein weiteres Hintergrundbild: Ursprünglich ist das gezeigte Layout aus dem "weissen Layout" entstanden. Jedoch ohne dass ein Duplikat des Layouts erzeugt wurde. Ab bytepix 2.9.2 können Sie für jedes Album ein eigenes Hintergrundbild für das Browser-Fenster hochladen. Es wird anstelle des "Hintergrunds der Seite" ins Layout eingebaut, überlagert also das entsprechende Bild im Layout, das für das Album eingestellt wurde.

Bild 5. Den Upload für das den normalen Layout-Hintergrund überlagernde Bild nehmen Sie bei den Basis-Einstellungen des Albums vor.

Der neue Hintergrund ist immer skalierend und füllend, eine Wahlfreiheit für das "repeat" besteht nicht.

Im "weissen" Layout, wie in Bild 4 gezeigt, besteht der Hintergrund des Wrapper-<div> nur aus einem Bild, das den Hintergrund des Hauptmenüs oben bildet. Der Wrapper besitzt keine Farbe.

Hintergrundbild für die Login-Seite

Die Login-Seite Ihrer bytepix-Installation sehen die Besucher aller Alben. Es liegt also nahe, dass diese Seite ein eigenes Hintergrundbild erhalten kann.

Normalerweise besitzt die Login-Seite kein Hintergrundbild, sondern wird mit einer Farbe gefüllt, die Sie unter "Fotograf" / "Logo- und Login-Seite" festlegen können. Sie bildet auch den Hintergrund für den gezeigten Text. In diesem Untermenü laden Sie übrigens auch das Hintergrundbild für die Login-Seite auf Ihren Web-Server hoch.

Das Hintergrundbild skaliert mit dem Browser-Fenster und füllt es immer vollkommen aus.

Die Breite des weissen Streifens im Bild 6 bestimmen Sie indirekt durch die Breite des Bildes, das in diesen eingebunden wird. In Bild 6 besteht dieses Bild aus dem Schriftzug "bytepix" und viel Weiß oberhalb. Tauschen Sie das Bild im Untermenü "Logo- und Login-Seite" gegen eine eigenes aus. Die minimale Breite des Streifens ist 400 Pixel, auch wenn Ihr Bild kleiner ausfallen sollte.

Bild 6. Login-Seite mit Hintergrund-Bild