Options to modify a button icon
There are different ways to change the button icon(s):
- Same name and size, different icon: Substitution
- Different name or path, but still same size: Simple adjustment of the plugin.asul file
- New icon(s) with new size and/or shape and position: more complex change ot the plugin.asul file
Location of button icons
Within the gui/ folder there are subfolders for all plugins, together with the ASUL configuration files for those plugins.
Example: All icons of the navigationbar plugin are located in the megazine/gui/navigationbar/ folder.
The icon of the "go to the previous page" button is called:
btn_page_prev.png
Option 1: Substitute the default icon
For this simple solution no changes in the navigationbar.asul file are needed.
An icon of a button can be simply substituted by a new icon, if
- the location and order of the new button(s) is the same as for the default buttons
- they all have the same size as the default buttons
We propose the follwing steps to substitute the default icon(s) with new icons:
- Copy the complete original folder of the ASUL you want to modify the icons (e.g. the navigationbar/ folder) and rename it; e.g. in adding a trailing "_new".
Example: megazine/gui/navigationbar_new/ - Copy all new icons into that new folder
- Delete the originla icons you wnat to substitute
- Rename you new icons with the same name as the original icon for the related button
Example: rename the icon, that is intended for the "go to previous page" button to: btn_page_prev.png - Rename the subfolder with the name of the plugin to be modified and add a trailing "_org", to keep the original icons, in case anything goes wrong.
Example: rename the folder megazine/gui/navigationbar/ to megazine/gui/navigationbar_org/ - Rename the folder *_new and make it the standard gui/plugin folder
Example: Rename megazine/gui/navigationbar_new to megazine/gui/navigationbar/
After these steps the folders and icons are named the same as before, but the icons are the new ones now.
Important: The new icon must be of the same size as the default icon, because all boxes that hold the buttons are designed and shaped to best fit the original sized buttons. If the new icon is bigger, parts of the icon will be cut.
The new icons will show up with the next refresh of your browser.
You probably have to delete the browser cache first to see the changes.
Remark: To completely change the GUI, you most probably have to repeat these steps for all plugins.
To use icons with different size some modifications in the ASUL files are needed. THis will be shown in a separate tutorial.
