Custom icons in mobile application

Contains tips for configurators working with Aware IM
Post Reply
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Custom icons in mobile application

Post by hpl123 »

Hi all,
Here is a tip on how to use a custom icon (i.e. which ever icon you want) in AwareIM mobile applications.

1. Decide which icon you want to use

2. Create folder "img" in the same directory as the theme css
(C:\AwareIM\Tomcat\webapps\AwareIM\sencha-touch-2.3.1\resources\css\)

3. Place icon image in img folder and write down the name of the image e.g. "myicon.png"

4. Decide which theme you want to use for example "Sencha Touch" theme (this fix works on all mobile themes).

5. Open the css file of the theme you want to use (from folder: "C:\AwareIM\Tomcat\webapps\AwareIM\sencha-touch-2.3.1\resources\css\"). In this example I am using the "Sencha Touch" theme and the file i´m changing is: "C:\AwareIM\Tomcat\webapps\AwareIM\sencha-touch-2.3.1\resources\css\sencha-touch.css"

6. Add the following to the theme css file (in this example again I ´m using the Sencha Touch theme so the file to add to is "sencha-touch.css". This code segment represents 1 icon and you need to add 1 of these segments per icon and there are 2 things you need to change per icon. 1) Change the "class name" in this example, this is where it currently says ".myicon", change this to a name of your choosing. 2) Change the image path to the icon you want to use. NB: This is a temporary fix and the ideal would be to minimize the code below
and add it then in the css file so this code below also is integrated in the 1 line of code.

.myicon { background-image:url(img/myicon.png) !important;
background-repeat: no-repeat;
background-position:center;
}


7. Go to your menu tab / tab section and type in "myicon" in the class name attribute.

8. Reload mobile app.
Henrik (V8 Developer Ed. - Windows)
Post Reply