{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 icon 1
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

Reference	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 View > This Page > Page Information PNG, GIF add2 Edit > New PNG, GIF bookmark View > Other Pages > Labels PNG, GIF clock View > Account > History PNG, GIF colors Edit > Administration > Configure Theme PNG, GIF document View > This Page PNG, GIF document_add Edit > New > Page PNG, GIF document_attachment Edit > Attachments PNG, GIF document_delete Edit > Remove this page/news PNG, GIF document_edit Edit > Edit this page/news PNG, GIF document_into View > Other Pages > Site Map PNG, GIF document_new View > Other Pages > Recent Updates PNG, GIF document_plain   PNG, GIF documents View > Other Pages PNG, GIF door2 View > Account > Logout PNG, GIF earth Edit > Administration > Space Administration PNG, GIF earth_add Edit > New > Space PNG, GIF earth_location   PNG, GIF folder_document Edit > Administration > Templates PNG, GIF gears   PNG, GIF house View > Other Pages > Home Page PNG, GIF

Name Image Location in Default Menus Formats id_card View > Account > Preferences PNG, GIF index View > Other Pages > Index PNG, GIF link   PNG, GIF magic-wand View > Other Pages > RSS Feed Builder PNG, GIF mail View > Mail PNG, GIF news View > Other Pages > News PNG, GIF note_add Edit > New > Comment PNG, GIF paperclip View > Other Pages > Attachments Index PNG, GIF pdf View > This Page > Export to PDF GIF presentation View > Other Pages > Dashboard PNG, GIF printer View > This Page > Printable View PNG, GIF registry   PNG, GIF server Edit > Administration > Site Administration PNG, GIF server_document Edit > Administration > Advanced PNG, GIF user1 View > Account PNG, GIF user1_add View > Account > Sign-up PNG, GIF user1_into View > Account > Login PNG, GIF word View > This Page > Export to Word GIF calendar   PNG, GIF user1_earth   PNG, GIF 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:

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:

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:

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

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.