Breadcrumb Changes

leftquark

I wanted to give you a heads up to some minor updates that we'll be making, as early as tomorrow (Thursday, Aug 31), to the breadcrumbs found across SmugMug.

The "breadcrumb" is used to notify a viewer where in your site hierarchy they are. It starts with the home icon and then lists the folders and galleries that the current page is located within. Breadcrumbs are used all over SmugMug and in some cases didn't all look the same.

We've cleaned up some of the underlying infrastructure to make all the breadcrumbs similar, as well as improve the visual display of the breadcrumbs. For most of you, you may not notice the update, as this update was meant to mostly clean up and simplify things.

For some of you, who have customized your breadcrumbs with custom CSS, your changes will no longer work and the breadcrumb will return to its default state.

I've put together a list of CSS examples in the replies below this post which will show the old CSS and how to update it to work. We've combed through the most frequent customizations and should offer some help on how to fix your CSS (for the most part it's very minor tweaks to the CSS).

(cc @Allen, @denisegoldberg, @Hikin' Mike, @Ferguson, @ChancyRat, @jerryr, @Lille Ulven, others...)

Hikin' Mike

Thanks for the heads-up. I didn't see any negative changes on my site, so that's good for me. I use CSS to hide SM's breadcrumbs on my photos for sale and use custom breadcrumbs to match my WP site. I use SM's breadcrumbs for my family stuff and I didn't see any issues.

leftquark

@Hikin' Mike said:
Thanks for the heads-up. I didn't see any negative changes on my site, so that's good for me. I use CSS to hide SM's breadcrumbs on my photos for sale and use custom breadcrumbs to match my WP site. I use SM's breadcrumbs for my family stuff and I didn't see any issues.

Oops -- I forgot to mention that it's not live yet. It should be live as early as Thursday morning (today). I'll let you know when it is.

leftquark

Remove Breadcrumb

Old Code

/* Remove the breadcrumb from being displayed */
.sm-breadcrumb {
  display: none;
}
/* Show the breadcrumb for the owner only */
.sm-user-owner .sm-breadcrumb {
  display: block !important;
}

.sm-breadcrumb is no longer the containing element (what used to be the ul but is now an ol ). Instead, it is now .sm-breadcrumbs (plural)

Corrected CSS

/* Remove the breadcrumb from being displayed */
.sm-breadcrumbs {
  display: none;
}

/* Show the breadcrumb for the owner only */
.sm-user-owner .sm-breadcrumbs {
  display: block !important;
}

leftquark

Change Breadcrumb Color:

Old Code

/* Change the breadcrumb color */
.sm-breadcrumb-item, .sm-breadcrumb-item a {
    color: #00fffb!important;
}

This changes the color of the entire textual contents of Breadcrumbs (including the separators and the last crumb indicating the current page).

Targeting Breadcrumbs content blocks ONLY:

/* Crumb text, including the expand menu button for collapsible crumbs */
.sm-page-widget .sm-breadcrumbs .sm-breadcrumb-item .sm-button,
/* Chevron separator (>)*/
.sm-page-widget .sm-breadcrumbs .sm-breadcrumbs-separator,
/* Emphasized current page (h1 element)*/
.sm-page-widget .sm-breadcrumbs .sm-breadcrumb-item h1 {
    /* .sm-breadcrumb-item[data-is-emphasized] can be helpful
       in targeting the emphasized crumb */
      color: #00fffb; /* No longer need !important with the increased specificity */  
}

leftquark

Change Breadcrumb Link Color

Very similar to the example above. Targeting just the links can be done using .sm- breadcrumb-item .sm-button

leftquark

Add a Line Under the Breadcrumb

Old Code:

/* Add a line under the breadcrumb */
.sm-breadcrumb {
    border-bottom: 1px solid #595959;
    padding-bottom: 4px;
}

Another minor change - .sm-breadcrumbs (plural) instead of .sm-breadcrumb . Impacts Gallery Cover crumbs, however.

Corrected CSS

/* Add a line under the breadcrumb */
.sm-breadcrumbs {
    border-bottom: 1px solid #595959;
    padding-bottom: 4px;
}

Without impacting Gallery Cover crumbs:

/* Add a line under the breadcrumbs */
.sm-page-widget .sm-breadcrumbs {
    border-bottom: 1px solid #595959;
    padding-bottom: 4px;
}

leftquark

Move the Breadcrumb Up

Old Code:

/* Move the Breadcrumb Up */
.sm-breadcrumb {
   margin-top: -20px;
}

Yet again, .sm-breadcrumbs (plural) instead of .sm-Breadcrumb

Corrected CSS

/* Move the Breadcrumb Up */
.sm-breadcrumbs {
   margin-top: -20px;
}

Richard

Thanks for the heads-up, Aaron. I just looked at the CSS for my account and breadcrumb had already been changed to breadcrumbs (plural), and so far everything looks fine. I'm guessing it must be live, or the plural would have broken the display. Right?

Jtring

Let me add my thanks too for the very prompt, very timely announcement. I found I needed one tiny patch to my CSS.

Cygnus Studios

Thanks for the heads up. I didn't notice anything different, but switched to the plural just in case.

leftquark

The breadcrumb changes are now live.

denisegoldberg

@leftquark said:
The breadcrumb changes are now live.

I'm noticing a change that I didn't expect. With the gallery cover image on I am now seeing the gallery title both in the breadcrumb and in the cover image. Before this change the title only showed in the cover image. I much prefer the previous behavior, showing the gallery title only once, in the cover image.

Is this duplication expected?

leftquark

The duplication is not intended. We tested this thoroughly prior to release but appears to have snuck through when it went live. The Current Page in the Breadcrumb Content Block should be automatically hidden. I also caught this and we're hoping to have a fix for it in the morning.

Allen

I need to remove the huge gallery title in the breadcrumb. It also shows in the description as the sm-gallery-cover-title.
<h1 class="sm-gallery-cover-title">Fungi</h1>

Assume this would do it?
.sm-page-widget .sm-breadcrumbs h1 {display:none}

denisegoldberg

@Allen said:
I need to remove the huge gallery title in the breadcrumb. It also shows in the description as the sm-gallery-cover-title.

Allen -
Based on leftquark's response to my comment about this (the two entries above yours) it sounds like the gallery title in the breadcrumb duplicating the title in the cover image will be fixed today.

AceCo55

Thanks for the information & update -- once I changed to the plural, everything is back to what I wanted/expected

Allen

@denisegoldberg said:

@Allen said:
I need to remove the huge gallery title in the breadcrumb. It also shows in the description as the sm-gallery-cover-title.

Allen -
Based on leftquark's response to my comment about this (the two entries above yours) it sounds like the gallery title in the breadcrumb duplicating the title in the cover image will be fixed today.

That's what it sounded like.
Thanks

I've looked through all my CSS and only found a couple "breadcrumb" mentioned.
I did notice that the breadcrumb looks ridiculous on my iPhone.

Cygnus Studios

Anyway to get rid of the little house icon now?

Used to be;

/* breadcrumb */
.sm-breadcrumbs .sm-fonticon-Home
{
display:none;
}

I tried making it plural but that didn't do it.

BeautifulWorld

@Allen said:
I need to remove the huge gallery title in the breadcrumb. It also shows in the description as the sm-gallery-cover-title.
<h1 class="sm-gallery-cover-title">Fungi</h1>

Assume this would do it?
.sm-page-widget .sm-breadcrumbs h1 {display:none}

Hi Allen,
It worked for me. The first thing that struck me this morning was bad the extra large title at the end of the breadcrumb was and how unnecessary it was. I like the additional changes to the breadcrumbs and now with this I think it is perfect for me.

Thanks!

leftquark

@Cygnus Studios said:
Anyway to get rid of the little house icon now?

Used to be;

/* breadcrumb */
.sm-breadcrumbs .sm-fonticon-Home
{
display:none;
}

I tried making it plural but that didn't do it.

You can get rid of the home icon by itself using

/* Get rid of the home icon */
.sm-breadcrumbs .sm-icon-Home {
    display: none;
}

However, the carrot (">") will still remain. To get rid of both:

/* Get rid of the home icon and the first carrot */
.sm-breadcrumbs .sm-breadcrumb-item:nth-of-type(1) {
    display: none;
}

Cygnus Studios

Perfect, thank you much!

kgphotos

What would be the new code for making the breadcrumb font-size larger? My breadcrumbs are too small now. The font size is supposed to be 22px. This is the CSS code I have:

/* Change the Font Size of the Breadcrumb */
.sm-breadcrumb {
font-size: 22px;
}

What would be the new code now to get it back to 22px?
Thank you for your answer.

-Karen

www.imaginelivecapture.com

Allen

Try it with the "s" on sm-breadcrumb.

.sm-breadcrumbs {
font-size: 22px;
}

kgphotos

Thank you Allen. I did add the "s". However, the home font icon (house) is no longer aligned with the breadcrumb. See screenshot #1. Any idea how to fix it? Also, when I go into a folder, the name of the folder is small, while the name of the gallery is large. Any idea how to fix that as well? See screenshot #2.

Thank you!

-Karen

www.imaginelivecapture.com

denisegoldberg

@leftquark said:
The duplication is not intended. We tested this thoroughly prior to release but appears to have snuck through when it went live. The Current Page in the Breadcrumb Content Block should be automatically hidden. I also caught this and we're hoping to have a fix for it in the morning.

Any status on this one? I'd prefer not to add CSS to change something that you're going to fix soon.

Allen

Your second shot is in a gallery not folder. The gallery name is suppose to be removed from the breadcrumb by Smug because it's also shown on the gallery description.

leftquark

@denisegoldberg said:

@leftquark said:
The duplication is not intended. We tested this thoroughly prior to release but appears to have snuck through when it went live. The Current Page in the Breadcrumb Content Block should be automatically hidden. I also caught this and we're hoping to have a fix for it in the morning.

Any status on this one? I'd prefer not to add CSS to change something that you're going to fix soon.

The fix is live

denisegoldberg

@leftquark said:
The fix is live

Thank you, looks much better!

Lille Ulven

Thanks for the heads-up, @leftquark (though I didn't see it...). Got to go and find out what changes I had made, I suppose

Hm...slightly weird: I had to remove the plural -s from the breadcrumbs in my customizations in order to get the colors back...strange things happen, I guess.

James Lyall

Having been away from SmugMug for a while, I find on my return that my CSS formatting of breadcrumbs no longer works.
I have just discovered Aaron's post from last month reporting a revision of the SmugMug coding, but I have not been able to make effective modifications to my CSS.

My old code was:

/* Sets the main breadcrumb font size*/
.sm-breadcrumb {
  font-size: 18px;
}

/* Set the galleries breadcrumb font size*/
.sm-page-widget-breadcrumb .sm-breadcrumb h1 {
    display: inline;
    font-size: 20px;
    font-weight:400;
}

/* Make breadcrumb Home icon a bit bigger */
.sm-page-widget-breadcrumb .sm-breadcrumb .sm-fonticon {
    font-size: 36px !important;
}

I posted my problem on the SmugMug Customisation forum a couple of days ago but had no response. I hope that I am not out of order in repeating my post on this forum. What am I missing in not managing to restore the required formatting with the new code? I shall be most grateful for expert help here. Thank you in advance.