Add some HTML/CSS to "All galleries" but not to smugmug-style...

phaserbeam · February 15, 2014

Hi...

based on some ideas from this thread here especially with some help from this post i created a "Back to top"-link that is not using images but text only. Here is how it looks like (check the lower right corner).

Here is the HTML-code:

<div class="back_to_top">
  <a href="#" title="Back to Top">
    <div class="sm-button sm-button-size-large sm-button-skin-default sm-button-nochrome">
      <span class="sm-fonticon">^</span>
      <p>Back to top</p>
    </div>
  </a>
</div>

And here is the CSS:

.back_to_top {
  opacity: 0.3;
  -moz-opacity: 0.3;
  -webkit-opacity: 0.3;
}

.back_to_top:hover {
  opacity: 1.0;
  -moz-opacity: 1.0;
  -webkit-opacity: 1.0;
}

.back_to_top p {
  margin-top: -1.2em;
}

.back_to_top a {
  position: fixed;
  bottom: .2em;
  right: .8em;
}

Currently this is applied to a page. I would like to add this to my "All galleries" section using CUSTOMIZE but it should only apply to gallery styles that can be scrolled down, like collage landscape or thumbnails. This code should not appear on smugmug-gallery styles.

Since this HTML-content box is placed outside the gallery container using something like this is not going to work:

.sm-gallery-smugmug .back_to_top {
    display:none;
}

Any ideas how to exclude this code for specific gallery styles?

DanCarl97 · February 16, 2014

I don't think this is possible. I've spent a good five minutes routing through the code and like you said - there is no class, etc. that is unique to the Smugmug Gallery Style which is outside the gallery div itself.

Perhaps we can hope for SmugMug to add a Gallery Style class to the body tag so that we can use CSS for different gallery styles.

Allen · February 16, 2014

phaserbeam wrote: »

...Any ideas how to exclude this code for specific gallery styles?

Every page has a unique class assigned in the body tag. Example from one of my galleries.

<body id="yui_3_8_0_1_1392562993410_1696" class="sm-user-pro sm-user-loggedin sm-user-owner
sm-page sm-page-node sm-page-node-vnM8Q sm-page-gallery sm-page-gallery-album" style=""

.sm-page-node-vnM8Q .back_to_top {display:none}

I've seen somewhere class names for each gallery style but can't find it now.

phaserbeam · February 16, 2014

Allen wrote: »

Every page has a unique class assigned in the body tag.

The unique page class does not help much... i would have to exclude all galleries using the smugmug style manually...

I ended up now with adding the code to all galleries... even to smugmug style. The code my not be needed for desktop screen sizes but if someone is using a smaller display size even the smugmug style need screen scrolling.

Add some HTML/CSS to "All galleries" but not to smugmug-style...

Comments