Theme Builder Plugin

[All Adaptavist Apps]

Page tree

  • Created by Unknown User (amoran), last modified by Unknown User (shinde) on Apr 15, 2013

{menuicon} Macro

This macrocreates an icon for use within the menu.

This macro requires Theme Builder 2.0 or above.

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

Property

Required

Default

Notes

default

(tick)

 

The icon name (see list below)

tooltip

(error)

 

The tooltip to display when the mouse hovers over the icon

 

1

 

 

size

(error)

16

The icon size, in pixels

force

(error)

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

  1. When using the icon in a menu, tooltips will only be shown if enabled in theme configuration. ↩

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

 

To show a menu icon, use the following notation:

{menuicon:registry}

Which gives:

 

 

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.

 

 

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}

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

{menuicon:colors|size=48}

 

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}

 

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.

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.

  • No labels

14 Comments

  1. Anonymous

    Can I create a graphic on my own and use the menu icon macro if I put it in a compatible format and place it in the icon folder on the server or would something in the macro itself make this incompatible?

    1. Unknown User (gfraser)

      To add your own images, just use normal wiki notation. For example, to add an image to a menu item using the menuicon macro above you'd use:

      {menuitem}{menuicon:home}{menulink:home}Home Page{menulink}{menuitem}

      And to use your own icon you could use:

      {menuitem}!http://whatever.com/path/myicon.gif! {menulink:home}Home Page{menulink}{menuitem}

  2. Unknown User (cpaquin)

    Some of my users were asking to see all the icons available in Builder 3, so I created a page with all of the 800+ menuicons. Just copy and paste the markup text in this file into a new page.

    Hope it's useful! Chris

  3. Unknown User (robert.cottingham)

    Guys,

    I really love the icons you supply here. I would like to use quite a few of them with the lozenge macro. But, as you noted above, size=48 does impair the visual quality. Do you have either the size 48 or the scalable (e.g. rasterized) versions of all these icons? If so, would you consider making them available to Builder users?

    Thanks! -RRC

    1. Unknown User (gfraser)

      The plugin would end up huge if we included the 48x48 versions - checck out our Embedded Software page which lists the the sources of our icon libraries.

      1. Unknown User (robert.cottingham)

        I really appreciate the info, I will look into the IconExperience products. Thanks again! -RRC

  4. Unknown User (jchinsen)

    I am trying to remove the icons from the main menu:
    unchecked Show icons in the View and Edit menus (Use Default...)

    How ever I am not running into an issue where icons in my navigation menu are not showing up, I have tried the following:

    {menuitem:edit|flat=true|imginside=true|tooltip=Edit this %page%}{menuicon:document_edit|force=true}{menuitem}

    {compound-menuitem:edit|flat=true|imginside=true|tooltip=Edit this %page%}{menuicon:document_edit|force=true}

    {compound-menuitem:edit|flat=true|icon=document_edit|force=true|imginside=true|tooltip=Edit this %page%}

    With out any positive results

    1. Unknown User (amoran)

      try this:

      {compound-menuitem:edit|flat=true|icon=document_edit|forceicon=true|imginside=true|tooltip=Edit this %page%}

      1. Unknown User (jchinsen)

        SNAP worked great!

        Thank you sir!

  5. Unknown User (jchinsen)

    Hello again,

    I have another question regarding ICONS. I have created a blank icon and uploaded it to my page.

    I am trying to do the following:
    ICON spacer ICON spacer
    And I have tried the following code:

    {compound-menuitem:edit|flat=true|icon=document_edit|forceicon=true|imginside=true|tooltip=Edit this %page%}
{menuitem}!http://mywikiaddress/spacer.png! {menulink:home}Test Spacer{menulink}{menuitem}

    This one the icon for the spacer dosn't show (note that I was suing section as a test)

    {compound-menuitem:edit|flat=true|icon=document_edit|forceicon=true|imginside=true|tooltip=Edit this %page%}
{menuicon:selection|tooltip=Spacer}

    failed big time ... 

    {compound-menuitem:edit|flat=true|icon=document_edit|forceicon=true|imginside=true|tooltip=Edit this %page%}
{menuicon}!http://mywikiaddress/spacer.png!{menuicon}

    Thanks for you help in advance
    Jason.

  6. Unknown User (dhergert)

    In confluence 2.10, if I use: 

    [{menuicon:document|size=16}|https://dev.com/sr/jira.issueviews:searchrequest-excel-current-fields/10290/SearchRequest-10290.xls]

    it renders fine, but if you open it in Rich Text Editor, it changes it to actually display the full URL. Does the RTE in 3.0 play nicer with this type of link with image?

  7. Unknown User (katerk)

    I am having a problem with this, the icons are not showing, even with the force parameter set to true. This is what part of my menu looks like:

    {menu:class=blueitem|subclass=bluesub}View
   {compound-menuitem:news|caption=News} 
   {compound-menuitem:labels|caption=Labels} 
   {compound-menuitem:index|icon=index|force=true|caption=Index of all pages}
   {compound-menuitem:people|caption=People Directory}
   {compound-menuitem:dashboard|caption=Return to the main Dashboard}
{menu}

    On the third compound statement, I added the "icon=index" but nothing is showing. What am I doing wrong? I would really like to show these icons on my menu.

    Thanks.

    1. Unknown User (amoran)

      Have you switched icons off in your layout menu configuration?

      If you have, have you tried using forceicon=true (force=true has a different meaning for menulink)

  8. Unknown User (katerk)

    Thanks, switching the icons on did the trick. I am new to the Theme Builder but making progress.