1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Change Breadcrump!?

Discussion in 'Styling and Customization Questions' started by Heavy, Mar 13, 2015.

  1. Heavy

    Heavy Active Member

    Hi xenForo Community!


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

    From this: [​IMG]

    To this: [​IMG]


    So I would like to have these kinds of arrows!


    Thanks in advance! :)
     

    Attached Files:

  2. Dylan V

    Dylan V Well-Known Member

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

    Screenshot_3.png
     
    Last edited: Mar 14, 2015
  3. Dylan V

    Dylan V Well-Known Member

    Normally, it should work. The image is probably not recognized and you must place it according to this:
    Code:
    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.
     
  4. Heavy

    Heavy Active Member

    Now it worked, i did something wrong, big thank you @Dylan V ! :)
     
  5. Heavy

    Heavy Active Member

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

    Any tips how to remove this? Thanks!
     
  6. ThyPhon

    ThyPhon Member

    add this EXTRA.css

    PHP:
    .breadBoxBottom
    {
        
    displaynone;
    }
     
  7. Heavy

    Heavy Active Member

    Thank you very much! I really appreciate it! :)
     
  8. Dylan V

    Dylan V Well-Known Member

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

    Yes, it's like he said above.
     
    Heavy likes this.

Share This Page