Access Keys:
Skip to content (Access Key - 0)

Adaptavist Documentation Move

This documentation is deprecated. Adaptavist's documentation has moved to a new location where it is maintained and updated. Please visit Adaptavist's new Documentation area.

menuicon macro

{menuicon} Macro

Description

This macro creates an icon for use within the menu.

Requirements

This macro requires Theme Builder 2.0 or above.

Usage

{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 icon1
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
Ref Notes
1 When using the icon in a menu, tooltips will only be shown if enabled in theme configuration.

Theme Builder 2.x Icons

The following icons are available in Theme Builder 2.x:

Name Image Location in Default Menus Formats
about about View > This Page > Page Information PNG, GIF
add2 add2 Edit > New PNG, GIF
bookmark bookmark View > Other Pages > Labels PNG, GIF
clock clock View > Account > History PNG, GIF
colors colors Edit > Administration > Configure Theme PNG, GIF
document document View > This Page PNG, GIF
document_add document_add Edit > New > Page PNG, GIF
document_attachment document_attachment Edit > Attachments PNG, GIF
document_delete document_delete Edit > Remove this page/news PNG, GIF
document_edit document_edit Edit > Edit this page/news PNG, GIF
document_into document_into View > Other Pages > Site Map PNG, GIF
document_new document_new View > Other Pages > Recent Updates PNG, GIF
document_plain document_plain   PNG, GIF
documents documents View > Other Pages PNG, GIF
door2 door2 View > Account > Logout PNG, GIF
earth earth Edit > Administration > Space Administration PNG, GIF
earth_add earth_add Edit > New > Space PNG, GIF
earth_location earth_location   PNG, GIF
folder_document folder_document Edit > Administration > Templates PNG, GIF
gears gears   PNG, GIF
house house View > Other Pages > Home Page PNG, GIF
Name Image Location in Default Menus Formats
id_card id_card View > Account > Preferences PNG, GIF
index index View > Other Pages > Index PNG, GIF
link link   PNG, GIF
magic-wand magic-wand View > Other Pages > RSS Feed Builder PNG, GIF
mail mail View > Mail PNG, GIF
news news View > Other Pages > News PNG, GIF
note_add note_add Edit > New > Comment PNG, GIF
paperclip paperclip View > Other Pages > Attachments Index PNG, GIF
pdf pdf View > This Page > Export to PDF GIF
presentation presentation View > Other Pages > Dashboard PNG, GIF
printer printer View > This Page > Printable View PNG, GIF
registry registry   PNG, GIF
server server Edit > Administration > Site Administration PNG, GIF
server_document server_document Edit > Administration > Advanced PNG, GIF
user1 user1 View > Account PNG, GIF
user1_add user1_add View > Account > Sign-up PNG, GIF
user1_into user1_into View > Account > Login PNG, GIF
word word View > This Page > Export to Word GIF
calendar calendar   PNG, GIF
user1_earth user1_earth   PNG, GIF
rss rss   PNG, GIF

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:

{menuicon:about}

Use it with the compound-menuitem macro as follows:

{compound-menuitem:information|icon=about|caption=Information}

When using the icon as your layout "favicon" (Favourites Icon), prefix it with an "at" sign:

@about

Examples

Basic Use

To show a menu icon, use the following notation:

{menuicon:registry}

Which gives: registry

Tooltips

You can make your site more accessible by providing a tooltip for icons:

{menuicon:house|tooltip=An small picture of a house}

The tooltip is shown when the mouse hovers over the icon: An small picture of a house

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. colors 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:

{menuicon:colors|size=14}

Which gives:

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. colors 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.

You can also increase the icon size, although visual quality will be impaired:

{menuicon:colors|size=48}

Which gives:

colors

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:

{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.



View old comments


Adaptavist Theme Builder Powered by Atlassian Confluence