{menuicon} Macro

Description

This macro

Requirements

This macro requires Theme Builder 2.0 or above.

Usage

{menuicon:icon|tooltip=tooltip text|size=16}

Parameters

Theme Builder 2.x Icons

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

||Name||Image||Location in Default Menus||Formats||
||about|!Builder 3.x Icons^about.png!|View > This Page > Page Information|PNG, GIF|
||add2|!Builder 3.x Icons^add2.png!|Edit > New|PNG, GIF|
||bookmark|!Builder 3.x Icons^bookmark.png!|View > Other Pages > Labels|PNG, GIF|
||clock|!Builder 3.x Icons^clock.png!|View > Account > History|PNG, GIF|
||colors|!Builder 3.x Icons^colors.png!|Edit > Administration > Configure Theme|PNG, GIF|
||document|!Builder 3.x Icons^document.png!|View > This Page|PNG, GIF|
||document_add|!Builder 3.x Icons^document_add.png!|Edit > New > Page|PNG, GIF|
||document_attachment|!Builder 3.x Icons^document_attachment.png!|Edit > Attachments|PNG, GIF|
||document_delete|!Builder 3.x Icons^document_delete.png!|Edit > Remove this page/news|PNG, GIF|
||document_edit|!Builder 3.x Icons^document_edit.png!|Edit > Edit this page/news|PNG, GIF|
||document_into|!Builder 3.x Icons^document_into.png!|View > Other Pages > Site Map|PNG, GIF|
||document_new|!Builder 3.x Icons^document_new.png!|View > Other Pages > Recent Updates|PNG, GIF|
||document_plain|!Builder 3.x Icons^document_plain.png!| |PNG, GIF|
||documents|!Builder 3.x Icons^documents.png!|View > Other Pages|PNG, GIF|
||door2|!Builder 3.x Icons^door2.png!|View > Account > Logout|PNG, GIF|
||earth|!Builder 3.x Icons^earth.png!|Edit > Administration > Space Administration|PNG, GIF|
||earth_add|!Builder 3.x Icons^earth_add.png!|Edit > New > Space|PNG, GIF|
||earth_location|!Builder 3.x Icons^earth_location.png!| |PNG, GIF|
||folder_document|!Builder 3.x Icons^folder_document.png!|Edit > Administration > Templates|PNG, GIF|
||gears|!Builder 3.x Icons^gears.png!| |PNG, GIF|
||house|!Builder 3.x Icons^house.png!|View > Other Pages > Home Page|PNG, GIF|

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

 

Tooltips

 

You can make your site more accessible by providing a tooltip for icons: {code} {menuicon:house|tooltip=An small picture of a house} {code} The tooltip is shown when the mouse hovers over the icon: {menuicon:house|tooltip=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. {menuicon: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: {code} {menuicon:colors|size=14} {code} 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. {menuicon:colors|size=14} 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: {code} {menuicon:colors|size=48} {code} Which gives: {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:

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