[All Adaptavist Apps]
This tutorial explains how to add icons to your menus in Theme Builder Excerpt
...
1.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.
...
...
...
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...
...
...
...
...
...
...
To
...
add
...
an
...
icon
...
to
...
a
...
button
...
on
...
the
...
menu
...
bar,
...
use
...
the
...
following
...
notation:
No Format |
---|
} * [!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} |
The
...
icon
...
would
...
be
...
included
...
inside
...
the
...
link.
...
This
...
is
...
critical
...
if
...
you
...
want
...
the
...
icon
...
to
...
be
...
displayed
...
properly
...
on
...
the
...
menu
...
bar.
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} |