Vertical Breadcrumb?

Darter02 · May 12, 2014

Has anyone figured out how to make the breadcrumbs align vertically? Basically turning them 90° clockwise?

Smug Eric · May 13, 2014

Not that I've come across.

Darter02 · 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...

basflt · 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 )

Darter02 · 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?

Darter02 · 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?

Allen · 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 {

Darter02 · 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!

Darter02 · 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;
}

Darter02 · 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°.

Darter02 · 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

Darter02 · 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;
 
}

pilotdave · 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

Darter02 · 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!

Darter02 · 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.

Darter02 · May 15, 2014

Also, found this awesome resource on using Media Queries.

Darter02 · 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;
 }
}

Darter02 · 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.

Allen · 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">

Darter02 · 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.

Vertical Breadcrumb?

Comments