Child pages
  • Changing icons
Skip to end of metadata
Go to start of metadata

Changing icons

There are two different approaches to change icons:

Replace icons

If you want to change some icons you can simply overwrite the icon images placed at public/css/yourTheme/icons using the same file name. There are icons with a fixed size located in that folder. Some icons are available in two different sizes (16px and 20px) which are placed inside sub folders. If you change them remember to change both sizes (if they are present in both sub folders).

Change mapping

oTranCe uses a mapping table for icons. It is located at public/css/yourTheme/icons/icon.ini and looks like this:

public/css/yourTheme/icons/icon.ini
 [icons]
; IconName used in Helper getIcon => filename of pic
Admin           = Admin.png
ajax-loader     = ajax-loader.gif
Archive         = compress.png
ArrowLeft       = arrowleft.gif
...

It uses the view helper

View helper getIcon()
getIcon('name', 'title', $size)

all over the application. If you are not sure which icon is used in a certain view you can take a look at the affiliated view in application/views/scripts/controllerName/actionName.phtml. You can guess the controller and action name easily by simply taking a look at the called url when browsing oTranCe. E.g. the url /settings/index referrs to the view application/views/scripts/settings/index.phtml.

If you see a size as the third parameter in the call the icon is taken from the sub folder, otherwise the icon is taken from the icon main folder.

In general you can guess the location from the filename: if the first letter of the filename is in lowercase it is a fixed size icon, otherwise it is an icon that is located in one or in both of the sub folders.

Although it shouldn't be necessary you can change the mapping of an icon to another filename. Doing so causes oTranCe to use the new file name all over the application. Since the mapping is only valid in the namespace of your theme, you are able to change it without harming other themes.