[All Adaptavist Apps]
Page History
{menuicon} Macro
Description
This macro
| Excerpt |
|---|
creates an icon for use within the menu |
Requirements
This macro requires Theme Builder 2.0 or above.
Usage
| Code Block |
|---|
{menuicon:icon|tooltip=tooltip text|size=16}
|
Parameters
Property | Required | Default | Notes | ||
|---|---|---|---|---|---|
default |
|
| The icon name (see list below) | ||
tooltip |
|
| The tooltip to display when the mouse hovers over the icon
| ||
size |
| 16 | The icon size, in pixels | ||
force |
| false | If you have switched menu icons off in the theme configuration screen, you can force individual icons to still appear by setting this parameter to true |
| Footnotes Display |
|---|
Theme Builder 2.x Icons
The following icons are available in Theme Builder 2.x:
| Section | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Theme Builder 3.x Icons
Theme Builder 3.x and above contain over 800 professional icons in both GIF and PNG format (over 1,600 icons in total). Obviously there's no way we could easily list them all here, however it's fairly trivial for you to view the icons on your local machine.
Thanks to Chris Paquin, you can now view the 800 PNG icons online: Builder 3.x Icons - the page takes quite a while to load as you'd expect!
If you need a faster way to review the icons, try this...
Theme Builder is distributed as a ".jar" file - this is in fact a ZIP file, it's just that it's extension has been renamed from ".zip" to ".jar".
To view all the icons available in Theme Builder 3.x and above, simply rename the ".jar" file to a ".zip" file and then extract the archive (including folders) to your desktop or some other folder on your computer. You can find plenty of free ZIP extraction software on the Internet.
You can then browse through to the resources/builder/icons folder to display all the available icons:
To use any of icons with either the menuicon macro, compound-menuitem macro of as a Favourites Icon, just use the file name without the extension.
For example, use the "about.gif" icon with the menuicon macro as follows:
| No Format |
|---|
{menuicon:about}
|
Use it with the compound-menuitem macro as follows:
| No Format |
|---|
{compound-menuitem:information|icon=about|caption=Information}
|
When using the icon as your layout "favicon" (Favourites Icon), prefix it with an "at" sign:
| No Format |
|---|
@about |
Examples
Basic Use
To show a menu icon, use the following notation:
Code Block {menuicon:registry}Which gives:
Tooltips
You can make your site more accessible by providing a tooltip for icons:
Code Block {menuicon:house|tooltip=An small picture of a house}The tooltip is shown when the mouse hovers over the icon.
Screen readers, braillers and other accessibility aides can convey the tooltip using speech, braille, moon, etc.
Icon Size
When displaying an icon within paragraph text, the line spacing can sometimes be affected or the icon can look too big inside the text, for example:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est. Cras rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Sed quis tortor. Donec non ipsum. Mauris condimentum, odio nec porta tristique, ante neque malesuada massa, in dignissim eros velit at tellus. Donec et risus in ligula eleifend consectetuer.
To avoid this problem, you can shrink the icon size as follows:
Code Block {menuicon:colors|size=14}You can also increase the icon size, although visual quality will be impaired:
Code Block {menuicon:colors|size=48}
Forcing icons to be displayed
All menu icons can easily be switched off using the settings in theme configuration, however you might want some to always be visible. To do this, use the "force" parameter:
Code Block {menuicon:calendar|force=true}
Hints and Tips
By default the PNG icon will be shown, if available. If you have disabled PNG transparency support in Internet Explorer or set menus to "Load as quickly as possible" (both options in Theme Configuration), the GIF icon will be shown instead.
If you are aware that your end-users are using slow computers, Internet Explorer versions prior to 5.5 or have low bandwidth, you can make pages load faster by forcing the use of GIF icons as described above. You can turn off icons alltogether by selecting the "Do not display icons in the Edit / View menus" option in Theme Configuration.
Frequently Asked Questions
How do I get the icons for Show Children/Comments, Add to Favourites and Watch this page/news/space?
The checkboxes shown against the "Show Children" and "Show Comments" options are automatically generated by the menulink macro.
The icons shown against the "Add to Favourites" and "Watch this pace/news/space" are also generated by the menulink macro, however you can also use the builder-favicon macro and builder-watchicon macro should you want to display these icons on their own within a panel.
Overview
Community Forums
Content Tools
Apps