{"id":61,"date":"2010-06-05T10:00:11","date_gmt":"2010-06-05T09:00:11","guid":{"rendered":"http:\/\/www.bytepix.de\/pressword\/?p=61"},"modified":"2018-04-16T20:18:18","modified_gmt":"2018-04-16T19:18:18","slug":"neue-layouts-fur-bytepix","status":"publish","type":"post","link":"https:\/\/bytepix.de\/pressword\/?p=61","title":{"rendered":"Neue Layouts f\u00fcr bytepix, das „gr\u00fcne“ Layout"},"content":{"rendered":"

Obwohl es nicht so schwierig ist, eigene Layouts f\u00fcr bytepix zu kreieren, wird diese M\u00f6glichkeit von unseren Kunden nur relativ selten genutzt. Grund genug f\u00fcr uns, Ihnen ein wenig zu zeigen, was mit bytepix so alles m\u00f6glich ist.<\/p>\n

Hinweis f\u00fcr das Update auf Version 2.9.2:
\nIn diesem Update wurden einige Ver\u00e4nderungen am Aufbau der Seiten vorgenommen. Die hier gezeigten zus\u00e4tzlichen Layouts k\u00f6nnen leider nicht vollst\u00e4ndig automatisch angepasst werden. Nehmen Sie ggf. Anpassungen am Hintergrundbild des „Wrappers“ und an der Hintergrundfarbe der „Seite“ vor.<\/em><\/p>\n

Im Folgenden zeigen wir Ihnen anhand vieler Screenshots, wie Sie z.B. das „gr\u00fcne“ Layout in bytepix integrieren.<\/p>\n

\"\"<\/a>

Bild 1: Das "gr\u00fcne" Layout f\u00fcr bytepix<\/p><\/div>\n

Weiter Layouts bieten wir in gr\u00f6\u00dferen Zeitabst\u00e4nden an. Zun\u00e4chst einmal das „gr\u00fcne“, „Braunton“- und „Foto“-Layout.<\/p>\n

Schritt 1<\/h1>\n
\"\"<\/a>

Bild 2: Layout ausw\u00e4hlen und duplizieren<\/p><\/div>\n

Zun\u00e4chst klicken Sie im Hauptmen\u00fc auf „Layout“ und w\u00e4hlen dann aus der Klappliste z.B. das Layout „Gras“ aus. Klicken Sie anschlie\u00dfend auf „duplizieren“ (1) um eine Kopie des Datensatzes dieses Layouts zu erzeugen.<\/p>\n

WICHTIG!<\/strong>
\nBitte verwenden Sie das Layout „Gras“ zum Duplizieren, da sonst eventuell Bilder des alten Layouts den Text einiger Menu-Buttons \u00fcberlagern. Sollten Sie dies feststellen, das Ergebnis sieht anders als die gezeigten Abbildungen aus, dann l\u00f6schen Sie die Bilder der entsprechenden Buttons im neuen Layout. Entsprechende Links zum L\u00f6schen finden Sie hochladen-Dialog beim entsprechenden Bild.<\/p>\n

Schritt 2<\/h1>\n
\"\"<\/a>

Bild 3: Parameter direkt \u00e4ndern und Name f\u00fcr das Layout vergeben<\/p><\/div>\n

Sie erinnern sich vielleicht, ein Layout besteht aus sehr sehr vielen Parametern. Damit Sie diese jetzt nicht alle einzeln \u00e4ndern, bzw. eingeben m\u00fcssen, gibt es seit Version 2.7 von bytepix ein neues Feature.
\nIn den Basiseinstellungen des Layouts finden Sie ganz unten einen Button (2) mit dessen Hilfe Sie die Parameter, die ein Layout definieren, direkt ver\u00e4ndern k\u00f6nnen. Diese Funktion nutzen wir, um alle Parameter in einem Rutsch ins System einzuspielen. Klicken Sie also auf „\u00e4ndern“ (2) und es erscheint folgende Ansicht.<\/p>\n

\"\"<\/a>

Bild 4: Parameter in einem Rutsch ersetzen<\/p><\/div>\n

Im gro\u00dfen, wei\u00dfen Feld (4) stehen alle Parameter in Rohfassung und k\u00f6nnen direkt ver\u00e4ndert werden.
\nWir l\u00f6schen zun\u00e4chst den kompletten Inhalt. Klicken Sie hierzu in das Feld (4) und w\u00e4hlen Sie den gesamten Inhalt mit <ctrl>-a (Mac: <apfel>-a) aus. Klicken Sie dann auf die <del>-Taste um den ausgew\u00e4hlten Text zu l\u00f6schen.
\nMarkieren Sie jetzt den folgenden Code, hier unterhalb dieser Beschreibung, und kopieren Sie ihn mit <ctrl>-c (Mac: <apfel>-c) in die Zwischenablage.<\/p>\n

\n
<?php \/*<\/address>\n
*name;value;<\/address>\n
layoutname;gruen;<\/address>\n
prozeile;4;<\/address>\n
prospalte;3;<\/address>\n
thefontface;Verdana, Arial, Helvetica, sans-serif;<\/address>\n
color1;#EEEEEE;<\/address>\n
color2;#EEEEEE;<\/address>\n
fontsizenormal;12;<\/address>\n
fontsizesmall;11;<\/address>\n
fontsizehead1;14;<\/address>\n
fontsizehead2;16;<\/address>\n
linkcolor;#8BcB4B;<\/address>\n
pricecolor;#8BcB4B;<\/address>\n
editlayout;layout_3;<\/address>\n
albumlinkcol;;<\/address>\n
basketlinkcol;;<\/address>\n
helplinkcol;;<\/address>\n
agblinkcol;;<\/address>\n
customerlogo_x;10;<\/address>\n
customerlogo_y;8;<\/address>\n
customerlogo_w;;<\/address>\n
customerlogo_h;;<\/address>\n
customerlogo_z;;<\/address>\n
sitetitle_x;194;<\/address>\n
sitetitle_y;10;<\/address>\n
sitetitle_w;;<\/address>\n
sitetitle_h;;<\/address>\n
sitetitle_z;;<\/address>\n
albumname_x;600;<\/address>\n
albumname_y;10;<\/address>\n
albumname_w;300;<\/address>\n
albumname_h;20;<\/address>\n
albumname_z;;<\/address>\n
albumlink_x;31;<\/address>\n
albumlink_y;112;<\/address>\n
albumlink_w;100;<\/address>\n
albumlink_h;20;<\/address>\n
albumlink_z;;<\/address>\n
basketlink_x;31;<\/address>\n
basketlink_y;174;<\/address>\n
basketlink_w;100;<\/address>\n
basketlink_h;20;<\/address>\n
basketlink_z;;<\/address>\n
helplink_x;31;<\/address>\n
helplink_y;236;<\/address>\n
helplink_w;100;<\/address>\n
helplink_h;20;<\/address>\n
helplink_z;;<\/address>\n
agblink_x;31;<\/address>\n
agblink_y;422;<\/address>\n
agblink_w;100;<\/address>\n
agblink_h;20;<\/address>\n
agblink_z;;<\/address>\n
firstlink_x;210;<\/address>\n
firstlink_y;44;<\/address>\n
firstlink_w;;<\/address>\n
firstlink_h;;<\/address>\n
firstlink_z;;<\/address>\n
prevlink_x;296;<\/address>\n
prevlink_y;44;<\/address>\n
prevlink_w;;<\/address>\n
prevlink_h;;<\/address>\n
prevlink_z;;<\/address>\n
nextlink_x;758;<\/address>\n
nextlink_y;44;<\/address>\n
nextlink_w;;<\/address>\n
nextlink_h;;<\/address>\n
nextlink_z;;<\/address>\n
lastlink_x;844;<\/address>\n
lastlink_y;44;<\/address>\n
lastlink_w;;<\/address>\n
lastlink_h;;<\/address>\n
lastlink_z;;<\/address>\n
pagerlinks_x;402;<\/address>\n
pagerlinks_y;72;<\/address>\n
pagerlinks_w;;<\/address>\n
pagerlinks_h;;<\/address>\n
pagerlinks_z;;<\/address>\n
overview_x;380;<\/address>\n
overview_y;820;<\/address>\n
overview_w;450;<\/address>\n
overview_h;;<\/address>\n
overview_z;;<\/address>\n
thumbs_x;158;<\/address>\n
thumbs_y;132;<\/address>\n
thumbs_w;;<\/address>\n
thumbs_h;;<\/address>\n
thumbs_z;;<\/address>\n
pageblock_x;170;<\/address>\n
pageblock_y;100;<\/address>\n
pageblock_w;756;<\/address>\n
pageblock_h;;<\/address>\n
pageblock_z;;<\/address>\n
pagebgcol;#595959;<\/address>\n
pageblockbgcol;#00121E;<\/address>\n
thumbnailbgcol;;<\/address>\n
menubuttoncol;;<\/address>\n
pagingbuttoncol;;<\/address>\n
showborder;nein;<\/address>\n
fontsizebutton;14;<\/address>\n
layout;layout_5;<\/address>\n
pagebgrepeat;no-repeat;<\/address>\n
pageblockbgrepeat;no-repeat;<\/address>\n
thumbnailbgrepeat;repeat;<\/address>\n
menubordersize;0;<\/address>\n
menubordercol;#999999;<\/address>\n
menuborderstyle;solid;<\/address>\n
pagingbordersize;0;<\/address>\n
pagingbordercol;#999999;<\/address>\n
pagingborderstyle;solid;<\/address>\n
pageblockbordersize;0;<\/address>\n
pageblockbordercol;#999999;<\/address>\n
pageblockborderstyle;solid;<\/address>\n
thumbnailbordersize;0;<\/address>\n
thumbnailbordercol;#CCCCCC;<\/address>\n
thumbnailborderstyle;dotted;<\/address>\n
menupad_t;3;<\/address>\n
menupad_r;0;<\/address>\n
menupad_b;2;<\/address>\n
menupad_l;0;<\/address>\n
pagingpad_t;0;<\/address>\n
pagingpad_r;0;<\/address>\n
pagingpad_b;0;<\/address>\n
pagingpad_l;0;<\/address>\n
pageblockpad_t;12;<\/address>\n
pageblockpad_r;12;<\/address>\n
pageblockpad_b;12;<\/address>\n
pageblockpad_l;12;<\/address>\n
thumbnailpad_t;0;<\/address>\n
thumbnailpad_r;0;<\/address>\n
thumbnailpad_b;0;<\/address>\n
thumbnailpad_l;0;<\/address>\n
rasterpad_t;0;<\/address>\n
rasterpad_r;0;<\/address>\n
rasterpad_b;50;<\/address>\n
rasterpad_l;38;<\/address>\n
fontsizehead;14;<\/address>\n
fontstylenormal;normal;<\/address>\n
fontstylehead;bold;<\/address>\n
fontstylebutton;bold;<\/address>\n
fontdecobutton;none;<\/address>\n
linkdeco;none;<\/address>\n
slideshowbtndiv_x;670;<\/address>\n
slideshowbtndiv_y;40;<\/address>\n
slideshowbtndiv_w;;<\/address>\n
slideshowbtndiv_h;;<\/address>\n
slideshowbtndiv_z;;<\/address>\n
preiselink_x;31;<\/address>\n
preiselink_y;298;<\/address>\n
preiselink_w;100;<\/address>\n
preiselink_h;20;<\/address>\n
preiselink_z;;<\/address>\n
freelink_x;31;<\/address>\n
freelink_y;360;<\/address>\n
freelink_w;100;<\/address>\n
freelink_h;20;<\/address>\n
freelink_z;;<\/address>\n
subalblist_x;31;<\/address>\n
subalblist_y;484;<\/address>\n
subalblist_w;130;<\/address>\n
subalblist_h;;<\/address>\n
subalblist_z;;<\/address>\n
*\/?><\/address>\n<\/blockquote>\n

Achten Sie darauf, dass Sie den gesamten Code markieren. Also inklusive der Zeichen „<?php \/*\" <\/code>am Anfang und „*\/?>\"<\/code> am Ende.<\/p>\n

Klicken Sie anschlie\u00dfend in das Feld (4), in Bild 4 gezeigt, und f\u00fcgen Sie den Inhalt der Zwischenablage mit <ctrl>-p (Mac: <apfel>-p) dort ein. Klicken Sie dann auf speichern (5) und anschlie\u00dfen auf \u00a0„zur\u00fcck“ (6).<\/p>\n

Ganz wichtig!
\nNach dem Klick auf „zur\u00fcck“ befinden Sie sich wieder in den Basiseinstellungen des Layouts wie in Bild 3 gezeigt. \u00c4ndern Sie dort den Namen des Layouts (3) Ihren W\u00fcnschen entsprechend ab und klicken Sie abschlie\u00dfend auf „speichern“ (3a). Das Speichern ist extrem wichtig, da dadurch aus den Parametern, die Sie gerade eingef\u00fcgt haben, das Layout generiert wird.<\/span><\/strong><\/p>\n

\u00dcbrigens, sollte sp\u00e4ter das neue Layout nicht wunschgem\u00e4\u00df erscheinen, hilft es manchmal, diesen Schritt zu wiederholen. Also, einmal auf „Albenliste“ klicken (zum Verlassen dieses Men\u00fcs), dann wieder auf „Layout“ klicken und das gerade bearbeitete Layout aus der Klappliste ausw\u00e4hlen und auf „\u00e4ndern“ klicken. Dann sollten Sie wieder hier in den Basis-Einstellungen sein. Wiederholen Sie dann Schritt 2.<\/span><\/strong><\/p>\n

Schritt 3<\/h1>\n

Durch das Einsetzen der Parameter in Schritt 3, sind alle Elemente, Farben, Schriften und Linien bereits an die richtige Position gebracht worden, bzw. haben die richtigen Werte erhalten. Was jetzt noch fehlt, sind die Bilder f\u00fcr Buttons und Hintergr\u00fcnde.
\nWir beginnen mit dem Hintergrund-Bild der Gesamtseite.<\/p>\n

Klicken Sie im Untermen\u00fc „Layout-Einstellungen“ auf den Eintrag „Hintergr\u00fcnde“ (7) unterhalb von „Bilder & Buttons“.<\/p>\n

\"\"<\/a>

Bild 5: Hintergrund-Bild hochladen<\/p><\/div>\n

Mit dem Button „hochladen“ (7a) erscheint der folgende Dialog zum Hochladen von Bildern.<\/p>\n

\"\"<\/a>

Bild 6: Ein Bild hochladen<\/p><\/div>\n

Dieser Dialog sieht f\u00fcr alle Hintergr\u00fcnde und Button-Bildchen \u00e4hnlich aus. Hervorgehoben wird jeweils welchen Typ eines Bildes Sie hochladen sollten: JPEG oder GIF.
\nWir haben Ihnen die Einzelbilder des Layouts in einer Zip-Datei zusammengestellt. Laden Sie sich diese zun\u00e4chst hier:\u00a0gruen_layout.zip<\/a> herunter und packen Sie sie auf Ihrem Rechner aus. Meist gen\u00fcgt es hierzu, die Datei doppelt anzuklicken.
\nIm entstehenden Ordner haben wir den Bildern Namen gegeben, die sinngem\u00e4\u00df den Beschriftungen in den „Bilder & Button“-Seiten entsprechen.<\/p>\n

Der Vorgang des Hochladens ist immer gleich. Zun\u00e4chst w\u00e4hlen Sie mit dem Button (8) die enstprechende Datei auf Ihrem Computer aus. Dann starten Sie den Hochladevorgang mit (9) (auf PCs ist die Beschriftung der Buttons (8) und (9) systembedingt anders). Wenn der Upload erfolgreich war, erscheint oberhalb der Buttons (8) und (9) das neue Bild.
\nDas Hochladen eines Bildes dauert unterschiedlich lange, je nachdem wie gut Ihre Internetanbindung ist und wieviel gerade im Netz los ist.
\nSollte sehr lange nichts geschehen, Ihr Browser aber vor sich hinwerkeln, dann hilft es manchmal, ein zweites Mal auf „upload“ (9) zu klicken. Diesen Trick aber bitte nur anwenden, wenn Sie sicher sind, dass das Bild eigentlich schon l\u00e4ngst hochgeladen sein sollte.<\/p>\n

Zur\u00fcck zum Menu und den anderen Hochlade-M\u00f6glichkeiten kommen Sie \u00fcber den Link „zur\u00fcck“ (10).<\/p>\n

Den beschriebenen Hochlade-Vorgang wiederholen Sie bitte f\u00fcr folgende Bilder der zip-Datei. Wir geben au\u00dferdem das jeweilige Untermenu an, in welchem Sie den zugeh\u00f6rigen Hochlade-Buttons finden.<\/p>\n

Inhalt von gruen_layout.zip<\/a>:<\/p>\n

„Hintergr\u00fcnde“<\/strong><\/p>\n