Style

So erstellen Sie Ihr eigenes Design (alt)

Dieser Eintrag beschreibt das Erstellen eines eigenen Designs mit page2flip bis einschließlich Version 2.4. Wie Sie seit page2flip 2.5 ganz einfach mit dem smartDesign Editor ein eigenes Design erstellen können, lesen Sie hier.

page2flip bietet Ihnen die Möglichkeit nicht nur das Blätterdokument an sich zu gestalten, sondern sogar den Reader optisch nach Ihren Wünschen anzupassen. Laden Sie sich dazu die folgende Vorlage hier herunter und entpacken Sie diese auf Ihrem Rechner.

Die settings.xml

Nachdem Sie die Datei heruntergeladen und entpackt haben, öffnen Sie die Datei und suchen Sie nach der settings.xml, die Sie mit einem beliebigem Editor öffnen, um Sie bearbeiten zu können. Schon auf den ersten Blick sollten Sie sehen, dass wirklich jede einzelne mögliche Änderung gründlich kommentiert worden ist, was Ihnen die Arbeit erheblich erleichtern sollte. Haben Sie einen Editor gewählt der den Code als solchen erkennt (z.B. Notepad++) erkennen Sie auch an der Formatierung, welche Codeteile zueinander gehören.
Im ersten Codeblock können Sie das page2flip Logo mit einem eigenen Logo austauschen und dieses mit einem Tooltip und einen Link versehen. Dabei sollten Sie, um eine scharfe Darstellung Ihres Bildes zu garantieren, die Höhe (height) und Breite (width) Ihres Bildes angeben. Beachten Sie unbedingt, dass Sie für eine wirklich gute Darstellung Ihr Logo in doppelter Größe anlegen sollten, um auch auf Retina Displays optimale Bildqualität zu liefern. Soll Ihr Bild also 300 Pixel hoch angezeigt werden, so müssten Sie bei “height” 600 eintragen, und auch das Logo entsprechend groß anlegen. Sie können natürlich auch keine Verlinkung setzen, indem Sie bei “link” nichts eingeben. Außerdem können Sie dem Splash-Screen eine eigene Hintergrundfarbe geben.

Die Einstellungen

Sollten Sie auch den Stil Ihrer Hotspots ändern wollen, so beachten Sie bitte, dass Sie dies seit Version 2.2 direkt im Hotspot Editor einstellen können.
Von Zeile 83 bis 95 können Sie das Hintergrundbild des Viewers Ihres Blätterdokumentes einstellen und ausrichten. Auch dieses Bild können Sie verlinken und mit einem Tooltip versehen.

Einstellungen Hintergrundbild

Eine neue, ab Version 2.2, verfügbare Funktion ist die Möglichkeit einen direkten Zurückbutton auf das Inhaltsverzeichnis zu definieren. Dazu müssen Sie in Zeile 28-30 gehen. Dort ersetzten Sie das “Off” durch ein “On” und geben zwischendie Seite an, auf der sich Ihr Index befindet.

Zurückbutton einbauen

Die neue Version von page2flip bietet Ihnen aber auch noch weitere neue Sonderfunktionen. Sie können z.B. zwei Seiten nebeneinander legen, um Sie besser miteinander vergleichen zu können, auch wenn sich eigentlich mehrere Seiten zwischen Ihnen befindet. Dazu müssen Sie nur die Funktion “enableCompareView” in Zeile 36 von “off” auf “on” setzen.

Vergleichen Sie Seiten

Gleichzeitig ist es Ihnen nun auch möglich, wenn Sie die Funktion “createPDFFromSelected” in Zeile 33 von “off” auf “on” stellen, die zuvor ausgewählten Seiten als neue PDF Datei herunter zu laden. Anders gesagt: Sie ermöglichen es Ihren Lesern, selbst zu entscheiden, welche Seiten Sie als zusammenhängendes PDF herunterladen möchten.

Seiten auswählen

Sollten Sie beim Blättern Ihres mobilen Dokumentes immer wieder den Eindruck haben, dass die Seiten nicht so gestochen scharf dargestellt werden, wie Sie es gerne hätten, dann haben Sie nun die Möglichkeit dies zu ändern. Beachten Sie aber unbedingt, dass dies zu Lasten der Schnelligkeit geht, weswegen wir Ihnen eher davon abraten die Funktion zu aktiviere. Möchten Sie es jedoch dennoch tun, so gehen Sie in Zeile 58 und ändern Sie das “off” in ein “on” um. Mit dieser Einstellung werden die Seiten Ihres Blätterdokumentes nicht mehr im Bild-, sondern im PDF Format angezeigt (nur auf dem iPad und iPhone).

Blätterdokument als PDF anzeigen

Wollen Sie auf die Schnelligkeit Ihres Dokumentes nicht verzichten, aber auch nicht wirklich Abstriche in der Darstellungqualität machen, so können Sie mit der “mobileUsePDFinZoom” Funktion Ihre Leser glücklich machen, indem Sie Ihnen eine gestochen scharfe Ansicht im Zoom ermöglichen. Sobald Ihr Leser eine Seite zoomt, wird nicht mehr ein Bild angezeigt, sondern eine PDF (nur auf dem iPad und iPhone). Die Funktion finden Sie in Zeile 61, auch hier wechseln Sie einfach von ‘off’ auf ‘on’.

Zoom einstellungen.

Die preload.css

Außer dem Branding selbst, können Sie auch die Farbe des neu eingefügten Preloaders anpassen. Gehen Sie dazu über “style” in den “css” Ordner und öffnen Sie dort mit dem Editor die “preloader.css” Datei. Ersetzen Sie dort einfach überall “#2187e7″ durch Ihren eigenen Farbwert. (Die Änderung müssen Sie an insgesamt 4 Stellen durchführen. Zeile: 24, 29, 41 und 46).

Farben Preloader

Da es sich um einen CSS3 Preloader handelt und einige Browser noch nicht auf CSS3 aufgerüstet haben, wird bei diesen Browsern eine GIF Animation als Preloader angezeigt. Sollten Sie diesen anpassen wollen, so müssen Sie eine eigene GIF Datei erstellen und diese unter dem Namen ‘loading.gif’ in den Ordner ‘backgroundImages’ kopieren.

Die style.xml (Flash Viewer)

Die style.xml finden Sie im gleichen Ordner, wie die settings.xml, öffnen Sie auch diese mit einem Editor, um Sie bearbeiten zu können. In der style.xml können Sie globale Änderungen, wie das Hintergrundbild Ihres Viewers, setzen. Die für den normalen Nutzer interessantesten Einstellungsmöglichkeiten finden Sie gleich oben in den ersten Blöcken. Im allerersten Block können Sie, wie schon erwähnt, Hintergrundbild/farbe festlegen oder auch den Schriftstil im Viewer.

Einstellungen Flash Viewer

Die mobile style.css (HTML5 Viewer)

Auch Ihre mobile Version können Sie noch gezielter anpassen. Öffnen Sie dazu sie style.css im mobil/css Ordner. In Zeile 3 können Sie z.B. die Hintergrundfarbe des Viewers ändern oder in Zeile 23 die Farbe der Fortschrittsanzeige. Sie können natürlich auch die anderen Sachen, wie gewohnt anpassen, fügen Sie aber bitte keine eigenen Definitionen hinzu, da wir sonst nicht für ein funktionierendes Blätterdokument garantieren können.

Einstellungen für Mobile Geräte

Ein ZIP-Archiv erstellen

Wir sind jetzt mit den Anpassungen soweit fertig und müssten unser Design jetzt nur noch für den Import in page2flip vorbereiten. Dazu müssen wir es eigentlich nur in ein ZIP-Archiv umwandeln, also “verpacken”. Bitte achten Sie jetzt aber unbedingt darauf, dass Sie auf der richtigen Ebene beginnen. Am einfachsten ist es, wenn Sie es genauso machen wie ich: Nutzen Sie WinRAR und wählen Sie die Dateien “style.xml”, “buttonStyle.xml”, “settings.xml” und den Ordner “style” aus. Jetzt klicken Sie mit der rechten Maustaste darauf und wählen “Zum Archiv hinzufügen” aus. In dem darauf erscheinenden Fenster klicken Sie dann bei “Archivformat” auf “ZIP”. Und schon ist unser page2flip Design fertig zum Import!

Einstellungen Verpacken

5. page2flip Design importieren

Wir sind kurz vor dem Ziel! Nur noch ein kleiner Schritt, und Ihr eigenes Design ist einsatzbereit! Melden Sie sich bei page2flip an und gehen Sie auf den Menüpunkt “Einstellungen”. Unter “Erweiterte Einstellungen” finden Sie jetzt den Punkt “Themes”. Klicken Sie dort auf “New…”.

Design importieren

In dem sich nun öffnenden Formular geben Sie Ihrem neuen Design einen Namen und klicken dann auf “Durchsuchen”. Wählen Sie das ZIP-Archiv aus, das wir eben erstellt haben, und klicken Sie auf “Datei Senden”. Nachdem Ihr Design importiert wurde, brauchen Sie nur noch einmal zu speichern – fertig!

6. Eigenes Design nutzen

Die Spannung steigt … Wir sind jetzt so weit, unser neues Design testen zu können. Wählen Sie unter “Blätterdokumente” ein Blätterdokument aus und stellen Sie dann in dem Dropdown unter “Design” Ihr eben importiertes Design ein. Bei mir heißt es einfach “beautydesigner.com”

Style

Wenn Sie jetzt auf “Vorschau” klicken, können Sie schon Ihr Blätterdokument mir Ihrem eigenen Design testen!

7. Veröffentlichen

Wir sind fertig! Veröffentlichen Sie jetzt und bewundern Sie ein elegantes Blätterdokument – mir Ihrem eigenen, ganz individuellen Design!

Es hat bei Ihnen nicht auf Anhieb geklappt? Bitte prüfen Sie unbedingt, ob Sie das ZIP genauso erstellt haben, wie im 4. Schritt beschrieben.

0 Antworten

Hinterlassen Sie einen Kommentar

Wollen Sie an der Diskussion teilnehmen?
Wir freuen uns über ihren Beitrag!

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>