[All Adaptavist Apps]
Excerpt |
---|
This tutorial explains how to customise the search box using CSS, eg. adding a graphical search button... |
The search box macro is part of Adaptavist's open source "Content Formatting Macros" plugin:
Code Block |
---|
Wiki Markup |
{excerpt}This tutorial explains how to customise the search box using CSS, eg. adding a graphical search button...{excerpt} h2. Adding a Search Box The [search-box macro|AtlassianConfluence:search-box macro] is part of Adaptavist's open source "Content Formatting Macros" plugin: {code} {search-box} {code} |
It
...
appears
...
top-right
...
(most
...
common
...
place
...
for
...
a
...
search
...
box)
...
on
...
almost
...
every
...
theme
...
but
...
can
...
easily
...
be
...
moved
...
to
...
other
...
panels
...
or
...
even
...
put
...
in
...
to
...
page
...
content.
...
Using
...
CSS,
...
it's
...
possible
...
to
...
customise
...
the
...
search
...
box,
...
such
...
as
...
adding
...
a
...
graphical
...
search
...
button.
...
Here's
...
an
...
example:
First, you'll
...
need
...
the
...
graphical
...
image,
...
for
...
example:
...
Wherever possible,
...
use
...
a
...
GIF
...
or
...
JPG
...
image
...
-
...
it's
...
going
...
to
...
be
...
a
...
background
...
image
...
meaning
...
that
...
Internet
...
Exploder
...
versions
...
earlier
...
than
...
7.0
...
won't
...
display
...
transparency
...
properly
...
(even
...
with
...
our
...
PNG
...
fix
...
script
...
because
...
it
...
only
...
looks
...
at
...
<img>
...
tags).
...
If
...
you
...
do
...
use
...
a
...
PNG
...
then
...
you'll
...
have
...
to
...
use
...
the
...
MSIE
...
proprietary
...
alpha
...
transparency
...
filter
...
in
...
your
...
CSS
...
(I'll
...
leave
...
you
...
to
...
...
for
...
more
...
info
...
on
...
that
...
to
...
deter
...
you
...
using
...
it
...
).
...
If
...
the
...
site
...
doesn't
...
allow
...
anonymous
...
access,
...
remember
...
that
...
images
...
attached
...
to
...
pages
...
won't
...
be
...
available
...
to
...
logged
...
out
...
users
...
(eg.
...
on
...
login,
...
forgot
...
password
...
and
...
sign-out
...
screens)
...
so
...
you
...
might
...
need
...
the
...
image
...
placing
...
in
...
the
...
/images
...
folder
...
on
...
disk
...
or
...
find
...
some
...
other
...
location
...
for
...
it.
The CSS is pretty simple, we just add something like this to the Custom CSS option on the CSS Tab:
Code Block |
---|
h2. CSS The CSS is pretty simple, we just add something like this to the Custom CSS option on the [CSS Tab]: {code} /* search box */ #quick-search-submit, .searchButton { border-style: none; text-indent: -10000px; overflow: hidden; background: transparent url(/download/attachments/2261005/go.jpg) no-repeat scroll top left; width: 20px; height: 20px; cursor: pointer; } {code} |
Note:
...
This
...
CSS
...
is
...
applicable
...
to
...
the
...
search
...
dialog
...
output
...
by
...
either
...
the
...
builder-show
...
or
...
search-box
...
macros.
...
If
...
you're
...
using
...
some
...
other
...
macro
...
to
...
display
...
a
...
search
...
box,
...
you
...
might
...
need
...
to
...
change
...
the
...
CSS
...
to
...
adapt
...
it
...
to
...
the
...
HTML
...
output
...
by
...
that
...
macro.
...
When
...
any
...
CSS
...
is
...
applied
...
to
...
a
...
HTML
...
form
...
element,
...
the
...
browser
...
takes
...
over
...
its
...
rendering
...
giving
...
you
...
far
...
more
...
control.
...
The
...
CSS
...
above
...
does
...
the
...
following:
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
You'll
...
notice
...
that
...
a
...
relative
...
URL
...
has
...
been
...
used
...
-
...
this
...
is
...
of
...
critical
...
importance
...
as
...
most
...
sites
...
(including
...
100%
...
of
...
sites
...
we
...
host
...
for
...
customers)
...
can
...
be
...
accessed
...
from
...
multiple
...
URLs
...
and
...
cross-domain
...
security
...
will
...
prevent
...
background
...
images
...
(depending
...
on
...
browser
...
and
...
config)
...
if
...
they
...
are
...
from
...
a
...
different
...
domain.
...
If
...
you're
...
using
...
CSS
...
sprites,
...
remember
...
to
...
set
...
the
...
pixel
...
value
...
position
...
of
...
the
...
relevant
...
sprite
...
on
...
the
...
background
...
style.
...
...
...
...
...
If
...
the
...
customer
...
is
...
using
...
Theme
...
Builder
...
3.0.3
...
or
...
above,
...
you
...
can
...
use
...
any
...
of
...
Builder's
...
icon
...
resources
...
in
...
the
...
CSS,
...
with
...
an
...
un-documented
...
feature:
Code Block |
---|
{code} background: transparent url(%ICONPATH%/view.png) no-repeat scroll center center; {code} (!) |
It's
...
possible
...
the
...
%ICONPATH%
...
property
...
will
...
get
...
renamed
...
to
...
something
...
that's
...
more
...
in-line
...
with
...
naming
...
conventions
...
used
...
elsewhere
...
in
...
the
...
plugin
...
so
...
check
...
release
...
notes
...
on
...
any
...
future
...
upgrades.