Neues Design mit jQuerymobile Theme Roller erstellen

Vielen Dank an @acidrain für die Anleitung

Die Designs von smartVISU entstammen alle dem sog. ThemeRoller von jQuerymobile und lassen sich dort online erzeugen.

1. ThemeRoller Design anpassen/herunterladen

Das heutige Standard-Theme bei ThemeRoller entspricht recht genau dem früher als "holo-inspired" bekannten Design Theme. Dessen CSS-Dateien kann man im ThemeRoller herunterladen. Natürlich kann das Design dort vorher noch verändert werden. Das Ergebnis wird dann z.B. als "holo-inspiered" exportiert und die holo-inspired.css aus der Zip-Datei im Verzeichnis smartvisu/designs abgelegt. Da smartVISU CSS-Dateien "on the fly" minimiert, muss die holo-inspired.min.css nicht kopiert werden.

2. CSS-Datei anpassen

Es müssen noch ein paar smartVISU-spezifische Anpassungen ergänzt werden.

Für smartVISU Versionen nach v2.9.2 müssen die Vereinbarungen zur Farbgebung als Metadaten in den Kopfzeilen der CSS-Datei angegeben werden (jeweils mit einem * in der 1. Spalte):

@default	design_icon0	icons/sw/
@default	design_icon1	icons/bl/

Zudem müssen unabhängig von der SV Version am Ende der Datei noch Formate ergänzt werden. Am Besten klaut man von einem ähnlichen Design und passt bei Bedarf die Formatierung an. Zum holo-inspired Theme kann man ohne Änderungen aus dem ice.css den letzten Part in die holo-inspired.css hineinkopieren:

/* smartVISU
-----------------------------------------------------------------------------------------------------------*/
.icon0, a.ui-link {
stroke: #000;
fill: #000;
stop-color: #000;
}

.icon1, a.ui-link:hover, a.ui-link:active {
stroke: #5595c6;
fill: #5595c6;

stop-color: #5595c6;
}

.switch.icon1,
html .ui-btn.icon1,
[data-widget="basic.print"].icon1,
[data-widget="basic.symbol"] .icon1 {
color: #5595c6;
}

Zusätzlich sollte noch folgendes eingefügt werden, damit das smartVISU Logo seine originale Schriftart "Dosis" behält. holo-inspired nutzt ansonsten "Sans-serif".

.smartvisu {
font-family: Dosis;
}

3. Hardcoded Design-Vorgaben anpassen (bis einschl. Version v2.9.2)

Bis zur Version v2.9.2 gibt es noch ein paar hart-codierte Design-Vorgaben in smartVISU, die sich nicht konfigurieren oder per CSS anpassen ließen. Das ist in den nachfolgenden Versionen geändert, so dass keine Anpassungen mehr erforderlich sind.

3.a smartvisu/index.php

Die Abfrage nach dem holo-inspired Design muss in die index.php eingebaut werden. Wenn euer Design anders heißt bzw. andersfarbige Icons besser zu eurem Design passen, bitte natürlich auf eure Bedürfnisse entsprechend anpassen.

if (config_design == 'ice')
{
$twig->addGlobal('icon1', 'icons/bl/');
$twig->addGlobal('icon0', 'icons/sw/');
}
elseif (config_design == 'holo-inspired')
{
$twig->addGlobal('icon1', 'icons/bl/');
$twig->addGlobal('icon0', 'icons/sw/');
}
elseif (config_design == 'greenhornet')
{
$twig->addGlobal('icon1', 'icons/gn/');
$twig->addGlobal('icon0', 'icons/ws/');
}
else
{
$twig->addGlobal('icon1', 'icons/or/');
$twig->addGlobal('icon0', 'icons/ws/');
}

3.b smartvisu/pages/base/base.html

Bis zur SV-Version v2.9.2 bleibt bei einem hellen Design-Hintergrund das smartVISU-Logo und die Mini-Anzeige von Uhrzeit und Visu-Version in weißer Schrift. Abhilfe schafft, die Textfarbe von weiß (#fff) auf schwarz (#000) zu ändern:

<div class="ui-right">
<a href="javascript:window.location.href=window.location.href" style="text-decoration:none;color:#000;">
{{ lib.smartvisu() }}
<div class="mini">
{{ clock.miniclock('', lang('format','time') ~ ', ' ~ lang('format','day') ) }} v{{ config_version_full }}</div>
</a>
</div>

Alternativ können die beiden Zeilen <a href ...> und </a> entfernt werden. Diese Lösung ist in nachfolgenden Versionen standardmäßig umgesetzt.