[All Adaptavist Apps]
Excerpt |
---|
This macro defines where the breadcrumb trail will appear within the theme layout. You can move this macro to another panel to relocate the breadcrumbs or remove it altogether if you do not want a breadcrumb disaply. |
Note:
The actual breadcrumbs are always output, regardless of where this macro is placed and even if it is removed, at the bottom of the web page. This aids search engine rankings by ensuring links are present to the parent page whilst not prioritising the breadcrumb trail over the main content of your pages.
Code Block |
---|
Wiki Markup |
h1. \{builder-breadcrumbs} Macro h2. Description This macro defines where the breadcrumb trail will appear within the theme layout. You can move this macro to another panel to relocate the breadcrumbs or remove it altogether if you do not want a breadcrumb disaply. *Tip:* The actual breadcrumbs are always output, regardless of where this macro is placed and even if it is removed, at the bottom of the web page. This aids search engine rankings by ensuring links are present to the parent page whilst not prioritising the breadcrumb trail over the main content of your pages. h2. Usage {code} {builder-breadcrumbs} {code} * |
Note:
...
This
...
macro
...
should
...
be
...
used
...
only
...
once,
...
usually
...
inside
...
a
...
panel
...
within
...
the
...
theme
...
configuration
...
screen.
This macro has no parameters.
Simply add the macro to any panel in theme configuration to display the breadcrumb trail in that panel:
Code Block |
---|
h2. Parameters This macro has no parameters. h2. Examples Simply add the macro to any panel in theme configuration to display the breadcrumb trail in that panel: {code} {builder-breadcrumbs} {code} h2. CSS Customisation ||Class||Notes|| ||.breadcrumbs|Wrapper for entire breadcrumb trail| ||.breadcrumb|First three links on breadcrumb trail| ||.breadcrumb0|First item on Breadcrumb trail (??Dashboard?? link)| || |
Class | Notes |
---|---|
.breadcrumbs | Wrapper for entire breadcrumb trail |
.breadcrumb | First three links on 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) |
If you want to hide the breadcrumb trail, simply delete the {builder-breadcrumbs} macro from the panel content.
If you want to hide any of the first three items on the breadcrumb trail, use Breadcrumb Options in theme configuration.
The .breadcrumb, .breacrumb0, .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 |
---|
.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??)| If you want to hide the breadcrumb trail, simply delete the \{builder-breadcrumbs} macro from the panel content. If you want to hide any of the first three items on the breadcrumb trail, use [Breadcrumb Options] in theme configuration. The .breadcrumb, .breacrumb0, .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} .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 breadcrumbs */ span.breadcrumbs a:link { color: #ff0000; } /* blue text when hovering or if link visited */ span.breadcrumbs a:hover, span.breadcrumbs a:visited { color:#0000ff; } /* dashboard link "cyan" background color */ .breadcrumb0 { background-color: cyan; } /* first three breadcrumbs bold */ .breadcrumb a { font-weight: bold; } {code} {style |
CSS Stylesheet |
---|
} /* red text by default for all breadcrumbs */ span.breadcrumbs a:link { color: #ff0000; } /* blue text when hovering or if link visited */ span.breadcrumbs a:hover, span.breadcrumbs a:visited { color:#0000ff; } /* dashboard link "cyan" background color */ .breadcrumb0 { background-color: cyan; } /* first three breadcrumbs bold */ .breadcrumb a { font-weight: bold; } .breadcrumb0 { display: inline; visibility: visible; } {style} |
If
...
you
...
look
...
at
...
the
...
breadcrumb
...
trail
...
above,
...
you
...
will
...
hopefully
...
see
...
these
...
styles
...
applied
You will notice that the "...",
...
when
...
expanded,
...
results
...
in
...
the
...
Home
...
link
...
not
...
being
...
bold
...
-
...
this
...
is
...
because
...
the
...
...
...
is
...
treated
...
as
...
the
...
second
...
breadcrumb
...
(.breadcrumb1
...
as
...
they
...
are
...
0-indexed)
...
and
...
it
...
is
...
completely
...
replaced
...
by
...
new
...
text
...
when
...
expanded.
...
...
...
...
You
...
can
...
remove
...
any
...
of
...
the
...
first
...
three
...
items
...
in
...
the
...
breadcrumb
...
trail
...
using
...
the
...
options:
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Simply
...
tick
...
which
...
links
...
you
...
want
...
to
...
remove
...
and
...
they'll
...
no
...
longer
...
appear
...
in
...
the
...
breadcrumb
...
trail.
...
...
...
...
None
...
at
...
present.