Layout anpassen
Grundsätzliches
Mit der webdeveloper-Toolbar geht das Anpassen von Styles ganz, wirklich ganz einfach:
Erst wählt man „Anzeigen der ID und Class-Details“. Dann sieht man in gelben Boxen den Style (kommt immer vor dem Objekt). Will man dann ein Suchfeld modifizieren, findet man die Beschriftung "searchi", das vor „Artikel-Nr. finden“ steht und damit diese Box bezeichnet. Wählt oben in der Toolbar unter CSS die Funktion CSS-Editieren aus und dann blendet links ein Fenster mit den Style-Dateien auf. Man wählt esm.css (das ist aus der style_etool.css generierte CSS Datei am Server) und sucht hier nach „.searchi“. Unter input.searchi findet man den Style. Hier hinterlegt ist die jetzt manipulierte Farbe #ff0000 für die obere Linie, und kaum verlässt man die Zeile mit dem Cursor wird die Anzeige sofort aktualisiert. D.h. die Wirkung veränderter Styles ist sofort sichtbar.
Passt alles, mache ich ein sichern der Datei (Diskettensymbol, links oben) unter dem Namen style_etool.css (im Design-Verzeichnis). Und damit sind die modifizierten Styles im Design eingebunden. Dabei wird aber die Definition von Farben auf die aktuelle Farbauswahl fixiert. Denn die CCML-Befehle sind nun bereits aufgelöst. Alternativ überträgt man die Änderung an der entsprechenden Stelle in die orginal-Datei des Designs. Das ist aufwendiger, aber das Design bleibt für Änderungen flexibler.
Sitemap layouten
In Blatt <ReadMe> ist ein Set mit weiteren Icons, die eine kleinere Ausgabe und engere Zeilenabstände erlauben. Die Icons öffnen sich, wenn man über sie fährt, die Zeile wird markiert und es erscheint sogar der Abstract, wenn das so im Blatt e-sitemap konfiguriert war.
Das Design für die einzelne Zeilen ist in style_etool.css an Anfang gespeichert. Ein Online-Editieren wird mit web-Developer-Toolbar ganz einfach. Hier kann man die CSS Styles öffnen, editieren und die Wirkung ist sofort sichtbar.
Searchindex Ausgabe layouten
In dem Bild links sieht man die Styles und CSS-Eigenschaften, die auf verschiedene Objekte wirken. Die graue Box wird durch „.gefunden“ definiert. Der Relevanz-Balken mit der Class-Eigenschaft „.relevanz“ gestaltet, dann folgt die .dachzeile, das .suchimg, das mit float positioniert wird usw.
Der Abstract folgt, die Beschreibung der Fundstelle und die Textstelle mit den gefundenen Textpassagen. Mit .insgesamt wird die Fusszeile gestaltet, die mit einem Link (rot) den Abschluss bildet.
Shop2date User haben dann noch mit .artikel und .werte weitere Objekte zur Ausgabe und zum Layout.
Die Bilder werden automatisch dazu gelinkt und auf eine maximale Größe mit Breite und Höhe reduziert.
FX Rates einstellen
Bei der Ausgabe der FX-Rates werden nicht alle FX:Rates der EZB ausgegeben. Das macht auch keinen Sinn ca. 30 Währungen aus Albanien und Herzegowina immer anzuzeigen. Je nach Shop, mag das aber durchaus anders sein, so dass manchmal gerade eine Währung fehlt:
In dieser Darstellung sieht man in Spalte A und B die Währung und den Kurs. Die Reihenfolge stammt von der EZB. Die Reihenfolge kann verändert werden und die Auswahl der Währungen festgelegt werden. In Spalte C stehen die auszugebenden Währungen in der Reihenfolge, in der sie angezeigt werden. In diesem Fall gibt es immer 6 Währungen.
Da es immer das gleiche Fixing gibt, kann es nicht sein, dass eine Währung mal fehlt, oder „überraschend“ neue Währungen hinzukommen.
Neben der Währung und der Langbezeichnung der Währung wird auch noch das Währungsland ausgegeben.
Dies lässt sich auch noch „customizen“ Im gleichen Blatt findet sich in den Spalten H bis K eine Standardtabelle mit Grunddaten:
Hier sind ggf. mehr Währungen aufgeführt, als nötig, aber damit ist man für Erweiterungen vorbereitet.
Hier kann man die Formeln für die Ländernamen und Währungsnamen überschreiben. Haben mehrere Länder die gleiche Währung dann zieht eine Formel das zweite Land in die erste Zeile hoch und trennt die Länder mit Bindestrich.
Der Ausgabecode ist versteckt in Spalte D. Dieser Code (aus Formeln aufgebaut) wird in s2drates.php an der Stelle eingefügt, in der „#include rates“ am Anfang einer Zeile steht. In die Spalte A und B werden die Daten aus dem Internet geschrieben.
Jetzt kann man ausgehend von der aktuellen Daten in Spalte A und B und der Standard-Tabelle in H bis K eine beliebige Codesequenz mit Excel aufbauen, die in einen PHP-Code eingefügt wird, der das spätere Fenster „Wechselkurse anzeigen“ komplett beschreibt. D.h. die komplette Ausgabe wird mit s2drates.php und dem Excel.Ergebnissen aus Spalte D festgelegt.
TagCloud layouten
Hier ein paar Beispiele über Tag-Clouds in der Kontextspalte:
