XF 1.4 Change Breadcrump!?

[Heavy]

Hi xenForo Community!


I need help to change breadcrumps! What i want..

From this:

To this:

So I would like to have these kinds of arrows!


Thanks in advance!

 

[Dylan V]

I found a solution, but if you're on a custum style, export your style to have a backup.

Go to the templates of your style and search for "breadcrumb.css". Then, replace all content with:

.breadBoxTop,
.breadBoxBottom
{
    @property "breadBox";
    padding: 10px 0;
    overflow: hidden;
    zoom: 1;
    clear: both;
    box-sizing: border-box;
    @property "/breadBox";
}

.breadBoxTop
{
}

.breadBoxTop .topCtrl
{
    @property "breadBoxTopCtrl";
    margin-left: 5px;
    float: right;
    line-height: 24px;
    @property "/breadBoxTopCtrl";
}

.breadcrumb
{
    @property "/breadcrumb";
    background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    font-size: 11px;
    border: 1px solid @primaryLighter;
    border-radius: 5px;
    overflow: hidden;
    zoom: 1;
    max-width: 100%;
    @property "/breadcrumb";
}

.breadcrumb.showAll
{
    height: auto;
}

.breadcrumb .boardTitle
{
    @property "breadcrumbBoardTitle";
    display: none;
    @property "/breadcrumbBoardTitle";
}

.breadcrumb .crust
{
    @property "breadcrumbItemCrust";
    display: block;
    float: left;
    position: relative;
    zoom: 1;
    max-width: 50%;
    @property "/breadcrumbItemCrust";
}

.breadcrumb .crust a.crumb
{
    @property "breadcrumbItemCrumb";
    text-decoration: none;
    padding: 0 10px 0 18px;
    outline: 0 none;
    -moz-outline-style: 0 none;
    display: block;
    line-height: 24px;
    @property "/breadcrumbItemCrumb";
}

.breadcrumb .crust:first-child a.crumb {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    padding-left: 10px;
}
.breadcrumb .crust:last-child a.crumb {
    font-weight: bold;
}

.breadcrumb .crust .arrow span {
    display: block;
    height: 0;
    left: -17px;
    overflow: hidden;
    position: absolute;
    text-indent: 9999px;
    top: -16px;
    white-space: nowrap;
    width: 0;
    z-index: 51;
}

.breadcrumb .jumpMenuTrigger
{
    @property "breadcrumbJumpMenuTrigger";
    background: transparent url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat 0 0;
    margin: 5px 5px 6px;
    display: block;
    float: right;
    white-space: nowrap;
    text-indent: 9999px;
    overflow: hidden;
    width: 13px;
    height: 13px;
    @property "/breadcrumbJumpMenuTrigger";
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive .breadBoxTop.withTopCtrl
    {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    .Responsive .breadBoxTop.withTopCtrl nav
    {
        display: table-header-group;
    }

    .Responsive .breadBoxTop.withTopCtrl .topCtrl
    {
        display: table-footer-group;
        margin-top: 5px;
        text-align: right;
    }
}
</xen:if>

Now, go to "EXTRA.css" and add this:

.breadcrumb .crust a.crumb:after
{
    content: "";
    background: url('@imagePath/xenforo/navbit-arrow-right.png') right center no-repeat;
    position: relative;
    right: 15px;
    top: 7px;
    height: 10px;
    width: 10px;
    float: left;
}

.breadcrumb .crust:first-child a.crumb:after
{
    display: none;
}

Add the arrow image in the xenforo folder appropriate to your style.

Result:

 

[Dylan V]

Hmm, this did not worked on the custom style, i'll test this on the orginal xenForo style..

Normally, it should work. The image is probably not recognized and you must place it according to this:

background: url('@imagePath/xenforo/navbit-arrow-right.png') right center no-repeat;

Look at the picture above, everything works perfectly for me. You must do as I do.

 

[Heavy]

Now it worked, i did something wrong, big thank you @Dylan V !

 

[Heavy]

Normally, it should work. The image is probably not recognized and you must place it according to this:

background: url('@imagePath/xenforo/navbit-arrow-right.png') right center no-repeat;

Look at the picture above, everything works perfectly for me. You must do as I do.

BUT, now the breadcrumps has started to show in the footer..
Looks like this:

Any tips how to remove this? Thanks!

 

[ThyPhon]

add this EXTRA.css

.breadBoxBottom
{
    display: none;
}

 

[Heavy]

add this EXTRA.css

.breadBoxBottom
{
    display: none;
}

Thank you very much! I really appreciate it!

 

[Dylan V]

Sorry for not answering, I was no longer on the PC.

Yes, it's like he said above.