[All Adaptavist Apps]
Page History
This tutorial explains how to add icons to your menus in Theme Builder Excerpt
...
2.x...
...
If you've
...
seen
...
our
...
...
...
,
...
you
...
will
...
notice
...
that
...
most
...
items
...
menus
...
have
...
an
...
icon.
...
The
...
icons
...
help
...
to
...
make
...
items
...
more
...
recognisable,
...
especially
...
for
...
regular
...
visitors.
...
Icon
...
Requirements
...
The
...
icons
...
must
...
be
...
16x16
...
pixels
...
and
...
can
...
be
...
GIF,
...
JPEG
...
or
...
PNG
...
format.
...
We
...
recommend
...
using
...
GIF
...
icons
...
as
...
they
...
are
...
the
...
most
...
widely
...
supported
...
format
...
that
...
supports
...
transparency.
...
For
...
avoidance
...
of
...
doubt,
...
you
...
can
...
not
...
use
...
Windows
...
icons
...
(
...
.ico
...
files)
...
or
...
Macintosh
...
icons.
...
The
...
method
...
for
...
adding
...
icons
...
to
...
menus
...
is
...
slightly
...
different
...
depending
...
on
...
whether
...
you're
...
adding
...
them
...
to
...
the
...
menu
...
bar
...
or
...
one
...
of
...
the
...
pop-up
...
menus...
...
Icons
...
on
...
the
...
Menu
...
Bar
...
To
...
add
...
an
...
icon
...
to
...
a
...
button
...
on
...
the
...
menu
...
bar,
...
use
...
the
...
following
...
notation:
| No Format |
|---|
} {menuitem}{menulink:home}{menuicon:house} Home{menulink}{menuitem} {menuitem}[!http://adaptavist.com/glyphs/cubes.png! Builder|Builder|Stuff about Builder...]{menuitem} {noformat} If you pasted that in to a page, this is what it would |
The icon is included inside the link. This is critical if you want the icon to be displayed properly on the menu bar.
To display these icons and links in a menu bar, use the following notation (see Creating Menus 2.x for more information):
| No Format |
|---|
look like:
* {menulink:home}{menuicon:house} Home{menulink}
* [!http://adaptavist.com/glyphs/cubes.png! Builder|Builder|Stuff about Builder...]
As you can see, the icon has been included inside the link. This is critical if you want the icon to be displayed properly on the menu bar.
To display these icons and links in a menu bar, use the following notation (see [Creating Menus 2.x] for more information):
{noformat}
{menubar}
{menuitem}{menulink:home}{menuicon:house} Home{menulink}{menuitem}
{menuitem}[!http://adaptavist.com/glyphs/cubes.png! Builder|Builder|Stuff about Builder...]{menuitem}
{menubar}
|
As you can see from the notation above, you can either use wiki notation to add the images (see Images, Flash, Videos and Audio for more information) or the handy menuicon macro which provides numerous ready-made icons.
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. You can compare the differences between icons on the menu bar (the {menu} lines) and those on pop-up menus / sub-menus (the {menuitem} lines):
| No Format |
|---|
{noformat} Which results in: {menubar} {menuitem}{menulink:home}{menuicon:house} Home{menulink}{menuitem} {menuitem}[!http://adaptavist.com/glyphs/cubes.png! Builder|Builder|Stuff about Builder...]{menuitem} {menubar} As you can see from the notation above, you can either use wiki notation to add the images (see [Images, Flash, Videos and Audio] for more information) or the handy [Builder:menuicon macro] which provides numerous ready-made icons. 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. You can compare the differences between icons on the menu bar (the \{menu} lines) and those on pop-up menus / sub-menus (the \{menuitem} lines): {noformat} {menubar} {menu}{menulink:home}{menuicon:house} Home{menulink} {menuitem}{menuicon:house} {menulink:home}Home{menulink}{menuitem} {menu} {menu}[!http://adaptavist.com/glyphs/cubes.png! Builder|Builder|Stuff about Builder...] {menuitem}!http://adaptavist.com/glyphs/cubes.png! [Builder|Builder|Stuff about Builder...]{menuitem} {menu} {menubar} {noformat} And this is what it will look like in the menu bar: {menubar} {menu}{menulink:home}{menuicon:house} Home{menulink} {menuitem}{menuicon:house} {menulink:home}Home{menulink}{menuitem} {menu} {menu}[!http://adaptavist.com/glyphs/cubes.png! Builder|Builder|Stuff about Builder...] {menuitem}!http://adaptavist.com/glyphs/cubes.png! [Builder|Builder|Stuff about Builder...]{menuitem} {menu} {menubar} |
Overview
Community Forums
Content Tools
Apps