Werkzeug Icons
Dieses Kapitel zeigt, wie Werkzeug-Icons im WebOffice core Client adaptiert werden können. Manche Icons werden in der Projektkonfiguration definiert, andere können über die Datei weboffice_user.css durch eigene Icons ersetzt werden.
Werkzeug-Icons in der WebOffice Projektkonfiguration ersetzen
Wenn die Werkzeuge Web-Integration - generisches Werkzeug oder Geoverarbeitung bzw. Hyperlink oder Integration (Aufruf VON WebOffice) als Schaltfläche konfiguriert werden, kann eine spezifische Bilddatei als Icon im Client definiert werden.
Werkzeug-Icons in der Datei weboffice_user.css ersetzen
Alle anderen Werkzeug-Icons sind über eine CSS-Datei definiert. Falls diese standardmäßigen Icons durch eigene ersetzt werden sollen, ist es möglich eigene CSS-Definitionen in der Datei weboffice_user.css in C:\Tomcat\webapps\WebOffice\pub\client_core\styles\ zu speichern. Folgen Sie den nachfolgenden Schritten, wie die korrekte Klasse, die das Werkzeug-Icon definiert, identifiziert und sowohl für große als auch kleine Icons ersetzt werden kann.
1.Identifizieren der richtigen Klasse, die das Icon definiert
Verwenden Sie die Browser-Entwicklungswerkzeuge (bei geöffnetem Browser F12 drücken), um die Icon-Klasse zu identifizieren. Die WebOffice core Client Klassen beginnen üblicherweise mit icon. Im unteren Beispiel können Sie sehen, wie das Zoom In Werkzeug geändert wird. Im WebOffice core Client gibt es für jedes Werkzeug-Icon eine große (32x32px) und eine kleine (16x16px) Version. Verwenden Sie das Lupensymbol der Browser-Entwicklungswerkzeuge, um die Icon-Klasse zu identifizieren.
Beispiel: Zoom In Werkzeug
Klasse, welche die große Icon-Version beschreibt: iconzoomin
Klasse, welche die kleine Icon-Version beschreibt: iconzoomin_sm
Verwendung der Lupe, um die Klasse des Werkzeug-Icons zu identifizieren
2.Erstellen einer eigenen Icon png Datei
Im zweiten Schritt müssen die eigenen Icons in einem für die WebOffice 10.9 SP2 Anwendung zugänglichen Pfad abgespeichert werden (z.B. C:\Tomcat\webapps\<WebOffice-Anwendung>\pub\images\).
•Bearbeiten der Datei weboffice_user.css, um das standardmäßige Werkzeug-Icon zu ersetzen.
•Definieren Sie die gewünschte neue Icon Klasse in der Datei weboffice_user.css, um das standardmäßige Werkzeug-Icon durch eigene zu ersetzen.
|
•Die anzupassende CSS-Datei ist als _weboffice_user.css gespeichert. Entfernen Sie das _"-Zeichen zu Beginn bei der ersten Verwendung. •Die Anpassung der CSS-Definitionen sollte ausschließlich in der weboffice_user.css erfolgen, um die individuellen Einstellungen des WebOffice core Client leicht rückgängig machen zu können. |
Eigene Klassen für das Werkzeug Zoom In
3.Browser Cache löschen
Es ist nötig, den Browser Cache zu leeren, um das neue Icon im WebOffice 10.9 SP2 Projekt anzuzeigen.
Neues Werkzeug-Icon im WebOffice core client
