Theme Builder Plugin

[All Adaptavist Apps]

Page tree

  • Created by Unknown User (amoran), last modified by Unknown User (gwilson) on Dec 22, 2011

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.

Usage

{builder-breadcrumbs}

Note:
This macro should be used only once, usually inside a panel within the theme configuration screen.

Parameters

This macro has no parameters.

Examples

Simply add the macro to any panel in theme configuration to display the breadcrumb trail in that panel:

{builder-breadcrumbs}

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)

.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:

.breadcrumb0 a:link {
 your styles here
}

The link tags allow you to use different customisations depending on whether the link has been visited, etc:

/* 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;
}

If you look at the breadcrumb trail above, you will hopefully see these styles applied (smile)

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.

Hints and Tips

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.

Frequently Asked Questions

None at present.

7 Comments

  1. Unknown User (simonwheatley)

    Thanks to Alain for the following tip to avoid the expand/collapse functionality in breadcrumbs:

    Go into site admin -> general configuration and set the 'number of ancestors to show in breadcrumbs' to 999 or similar.

  2. Unknown User (nikunj.jariwala_ra@yahoo.com)

    Hi there,
    How do I make the current page title in the breadcrumb as a link.
    right now,the current page title is just a text for me and rest of the items in the dashboard are links. So how do I make it as a link and how do I change the color of ">" symbols in the breadcrumb.
    Thanks,
    Nikunj

  3. Unknown User (tkrug)

    The CSS does not seem to work in IE. I am using

    .breadcrumbs ol li a {
 color: #ffffff;
}

.breadcrumbs {
 color: #ffffff;
}

    for a white textcolor (whole breadcrumb). IE ignores the first setting and only turns the page (last entry in breadcrumb) white, not the links.

    1. Unknown User (lalbert)

      I was having the same problem. Solved it as follows:

      span.breadcrumbs a:link, span.breadcrumbs a:visited {
 color: #ffffff;
}

  4. Unknown User (rjkokesh)

    I have my header set up similarly to that of the Adaptavist wiki.  However, I'd like the breadcrumbs as well as the search box to align right.  Is there a way to get the breadcrumbs to do this, while still allowing them to expand as the user navigates deeper into the site?  I have them in a table cell that's aligned right, however if I make the cell small enough to keep the short breadcrumbs right-aligned, it wraps the longer ones onto the next line.  If I make it wide enough to accommodate the longer breadcrumbs, it aligns them to the left side of the cell.  Any ideas?

    Thanks!

  5. Unknown User (sab)

    Why do my breadcrumbs have a leading arrow?

  6. Unknown User (irene)

    Moved question to forum.