Vertical Breadcrumb?

Darter02Darter02 Registered Users Posts: 947 Major grins
edited May 21, 2014 in SmugMug Customization
Has anyone figured out how to make the breadcrumbs align vertically? Basically turning them 90° clockwise?

Comments

  • Smug EricSmug Eric Registered Users, Retired Mod Posts: 333
    edited May 13, 2014
    Not that I've come across.
    Eric
    Support Hero and Customeister
    http://www.smugmug.com/help
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited May 13, 2014
    If I added a second breadcrumb to all galleries, and placed it way over on the far right, would something like this CSS code work?
    div
        {
        transform: rotate(90deg);
        -ms-transform: rotate(90deg); /* IE 9 */
        -webkit-transform: rotate(90deg); /* Safari and Chrome */
        -o-transform: rotate(90deg); /* Opera */
        -moz-transform: rotate(90deg); /* Firefox */
        }
    

    I'm literally running out the door to chaperon my kindergartens zoo field trip, or I'd spend more time experimenting with this myself. I just thought I'd post this here so that either some wizard may wave a magic wand, or so I could find this code I just found when I get back...
  • basfltbasflt Registered Users Posts: 1,882 Major grins
    edited May 13, 2014
    i would suggest something like this ;


    .sm-breadcrumb{
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    position:fixed;
    top:80px;
    right:5px;
    }

    however , it is necessary to adjust the top and right values to your needs

    also ; you can use -90 deg , so it rotate the opposite

    and maybe you can use absolute for position ( try it )
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited May 13, 2014
    Cool beans! That does indeed rotate the breadcrumbs. Here's a page with two breadcrumbs. I want to see if I can get the one on the right to rotate 90°, and then I'll try to place to the far right, just below my header. I can't seem to get it to just rotate the ONE breadcrumb, instead of both.

    Is there a way to specify a specific element on a page when there are more than one with the same class name?
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited May 13, 2014
    I've been trying all sorts of different codes but I can't seem to find a specific ID for just the breadcrumbs on the right. Can anyone tell me how you find it? Am I totally off my rocker even trying?

    i-XVB3H8X-L.jpg
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited May 13, 2014
    Isn't sm-page-wigdet-6258463 it?

    <div id="sm-page-widget-vQQnp43J" class="sm-page-widget sm-page-widget-breadcrumb sm-page-widget-6258463" data-typeid="6258463">

    I got your 2nd breadcrumb to rotate using it.

    .sm-page-widget-625846 .sm-breadcrumb {
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited May 14, 2014
    Not really understanding how things are IDed, I was trying "sm-page-widget-vQQnp43J" and other stuff found at the beginning of lines. I'd Googled a bunch of pages on IDing classes, etc., but still had no clue. You have shown me how to find that ID! Thanks!
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited May 14, 2014
    I used the following code to place it where I want on the All Gallery level. The only problem is it seems to drift from place to place in each gallery. Is there something I'm missing here that would lock it in place?
    /*rotate and place spine breadcrumb*/
    .sm-page-widget-6266593 .sm-breadcrumb {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    position:fixed;
    top:325px;
    right:-126px;
    z-index: 99;
    padding: 0;
    }
    
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited May 14, 2014
    It's the length of the breadcrumb causing it to drift around. The longer the breadcrumb, the further to the left it appears on the page. It's a little disorienting trying to place it because everything is 90°.
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited May 14, 2014
    Hmmm... should I be trying to anchor the home icon in place?
    .sm-page-widget-6266593 .sm-fonticon .sm-fonticon-small .sm-fonticon-Home
    
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited May 14, 2014
    I ended up using this, which keeps the breadcrumb in the same place in my right margin, but the text it no longer rotated. That doesn't bother me too much.
    /*Place spine breadcrumb*/
    .sm-page-widget-6266593 .sm-breadcrumb {
      opacity: 1;
      position: fixed;
      top: 0;
      left: 94%;
      width: 0;
      margin-left: 5px;
      margin-top: 250px;
      text-align: left;
      padding: 0;
      z-index: 99;
     
    }
    
  • pilotdavepilotdave Registered Users Posts: 785 Major grins
    edited May 15, 2014
    Darter02 wrote: »
    I ended up using this, which keeps the breadcrumb in the same place in my right margin, but the text it no longer rotated. That doesn't bother me too much.
    /*Place spine breadcrumb*/
    .sm-page-widget-6266593 .sm-breadcrumb {
      opacity: 1;
      position: fixed;
      top: 0;
      left: 94%;
      width: 0;
      margin-left: 5px;
      margin-top: 250px;
      text-align: left;
      padding: 0;
      z-index: 99;
     
    }
    

    Might want to check how that looks on mobile devices. Probably want to implement an alternative for small screens.

    Dave
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited May 15, 2014
    Good point! I sort of rushed through that yesterday. I would like to eliminate that totally from mobile devices. Maybe even the two buttons below it. Guess I'll be Googling that a lot this morning trying to sort out how to do so.

    If anyone who knows anything, who happens upon this thread, and doesn't see that I've posted a solution, you're very welcome to offer clues. Thanks!
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited May 15, 2014
    I used
    @media screen and (min-width: 960px) {
    
    to strip the placement rules from the spine's breadcrumb. Now I'm trying to figure out how to make it only appear when that minimum screen width is detected.
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited May 15, 2014
    Also, found this awesome resource on using Media Queries.
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited May 15, 2014
    Thanks for that heads up. I think I fixed it for mobile. It now disappears on my Droid, and my kid's Samsung Galaxy Tab. I also learned that you can use CSS to design different layouts for different screen sizes using the same site. Here's another resource I found helpful this morning.
    /*Place spine breadcrumb*/
    @media screen and (min-width: 768px) {
     .sm-page-widget-6266593 .sm-breadcrumb {
       opacity: 1;
       position: fixed;
       top: 0;
       left: 94%;
       width: 0;
       margin-left: 5px;
       margin-top: 250px;
       text-align: left;
       padding: 0;
       z-index: 99;
     }
    }
    
    
    @media screen and (max-width: 1024px) {
     .sm-page-widget-6266593 .sm-breadcrumb {
       display:none;
     }
    }
    
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited May 16, 2014
    Here's a little snag I just encountered. I thought I'd share in case someone else ever tries something like this.

    I had placed this modification in a CSS block at the All Galleries level. If you want to have a unique gallery from the rest of your site, and hit the "Make This Gallery Custom," it will strip the CSS code out of the block. When you make the gallery separate from the rest of the site the new breadcrumb is assigned a NEW ID. You'll have to create a new rule, with a gallery specific ID, to each new custom gallery.
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited May 16, 2014
    The ID changes with every page but the class should remain the same.

    <div id="sm-page-widget-vQQnp43J" class="sm-page-widget sm-page-widget-breadcrumb sm-page-widget-6258463" data-typeid="6258463">
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited May 21, 2014
    When I said I "ID" I may have used the wrong nomenclature. On my all galleries level the class I targeted is "sm-page-widget-6266593." Those numbers are what I meant as "ID." This widget appears on all my galleries that retain my All Galleries layout. If I hit the "Make This Gallery Custom" button that class number changes. I'd have to create a custom CSS black for each separate gallery that is not using the All Galleries layout. So while most of my galleries have the "spine breadcrumb," my wedding galleries do not, which is fine with me.

    Also, using Statcounter to view visitor paths I'm seeing a change in how my site is used. Where before visitors tended to view mainly images in one particular gallery, now I see visitors moving around a lot more. While I can't say it's totally due to this new addition, I can say more folks go up a level, and then into another gallery. I can only surmise that this breadcrumb is leading users to do this. Is it perfect? Nope, I still need to sort out a few things.
Sign In or Register to comment.