Breadcrumb Changes

leftquarkleftquark SmugMug Product TeamPosts: 2,964Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
edited September 1, 2017 in SmugMug Product News

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...)

SmugMug Director of Product / dGrin Afficionado
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 3,461Registered Users Major grins

    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.

  • leftquarkleftquark SmugMug Product Team Posts: 2,964Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    @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.

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark SmugMug Product Team Posts: 2,964Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited August 31, 2017

    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;
    }
    
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark SmugMug Product Team Posts: 2,964Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited August 31, 2017

    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 */  
    }
    
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark SmugMug Product Team Posts: 2,964Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    Change Breadcrumb Link Color

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

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark SmugMug Product Team Posts: 2,964Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited August 31, 2017

    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;
    }
    
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark SmugMug Product Team Posts: 2,964Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    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;
    }
    
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • RichardRichard Mildly bemused Madrid, SpainPosts: 17,840Administrators, Vanilla Admin moderator
    edited August 31, 2017

    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?

  • JtringJtring Major grins CaliforniaPosts: 379Registered Users Major grins

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

    Jim Ringland . . . . . jtringl.smugmug.com
  • Cygnus StudiosCygnus Studios Commercial Photographer San Francisco's North BayPosts: 2,266Registered Users Major grins

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

    Steve

    Website | Gear
  • leftquarkleftquark SmugMug Product Team Posts: 2,964Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    The breadcrumb changes are now live.

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • denisegoldbergdenisegoldberg Major grins North Andover, MAPosts: 11,055Super Moderators moderator
    edited September 1, 2017

    @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?

  • leftquarkleftquark SmugMug Product Team Posts: 2,964Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    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.

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,228Registered Users Major grins
    edited September 1, 2017

    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}

    Al - Just a volunteer here having fun
    My Website | My Blog
  • denisegoldbergdenisegoldberg Major grins North Andover, MAPosts: 11,055Super Moderators moderator

    @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.

  • AceCo55AceCo55 Aussie Grinner Posts: 942Registered Users Major grins

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

    My opinion does not necessarily make it true. What you do with my opinion is entirely up to you.
    www.acecootephotography.com
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,228Registered Users Major grins
    edited September 1, 2017

    @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.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • Cygnus StudiosCygnus Studios Commercial Photographer San Francisco's North BayPosts: 2,266Registered Users Major grins

    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.

    Steve

    Website | Gear
  • BeautifulWorldBeautifulWorld Beginner grinner ChicagoPosts: 32Registered Users Big grins

    @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!

  • leftquarkleftquark SmugMug Product Team Posts: 2,964Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    @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;
    }
    
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Cygnus StudiosCygnus Studios Commercial Photographer San Francisco's North BayPosts: 2,266Registered Users Major grins

    Perfect, thank you much!

    Steve

    Website | Gear
  • kgphotoskgphotos Big grins Posts: 106Registered Users Major grins

    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

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,228Registered Users Major grins

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

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

    Al - Just a volunteer here having fun
    My Website | My Blog
  • kgphotoskgphotos Big grins Posts: 106Registered Users Major grins

    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

  • denisegoldbergdenisegoldberg Major grins North Andover, MAPosts: 11,055Super Moderators moderator

    @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.

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,228Registered Users Major grins
    edited September 4, 2017

    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.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • leftquarkleftquark SmugMug Product Team Posts: 2,964Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    @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

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • denisegoldbergdenisegoldberg Major grins North Andover, MAPosts: 11,055Super Moderators moderator

    @leftquark said:
    The fix is live

    Thank you, looks much better!

  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 444Registered Users Major grins
    edited September 15, 2017

    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 :wink:

    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.

    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
Sign In or Register to comment.