[All Adaptavist Apps]
Page History
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.
...
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 |
|---|
} * [!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} If you pasted that in to a page, this |
The icon would be included inside the link. This is critical if you want the icon to be displayed properly on the menu bar.
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):
| No Format |
|---|
is what it would look like: * [!http://adaptavist.com/glyphs/house.png! Home|Home|Back to the home page...] * [!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, 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} |
Overview
Community Forums
Content Tools
Apps