As Smugmug provides it, the breadcrumb object is not very easy to work with. The different parts of the breadcrumb are not distinctly labeled to be operated on by with CSS and the > indicators in between the different parts are not labeled at all. This customization applies the desired CSS identifiers to all the different parts of the breadcrumb. This allows you to all sorts of things to the breadcrumb including the following:

• Hide parts of the breadcrumb - such as display a breadcrumb without categories and subcategories so it's just Home > Gallery Name or just Gallery Name
• Format different parts of the breadcrumb differently using CSS (different colors or fonts or sizes)

To install this customization, follow these three steps:

Step 1

Copy this script to your bottom javascript. Make sure that you get the entire script and nothing extra beyond the script when copying to your bottom javascript.

  
// ------------------------------------------------------------------------------
// Code to tag the different pieces of the breadcrumb so parts can
// be easily hidden with CSS.
//
// For reference, breadcrumbs have these forms:
// Home > category > sub-category > title
// Event > category > sub-category > title
// Community > Home > category > sub-category > title
// Sub-categories are optional
//
// Note: This script does not operate on sharegroup breadcrumbs and
// it may not operate on community breadcrumbs if customization is not
// configured for the community.
// 
// Revision 1.0 - First Release
// Revision 1.1 - Fixed a problem with > chars in some breadcrumbs (it appears that Smugmug may have modified the HTML for the breadcrumbs)
// 
// See http://www.dgrin.com/showthread.php?p=1494935 for support or questions.
// ------------------------------------------------------------------------------
YE.onContentReady("breadCrumbTrail", function() 
{
    // label the top, cat, sub-cat
    var topName = "home";
    var topFullName = "";
    var isCommunity = false;
    var index = 0;
    try
    {
        var links = Sizzle("a.nav", this);
        if (links[0].href.search(/http:\/\/[^\/]*\/community\//) != -1)
        {
            isCommunity = true;
            YD.addClass(links[0], "breadCrumbTrail_community");
            index++;
        }
        if (links[index].href.search(/http:\/\/[^\/]*\/event\//) != -1)
        {
            topName = "event";
        }
        else
        {
            topName = "home";
        }
        topFullName = "breadCrumbTrail_" + topName;
        YD.addClass(links[index], topFullName);
        YD.addClass(links[index + 1], "breadCrumbTrail_category");
        YD.addClass(links[index + 2], "breadCrumbTrail_subcategory");
    } catch(e) {}
    
    // put the > chars into a span with appropriate class
    var re = /<\/a>\s*(&nbsp;)*\s*(&gt;|>)\s*(&nbsp;)*\s*</i;
    var str = this.innerHTML;
    str = str.replace(/\n/g, " ");        // str.replace won't match across line boundaries so remove line boundaries
    if (isCommunity)
    {
        str = str.replace(re, '</a><span class="breadCrumbTrail_community">!x!x!</span><');    // community
    }
    str = str.replace(re, '</a><span class="' + topFullName + '">!x!x!</span><');                // event or home
    str = str.replace(re, '</a><span class="breadCrumbTrail_category">!x!x!</span><');        // category
    str = str.replace(re, '</a><span class="breadCrumbTrail_subcategory">!x!x!</span><');    // sub-category
    str = str.replace(/>!x!x!<\/span></g, "> &gt; <\/span><");
    this.innerHTML = str;
    this.style.visibility = "visible";    // restore visibility, can be set to hidden in CSS so it won't show until it's modified
});

Step 2

Add this CSS to your advanced customization CSS:

/* hide breadcrumb by default so it doesn't show until after it's been modified */
#breadCrumbTrail {visibility: hidden;}


Step 3

Then, add whatever CSS you want in order to modify the breadcrumb. The script adds the following CSS classes to the relevant pieces of the script that allow you to target CSS rules at it.

breadCrumbTrail_home
breadCrumbTrail_event
breadCrumbTrail_category
breadCrumbTrail_subcategory
breadCrumbTrail_community

Both the name and the > following it are given the same class so you can hide both with one piece of CSS. So, if you want to only show the gallery name and hide all of the rest of the breadcrumb, you would add this CSS:

.breadCrumbTrail_home, .breadCrumbTrail_category, .breadCrumbTrail_subcategory {display:none;}

If you want to show only the top level and the gallery name (but no categories and sub-categories) you would use this CSS:

.breadCrumbTrail_category, .breadCrumbTrail_subcategory {display:none;}

Keep in mind that since this is just CSS, you can target your CSS rules to specific categories or subcategories too using other identifiers in the page to target what page you're on. So, if you want to hide the category name, but only in the "Other" category, you'd do that with CSS like this

.category_Other .breadCrumbTrail_category, .category_Other .breadCrumbTrail_subcategory {display:none;}

Note: The script changes the visibility style setting on the breadCrumbTrail object in order to keep the breadcrumb hidden until after it's modified (so it doesn't flash on screen in it's unmodified state before it gets modified). That means you should not be using the visibility setting to hide the breadCrumbTrail in certain galleries. Use the display: none option instead.

Thank you so much for this John! I've been meaning to ask if this was even possible

wow!
genius!

hey jfriend,

did you realize this new code you wrote solve all my problems posted here:

http://www.dgrin.com/showthread.php?t=110846&page=2

Now i have the breadCrumbTrail personalized just in my events category like "Event > Gallery", so people can go back to main event page without needing to click on event link again or use that "recent gallery visited" stuff.


I added this to my CSS:

#breadCrumbTrail {visibility: hidden;}
.category_Events.notLoggedIn .breadCrumbTrail_home, .breadCrumbTrail_category, .breadCrumbTrail_subcategory, breadCrumbTrail_community {display:none;}
.category_Galleries.notLoggedIn #breadCrumbTrail {display: none;}


SWEET. THANK YOU!

Originally Posted by hackmann hey jfriend, did you realize this new code you wrote solve all my problems posted here: http://www.dgrin.com/showthread.php?t=110846&page=2 Now i have the breadCrumbTrail personalized just in my events category like "Event > Gallery", so people can go back to main event page without needing to click on event link again or use that "recent gallery visited" stuff. I added this to my CSS: #breadCrumbTrail {visibility: hidden;} .category_Events.notLoggedIn .breadCrumbTrail_home, .breadCrumbTrail_category, .breadCrumbTrail_subcategory, breadCrumbTrail_community {display:none;} .category_Galleries.notLoggedIn #breadCrumbTrail {display: none;} SWEET. THANK YOU!

I remembered that many people (like you) have asked for this kind of functionality which is why I finally wrote it (I've been thinking about doing it for several months). Glad it was exactly what you needed.

awesome!!
now i'm only having trouble customizing the look (font, etc) of the gallery name... the only thing that seems to work is the size...I would like to center it, most importantly...i have this in my css

#breadCrumbTrail {visibility: hidden;}
.breadCrumbTrail_home, .breadCrumbTrail_category, .breadCrumbTrail_subcategory {display:none;}
#breadCrumbTrail {
font-family: Garamond, sans-serif;
font-size: 16px;
font-wieght: italic;
font-color: #643d34;
float: center;
}

thank you!

Originally Posted by Crystal Clear Photography awesome!! now i'm only having trouble customizing the look (font, etc) of the gallery name... the only thing that seems to work is the size...I would like to center it, most importantly...i have this in my css #breadCrumbTrail {visibility: hidden;} .breadCrumbTrail_home, .breadCrumbTrail_category, .breadCrumbTrail_subcategory {display:none;} #breadCrumbTrail { font-family: Garamond, sans-serif; font-size: 16px; font-wieght: italic; font-color: #643d34; float: center; } thank you!

This CSS does not look right (float: center is not a valid option for example), but I can't find a place on your site where you're using this. Please post a link to a non-password protected page where you want this to be working so I can take a look.

Originally Posted by jfriend This CSS does not look right (float: center is not a valid option for example), but I can't find a place on your site where you're using this. Please post a link to a non-password protected page where you want this to be working so I can take a look.

http://www.crystalclearphotos.com/Pr...77866035_dvi5V

thanks :)

Originally Posted by Crystal Clear Photography http://www.crystalclearphotos.com/Pr...77866035_dvi5V thanks :)

Did you try this in your theme?

#breadCrumbTrail {text-align:center;}

Originally Posted by Crystal Clear Photography http://www.crystalclearphotos.com/Pr...77866035_dvi5V thanks :)

To format it, use this:

#breadCrumbTrail #albumTitle {
    font-style: italic;
    font-size: 16px;
    font-family: Garamond, sans-serif !important;
    color: #643d34 !important;
}

#breadCrumbTrail {text-align: center;}

Originally Posted by jfriend To format it, use this: #breadCrumbTrail #albumTitle { font-style: italic; font-size: 16px; font-family: Garamond, sans-serif !important; color: #643d34 !important; } #breadCrumbTrail {text-align: center;}

thanks...italic works but not the font and color...

Originally Posted by Crystal Clear Photography thanks...italic works but not the font and color...

You can start out by putting in the actual CSS that I proposed, not the modified version you're using. Your modifications made it so that it doesn't work. The font, color, etc... needs to go on the albumTitle object, not the whole breadCrumbTrail object.

Only the centering goes on the whole breadCrumbTrail object.

Please use exactly what I proposed.

Originally Posted by jfriend You can start out by putting in the actual CSS that I proposed, not the modified version you're using. Your modifications made it so that it doesn't work. The font, color, etc... needs to go on the albumTitle object, not the whole breadCrumbTrail object. Only the centering goes on the whole breadCrumbTrail object. Please use exactly what I proposed.

OOPPS! missed that part, sorry :) thanks so much!

This is the thread I should have asked about hiding the breadcrumb trail (except for my homepage) in my Guestbook. But just found this now. Ok, I got everything installed in my javascript, and thought I'd figured out the right thing to put in CSS to target just that one gallery. But I've probably goofed somewhere. It's working great in that Guestbook gallery. But it seems to be hiding just the sub-category breadcrumb trail in all my other galleries that are part of a sub-category.

I have this in CSS: (just putting it here too so others can figure this out if needed):

/* hide breadcrumb by default so it doesn't show until after it's been modified */
#breadCrumbTrail {visibility: hidden;}

.gallery_4555107 .breadCrumbTrail_category, .breadCrumbTrail_subcategory {display:none;}

Where's my goof? I'm sure it'll be something stupid. :-)

Here's a sample gallery so you can see the missing sub-cat in the breadcrumb: http://www.winsomeworks.com/Travel/L...25463658_Nrh8z

Originally Posted by WinsomeWorks This is the thread I should have asked about hiding the breadcrumb trail (except for my homepage) in my Guestbook. But just found this now. Ok, I got everything installed in my javascript, and thought I'd figured out the right thing to put in CSS to target just that one gallery. But I've probably goofed somewhere. It's working great in that Guestbook gallery. But it seems to be hiding just the sub-category breadcrumb trail in all my other galleries that are part of a sub-category. I have this in CSS: (just putting it here too so others can figure this out if needed): /* hide breadcrumb by default so it doesn't show until after it's been modified */ #breadCrumbTrail {visibility: hidden;} .gallery_4555107 .breadCrumbTrail_category, .breadCrumbTrail_subcategory {display:none;} Where's my goof? I'm sure it'll be something stupid. :-) Here's a sample gallery so you can see the missing sub-cat in the breadcrumb: http://www.winsomeworks.com/Travel/L...25463658_Nrh8z

You have to put the .gallery_xxxx part in each piece of the CSS rule like this:

/* hide breadcrumb by default so it doesn't show until after it's been modified */
#breadCrumbTrail {visibility: hidden;}

.gallery_4555107 .breadCrumbTrail_category, .gallery_4555107 .breadCrumbTrail_subcategory {display:none;}

Also, please be very careful with your colors on dgrin. I read dgrin on a dark gray background and have a hard time reading purple text on that background.

Originally Posted by jfriend You have to put the .gallery_xxxx part in each piece of the CSS rule like this: /* hide breadcrumb by default so it doesn't show until after it's been modified */ #breadCrumbTrail {visibility: hidden;} .gallery_4555107 .breadCrumbTrail_category, .gallery_4555107 .breadCrumbTrail_subcategory {display:none;} Also, please be very careful with your colors on dgrin. I read dgrin on a dark gray background and have a hard time reading purple text on that background.

Ahhh, see, I knew it would be something silly. Looked at a bunch of examples but didn't catch that part. Sorry about the color. For me the purple is actually easier to read than the black. I'm on the dark grey too, although I absolutely hate it. (too dark, too depressing, makes me grumpy... but the white one is even worse because the contrast pains my eyes.) They took away all the good themes on DGrin. It's really a shame they gave us these colors just about the same time they took away the themes that would have actually made them useful! Ok, thanks, John.

Originally Posted by WinsomeWorks I'm on the dark grey too, although I absolutely hate it. (too dark, too depressing, makes me grumpy... but the white one is even worse because the contrast pains my eyes.) They took away all the good themes on DGrin. It's really a shame they gave us these colors just about the same time they took away the themes that would have actually made them useful!

I'm sorry you hate the theme on Dgrin :(

It became very time consuming to maintain all those themes, Anna Lisa - and then we upgraded Dgrin's software and those themes weren't compatible.

One day we're going to have a new skin that will be even better.

You could also try Grey Matter if you want.

Originally Posted by Andy I'm sorry you hate the theme on Dgrin :( It became very time consuming to maintain all those themes, Anna Lisa - and then we upgraded Dgrin's software and those themes weren't compatible. One day we're going to have a new skin that will be even better. You could also try Grey Matter if you want.

Grey Matter is what I'm on.... like I said, dark & depressing. We just need something that's nice & in-between & read-able. There are two very dark choices right now... dark grey or black, and one blinding white one. All monotone and no color. Ok, will look forward greatly to the new one.

I'm playing around with this new code to simplify my breadcrumbs....
I've got it working on one section of my site but how do I get rid of the ">"

this page....

http://www.bhockensmith.com/Clients/Papadosio

Originally Posted by WinsomeWorks Grey Matter is what I'm on.... like I said, dark & depressing. We just need something that's nice & in-between & read-able. There are two very dark choices right now... dark grey or black, and one blinding white one. All monotone and no color. Ok, will look forward greatly to the new one.

Originally Posted by bhockensmith I'm playing around with this new code to simplify my breadcrumbs.... I've got it working on one section of my site but how do I get rid of the ">" this page.... http://www.bhockensmith.com/Clients/Papadosio

It appears that something changed in the HTML for breadcrumbs so the script wasn't working properly. I've updated the script (in the first post of this thread) so it will work on the ">" now.