Icons vom Sprite verwenden
Für das Backend gibt es ca. 300 verschiedene Icons, die auf 2-3 verschiedene sprites verteilt sind. Das spart beim Aufruf jede Menge Requests und verkürzt somit die Ladezeit einer Backendseite.
Es empfiehlt sich, bei der Entwicklung eines neuen Moduls auf diese Technik zurückzugreifen. Es ist ja auch einfach und geht schnell.
Wir ordnen dem IMG-Tag zwei Klassen zu. Das könnte etwa so aussehen:
Die erste Klasse (im Bsp. 'ti_flags') ordnet dem IMG-Tag ein Sprite als Hintergrundgrafik zu, nämlich das Sprite mit den ganzen bunten famfam-Flaggen. Die zweite Klasse ('ti_flags_de') gibt ausschließlich die Position des icons auf dem sprite an.
Das dazugehörige CSS findet sich unter:
Hier kann man einen Einruck gewinnen, wie es geht. Wenn man eigene icons dazubasteln möchte, sollte man die Styles auf jeden Fall in der eigenen App ablegen, damit alles update-fähig bleibt.
Die sprites des Backends finden sich im Ordner:
Tipp: Gelegentlich ist es nötig, ein Icon besonders zu kennzeichnen, z.B. durch ein Schloss, um zu symbolisieren, dass der Link auf den diesem Icon eine verschlüsselte Verbindung verknüpft. In diesem Fall empfielt es sich das transparente GIF durch ein transparentes PNG mit einem kleinen Schloss darauf zu ersetzen.
Es empfiehlt sich, bei der Entwicklung eines neuen Moduls auf diese Technik zurückzugreifen. Es ist ja auch einfach und geht schnell.
So geht es:
Statt des 16x16px icons verwenden wir ein transparentes GIF mit der selben Größe und geben dem IMG-Tag durch eine Klasse einen Hintergrund. Das transparente GIF sollte immer das selbe sein. Deswegen haben wir das GIF als Config-Variable angelegt, die mit folgender Methode geholt wird.
<?php
Broker::getConfig()->getSection('RsModule_Menu')->('tree_iamge')
?>
Wir ordnen dem IMG-Tag zwei Klassen zu. Das könnte etwa so aussehen:
<img class="ti_flags ti_flags_de" src="..." alt="" />
Die erste Klasse (im Bsp. 'ti_flags') ordnet dem IMG-Tag ein Sprite als Hintergrundgrafik zu, nämlich das Sprite mit den ganzen bunten famfam-Flaggen. Die zweite Klasse ('ti_flags_de') gibt ausschließlich die Position des icons auf dem sprite an.
Das dazugehörige CSS findet sich unter:
RedSparkCore/latest/templates/kb_backend/styles/03_plugins/menu_tree.css
Hier kann man einen Einruck gewinnen, wie es geht. Wenn man eigene icons dazubasteln möchte, sollte man die Styles auf jeden Fall in der eigenen App ablegen, damit alles update-fähig bleibt.
Die sprites des Backends finden sich im Ordner:
RedSparkCore/latest/templates/kb_backend/static/
Tipp: Gelegentlich ist es nötig, ein Icon besonders zu kennzeichnen, z.B. durch ein Schloss, um zu symbolisieren, dass der Link auf den diesem Icon eine verschlüsselte Verbindung verknüpft. In diesem Fall empfielt es sich das transparente GIF durch ein transparentes PNG mit einem kleinen Schloss darauf zu ersetzen.
