[All Adaptavist Apps]

Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Excerpt

This tutorial explains how to add icons to your menus in Theme Builder

...

1.x...

...

If you've

...

seen

...

our

...

company

...

website

...

,

...

you

...

will

...

notice

...

that

...

most

...

items

...

menus

...

have

...

an

...

icon.

...

The

...

icons

...

help

...

to

...

make

...

items

...

more

...

recognisable,

...

especially

...

for

...

regular

...

visitors.

...

...

...

...

...

...

...

...

The notation to get icons in pop-up menus and sub-menus is almost identical, however the image must be outside the link.

The example below shows the difference between an icon on the menubar (the "Home" link) and an icon in a pop-up menu (the "Builder" link):

No Format
, as shown below:

{menubar}
{menuitem} [!http://adaptavist.com/glyphs/house.png! Home|Home|Back to the home page...] {menuitem}
{menuitem} [!http://adaptavist.com/glyphs/cubes.png! Builder|Builder|Stuff about Builder...] {menuitem}
{menubar}

h2. Icons in Pop-up Menus and Sub-Menus

The notation to get icons in pop-up menus and sub-menus is almost identical, however the image must be _outside_ the link.

The example below shows the difference between an icon on the menubar (the "Home" link) and an icon in a pop-up menu (the "Builder" link):

{noformat}
* [!http://adaptavist.com/glyphs/house.png! Home|Home|Back to the home page...]
** !http://adaptavist.com/glyphs/cubes.png! [Builder|Builder|Stuff about Builder...]
{noformat}

And this is what it will look like in the menu bar:

{menubar}
{menu} [!http://adaptavist.com/glyphs/house.png! Home|Home|Back to the home page...]
 {menuitem} !http://adaptavist.com/glyphs/cubes.png! [Builder|Builder|Stuff about Builder...] {menuitem}
{menu}
{menubar}