breadcrumbs customization

dragandjordjevic

hi guys, need some help with breadcrumbs since search did not help me out.
Is it possible to customize a link within a breadcrumb? For example i have breadcrumbs like this:
home - folder - page 1

i would like to replace the folder link with another page link so i would get:

home - page 2 - page 1

Any way to do this? I did try with html and css to create a series of links but doesn't look as nice as i hoped. Could not get the home icon look the same like in all other breadcrumbs.

thanks in advance

Hikin' Mike

Not sure I understand. Do you want to remove/hide your current breadcrumb and use a custom breadcrumb?

If yes, it's possible. I do that on my site.

If that isn't what you want, can you be more specific.

dragandjordjevic

yeah that is what I would like to do. Insert a custom breadcrumb, with links i chose any hint where i can look for the code?

Hikin' Mike

First - the link in your signature doesn't work. I think you forgot to add the http//.

You will need to hide the SmugMug breadcrumbs on specific pages you want to display the custom breadcrumbs.

You will need to know what page node (.sm-page-node-XXXX) is for each specific custom breadcrumb pages

This is a sample that you can use to get you started. I would add a HTML/CSS block on your Header section, site-wide.

Add this to your HTML:

<div id="custom-breadcrumb-trail">

    <nav class="custom-breadcrumb-trail">

        <ul class="trail-items">

            <li class="trail-item trail-begin home">
                <a href="http://www.djordjevic-photography.com">
                    <span class="span-text">
                        <span>Home</span>
                    </span>
                </a>
            </li>

            <li class="trail-item">
                <a href="http://www.djordjevic-photography.com/Page-2">
                    <span>Page 2</span>
                </a>
            </li>

            <li class="trail-item trail-end">
                <span>Page 1</span>
            </li>

        </ul>

    </nav>

</div>          

Add this to your CSS:

/**
* SmugMug Font Icons
***************************************************/
.custom-breadcrumb-trail li:after,
.custom-breadcrumb-trail .home a:before {
    display:                inline-block;
    padding:                0 1px 11px;
    font-family:            'SmugMug Icon Font Small';
    font-size:              22px;
    font-style:             normal;
    font-weight:            normal;
    font-variant:           normal;
    line-height:            1;
    vertical-align:         middle;
    -webkit-font-smoothing: antialiased;
    }

    /* Breadcrumb Icons */
    .custom-breadcrumb-trail .home a:before {
        content:     '\E317';
    }

    .custom-breadcrumb-trail li:after   {
        content:     '\E341';
    }       


/**
* Custom Breadcrumbs
************************************************/
.custom-breadcrumb-trail span {
    font-size: 14px;
    }

.custom-breadcrumb-trail ul { 
    list-style: none; 
    margin: 0; 
    }

.custom-breadcrumb-trail ul li { 
    display: inline-block;
    }

.custom-breadcrumb-trail li:last-of-type::after {
    display: none;
    }

.custom-breadcrumb-trail .home a:hover {
    text-decoration: none;
    }

.span-text {
    top: -9999em;
    left: -9999em;
    overflow: hidden;
    position: absolute;
    }   

/* Hides Custom Breadcrumbs On All Pages Also Hides SmugMug Breadcrumbs on Specific Pages */    
.custom-breadcrumb-trail,
.sm-user-ui .sm-page-node-XXXX .sm-page-widget-breadcrumb {
    display: none;
    }   

/* Displays Custom Breadcrumbs On Selected Pages */
.sm-user-ui .sm-page-node-XXXX .custom-breadcrumb-trail {
    display: block;
    }   

This is very basic because I have no idea how many pages/galleries/folders you want to change. It can get confusing pretty fast if you don't understand some basic HTML/CSS.

dragandjordjevic

Thanks I will give it a try.

dragandjordjevic

Works just fine. Finally managed to sit down and try it, looks great. Thanks again Mike