Breadcrumb Changes

leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
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...)

dGrin Afficionado
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
«1

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 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 Registered Users, Retired Mod Posts: 3,784 Many Grins

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

    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    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;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    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 */  
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    Change Breadcrumb Link Color

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

    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    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;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    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;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • RichardRichard Administrators, Vanilla Admin Posts: 19,893 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 Registered Users Posts: 673 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 Registered Users Posts: 2,294 Major grins

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

    Steve

    Website
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    The breadcrumb changes are now live.

    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 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 Registered Users, Retired Mod Posts: 3,784 Many Grins

    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.

    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • AllenAllen Registered Users Posts: 10,007 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 index | My Blog
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 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 Registered Users Posts: 950 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 Registered Users Posts: 10,007 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 index | My Blog
  • Cygnus StudiosCygnus Studios Registered Users Posts: 2,294 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
  • BeautifulWorldBeautifulWorld Registered Users Posts: 64 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 Registered Users, Retired Mod Posts: 3,784 Many Grins

    @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;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Cygnus StudiosCygnus Studios Registered Users Posts: 2,294 Major grins

    Perfect, thank you much!

    Steve

    Website
  • kgphotoskgphotos Registered Users Posts: 106 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 Registered Users Posts: 10,007 Major grins

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

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

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • kgphotoskgphotos Registered Users Posts: 106 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 Administrators Posts: 14,220 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 Registered Users Posts: 10,007 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 index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    @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

    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator

    @leftquark said:
    The fix is live

    Thank you, looks much better!

  • Lille UlvenLille Ulven Registered Users Posts: 567 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.

    https://www.lilleulven.smugmug.com - The Photos of my travels
  • James LyallJames Lyall Registered Users Posts: 202 Major grins
    edited October 10, 2017

    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.

Sign In or Register to comment.