[All Adaptavist Apps]
Page History
| Excerpt |
|---|
This short tutorial shows you how to style the breadcrumbs |
HTML Structure
The Breadcrumbs are built from an ordered list eg:
| CSS Stylesheet |
|---|
| Wiki Markup |
{excerpt}This short tutorial shows you how to style the breadcrumbs{excerpt} h2. HTML Structure The Breadcrumbs are built from an ordered list eg: {style} .code {width:700px;} {style} {code} |
| Code Block |
|---|
<span class="breadcrumbs">
<ol class="breadcrumbs ellipsis" id="breadcrumbs.list">
<li class="breadcrumb breadcrumb0 dashboardbreadcrumb"><a href="/dashboard.action">Dashboard</a> ></li>
<li class="breadcrumb breadcrumb1 spacebreadcrumb"><a href="/display/Docu">Documentation Intranet</a> ></li>
<li class="breadcrumb breadcrumbsExpansion breadcrumb2 pagebreadcrumb"><a href="/display/Docu/Home">Home</a> ></li>
<li class="breadcrumb breadcrumbsEllipsis breadcrumb2"><a href="javascript:void(document.getElementById('breadcrumbs.list').className = 'breadcrumbs expanded');" title="$3">...</a> ></li>
<li class="breadcrumb breadcrumb3 pagebreadcrumb"><a href="/display/Docu/Breadcrumbs+CSS">Breadcrumbs CSS</a></li>
</ol>
</span>
{code}
|
The
...
ellipsis
...
works
...
by
...
adding
...
a
...
classname
...
to
...
the
...
ordered
...
list
...
which
...
switches
...
between
...
two
...
sets
...
of
...
css,
...
one
...
where
...
the
...
expansion
...
is
...
hidden
...
and
...
the
...
ellipsis
...
visible,
...
the
...
other
...
with
...
the
...
ellipsis
...
hidden
...
and
...
the
...
expansion
...
visible.
...
CSS
...
Customisation
...
You
...
can
...
use
...
the
...
following
...
CSS
...
classes
...
to
...
customise
...
your
...
breadcrumb
...
trail
Class | Notes |
|---|---|
.breadcrumbs | Wrapper for entire breadcrumb trail |
.breadcrumb | All breadcrumbs in the trail |
.breadcrumbs li | The list ltems in the breadcrumb trail |
.breadcrumb0 | First item on Breadcrumb trail (Dashboard link) |
.breadcrumb1 | Second item on Breadcrumb trail (Space title or other top-level location, eg. Search) |
.breadcrumb2 | Third item on Breadcrumb trail (Orphan page, eg. Home, or global sub-section, eg. License Details) |
.breadcrumb3 | All subsequent breadcrumbs have a unique number (eg. 3, 4, 5, etc.) so you can customise any level of the trail |
.dashboardbreadcrumb | The breadcrumb that links to the dashboard |
.spacebreadcrumb | A breadcrumb that links to a space |
.pagebreadcrumb | A breadcrumb that links to a page, blogpost, etc. |
To style the entire breadcrumb trail simply use the breadcrumb class
| Code Block |
|---|
||Class||Notes|| ||.breadcrumbs|Wrapper for entire breadcrumb trail| ||.breadcrumb|Breadcrumb trail| ||.breadcrumbs li|The list ltems in the breadcrumb trail| ||.breadcrumb0|First item on Breadcrumb trail (??Dashboard?? link)| ||.breadcrumb1|Second item on Breadcrumb trail (Space title or other top-level location, eg. ??Search??)| ||.breadcrumb2|Third item on Breadcrumb trail (Orphan page, eg. ??Home??, or global sub-section, eg. ??License Details??)| To style the entire breadcrumb trail simply use the _breadcrumb_ class {code} /* breadcrumbs "yellow" background color */ .breadcrumb { background-color: #ffff00; } {code} |
If
...
you
...
want
...
to
...
style
...
any
...
of
...
the
...
individual
...
links
...
just
...
use
...
the
...
breadcrumb
...
class
...
and
...
add
...
an
...
appropriate
...
number
...
for
...
the
...
link.
...
The
...
breadcrumb
...
trail
...
is
...
0-indexed
...
so
...
to
...
style
...
the
...
first
...
two
...
breadcrumb
...
links
...
do
...
the
...
following:
| Code Block |
|---|
} /* dashboard link "green" background color */ .breadcrumb0 { background-color: 00ff00; } /* space link "white" background color */ .breadcrumb1 { background-color: #ffffff; } {code} |
The
...
.breadcrumb,
...
.breadcrumb0,
...
.breadcrumb1
...
and
...
.breadcrumb2
...
classes
...
include
...
both
...
the
...
breadcrumb
...
link
...
and
...
the
...
arrow
...
to
...
the
...
right
...
of
...
it,
...
eg.
...
.breadcrumb0
...
includes
...
Dashboard
...
>
...
-
...
if
...
you
...
want
...
to
...
customise
...
just
...
the
...
link,
...
apply
...
your
...
settings
...
to
...
the
...
link
...
tag
...
within
...
that
...
region,
...
eg:
| Code Block |
|---|
} .breadcrumb0 a:link { your styles here } {code} |
The
...
link
...
tags
...
allow
...
you
...
to
...
use
...
different
...
customisations
...
depending
...
on
...
whether
...
the
...
link
...
has
...
been
...
visited,
...
etc:
| Code Block |
|---|
} /* red text by default for all breadcrumb links */ .breadcrumbs a:link { color: #ff0000; } /* black text when hovering over a link */ .breadcrumb a:hover { color: #000000; } /* blue text when a link has been visited */ .breadcrumbs a:visited { color: #0000ff; } {code} |
If
...
you
...
look
...
at
...
the
...
breadcrumb
...
trail
...
above,
...
you
...
will
...
see
...
these
...
styles
...
applied.
...
If
...
you
...
need
...
to
...
hide
...
the
...
breadcrumb
...
trail,
...
remove
...
the
...
{builder-breadcrumbs}
...
macro
...
from
...
the
...
panel
...
content.
...
And
...
if
...
you
...
want
...
to
...
hide
...
any
...
of
...
the
...
first
...
three
...
items
...
on
...
the
...
breadcrumb
...
trail,
...
use
...
Breadcrumb
...
Options
...
on
...
the
...
...
...
in
...
the
...
...
...
.
We've
...
applied
...
this
...
example
...
to
...
this
...
page
...
using
...
the
...
...
...
.
...
Hints
...
and
...
Tips
...
You
...
can
...
remove
...
any
...
of
...
the
...
first
...
three
...
items
...
in
...
the
...
breadcrumb
...
trail
...
using
...
the
...
options:
...
- Builder
...
- 1.x
...
- and
...
- 2.x:
...
...
...
...
- .
- Builder 3.x
...
- and
...
- above:
...
...
...
- in
...
...
...
Simply
...
tick
...
which
...
links
...
you
...
want
...
to
...
remove
...
and
...
they'll
...
no
...
longer
...
appear
...
in
...
the
...
breadcrumb
...
trail.
| CSS Stylesheet |
|---|
} .breadcrumb { background-color: #ffff00; } .breadcrumb0 { background-color: #00ff00; } .breadcrumb1 { background-color: #ffffff; } .breadcrumbs li a:link { color: #ff0000; } .breadcrumbs li a:hover { color: #000000; } .breadcrumbs li a:visited { color: #0000ff; } {style} |
Overview
Community Forums
Content Tools
Apps