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.

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 dasselbe 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 Eindruck gewinnen, wie das Vorgehen aussieht. Wenn man eigene Icons ergänzen 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 eine verschlüsselte Verbindung verknüpft. In diesem Fall empfiehlt es sich das transparente GIF durch ein transparentes PNG mit einem kleinen Schloss darauf zu ersetzen.

Kuborgh GmbH

Hamburg 040 819 773 770 Köln 0221 276 66 96 info@kuborgh.de www.kuborgh.de

RedSpark Community

RedSpark Community

Community Website
RedSpark Apps

RedSpark Apps

Zur Übersicht
RedSpark Download

RedSpark Basispaket

Zum Download
Key facts