Remove unlisted box from gallery thumbs?

spider-t · August 14, 2013

Is there a way to remove the box that says "unlisted" and sits on top of all the gallery thumbnails in my Events? (see screenshot).

I would like to hike that unlisted box on my entire site when I'm not logged in. Any CSS to do that?

thanks!!!!
Trish

denisegoldberg · August 14, 2013

Unlisted items will show only when you are logged in. If you have customers who need access to unlisted galleries you will need to give them a direct URL.

--- Denise

spider-t · August 14, 2013

Thanks Denise,

This screenshot was taken in a browser where I am not logged in. So that's what my Events look like. I give my customers links to their events.

Trish

denisegoldberg wrote: »

Unlisted items will show only when you are logged in. If you have customers who need access to unlisted galleries you will need to give them a direct URL.

--- Denise

garrettm30 · August 14, 2013

Are you sure about that? I can't find that anywhere on your site. Perhaps it's a bug. Do you mind sharing a link to that or similar folder that shows that behavior? Or perhaps you could create a test folder that does the same thing. Or you could send me a link in a private message if you don't want to share it public. If it is a bug, I can still write some simple CSS that will hide "unlisted" only when logged out as a temporary solution. I don't think you would want to hide it under all cases, because it is useful for your sake. In the long term, if it really is listing unlisted galleries, that should probably be fixed by SmugMug.

spider-t · August 14, 2013

Yes, I'm sure. You don't see the unlisted block on my events any longer because I added the following code to my site to hide all unlisted block always.

/*remove unlisted bock*/
.sm-tile-content .sm-badge-text {
display: none;
}

Which is not quite the fix I was hoping for. I was hoping for code that would hide the unlisted box only when I was logged out.

You won't see the unlisted galleries by browsing my site, only by visiting an unlisted event link. Here's one: http://www.trishtunney.com/event/Endeavor-Summit/qEpMf5ekrFgdw

If you want to see unlisted galleries with the box over them, go to that link and remove that code from the footer using some fancy dev tool. If that's possible. :-)

thanks!
Trish

garrettm30 wrote: »

Are you sure about that? I can't find that anywhere on your site. Perhaps it's a bug. Do you mind sharing a link to that or similar folder that shows that behavior? Or perhaps you could create a test folder that does the same thing. Or you could send me a link in a private message if you don't want to share it public. If it is a bug, I can still write some simple CSS that will hide "unlisted" only when logged out as a temporary solution. I don't think you would want to hide it under all cases, because it is useful for your sake. In the long term, if it really is listing unlisted galleries, that should probably be fixed by SmugMug.

garrettm30 · August 15, 2013

spider-t wrote: »

If you want to see unlisted galleries with the box over them, go to that link and remove that code from the footer using some fancy dev tool. If that's possible. :-)
Trish

It is possible, and that's what I did. :ivar And sure enough, when I removed your code, I DID see unlisted, even though I was logged out (I have no password at all of course). I'm not sure if it is supposed to be that way or not.

Anyway, the solution I recommend is to leave the CSS in there that you already put in there, then put this code just under it:

.sm-user-owner .sm-tile-content .sm-badge-text {
  display: block;
}

That code basically undoes your code only when you are logged in.

And by the way, the "fancy dev tool" is the web developer tools built into Firefox. Specifically, the Style Editor is what you need there (and the Inspector is the other helpful tool for me). From there, you can see all the stylesheets that are active on any page. Most of the styles are SmugMugs rules. You can also change any of them on the fly for testing purposes. That's how I do all my stuff. I'll put in a hundred lines or more sometimes before I actually paste it into the customizer. (My menu currently has 333 lines, but some of that is space between rules and comments.) You can also click new to add your own fresh stylesheet with just your changes. You can then save it and reload it later to pick up your work where you left off, all without actually making a single real change to your site. Then when it's the way you want it, copy and paste it into the real thing.

thenickdude · August 15, 2013

It is possible, and that's what I did. And sure enough, when I removed your code, I DID see unlisted, even though I was logged out (I have no password at all of course). I'm not sure if it is supposed to be that way or not.

Looks like they're using the SmugMug Events feature, which does allow you to share Unlisted galleries to clients.

spider-t · August 15, 2013

Awesome!! That is perfect. Just what I wanted it to do.

The only thing left is that I'd like to do is hide the Event title on the Event page. I apparently can't hide or un-emphasize the breadcrumbs on the Event page and the breadcrumbs and event title say the exact same thing. Really loudly. Got any magic CSS to hid the Event title on the event page?

thanks!
Trish

garrettm30 wrote: »
It is possible, and that's what I did. :ivar And sure enough, when I removed your code, I DID see unlisted, even though I was logged out (I have no password at all of course). I'm not sure if it is supposed to be that way or not.

Anyway, the solution I recommend is to leave the CSS in there that you already put in there, then put this code just under it:
.sm-user-owner .sm-tile-content .sm-badge-text {
  display: block;
}
That code basically undoes your code only when you are logged in.

And by the way, the "fancy dev tool" is the web developer tools built into Firefox. Specifically, the Style Editor is what you need there (and the Inspector is the other helpful tool for me). From there, you can see all the stylesheets that are active on any page. Most of the styles are SmugMugs rules. You can also change any of them on the fly for testing purposes. That's how I do all my stuff. I'll put in a hundred lines or more sometimes before I actually paste it into the customizer. (My menu currently has 333 lines, but some of that is space between rules and comments.) You can also click new to add your own fresh stylesheet with just your changes. You can then save it and reload it later to pick up your work where you left off, all without actually making a single real change to your site. Then when it's the way you want it, copy and paste it into the real thing.

garrettm30 · August 15, 2013

spider-t wrote: »

The only thing left is that I'd like to do is hide the Event title on the Event page. I apparently can't hide or un-emphasize the breadcrumbs on the Event page and the breadcrumbs and event title say the exact same thing. Really loudly. Got any magic CSS to hid the Event title on the event page?

Which part would you like? The first or second one?

garrettm30 · August 15, 2013

Let me go ahead and answer my own question, because I don't think we can mess with your breadcrumb without messing it up on other pages. I don't have access to events because I have a power account, so I don't fully know how they work. However, I dug around a bit and discovered what I needed to work with the event header. The code to hide the 2nd Event title is this:

.eventmarketingHeader #eventName {
    display: none;
}

That takes out just the title. However, I recommend modification of the layout of what remains. Here are two options that you might like, which you would use along with the above code.

Option 1:

.eventmarketingHeader #eventLocation {
    margin-left: 38px;
    font-size: 14pt;
}

.eventmarketingHeader {
    margin-top: -12px;
}

Option 2:

.eventmarketingHeader #eventLocation {
    font-size: 14pt;
}

.eventmarketingHeader {
    border-top: 1px solid rgb(150,150,150);
    margin-top: -10px;
}

spider-t · August 15, 2013

Wow! Look at that! I love it. I even get choices!

Here's the problem. Your fancy code now has made the top of my event's look so awesome, it makes me wish that heading just below it that says "Event Galleries" in that really big font would go away too.

Have another one in you?

Event link: http://www.trishtunney.com/event/End.../qEpMf5ekrFgdw

thanks!
Trish

garrettm30 wrote: »
Let me go ahead and answer my own question, because I don't think we can mess with your breadcrumb without messing it up on other pages. I don't have access to events because I have a power account, so I don't fully know how they work. However, I dug around a bit and discovered what I needed to work with the event header. The code to hide the 2nd Event title is this:
.eventmarketingHeader #eventName {
    display: none;
}
That takes out just the title. However, I recommend modification of the layout of what remains. Here are two options that you might like, which you would use along with the above code.

Option 1:
.eventmarketingHeader #eventLocation {
    margin-left: 38px;
    font-size: 14pt;
}

.eventmarketingHeader {
    margin-top: -12px;
}
Option 2:
.eventmarketingHeader #eventLocation {
    font-size: 14pt;
}

.eventmarketingHeader {
    border-top: 1px solid rgb(150,150,150);
    margin-top: -10px;
}

thenickdude · August 15, 2013

It doesn't look like there is a good way of targeting just event pages, because they're missing any useful identifying classes on the body tag that regular pages have. You can still do it, but it would be a horrible hack that would basically hide those gallery titles sitewide, then explicitly reshow them for each of the non-event pages:

/* Hide galery widget headers sitewide*/
.sm-page-widget-galleries h2 {
  display:none;
}

/* Now bring them back on pages that we can tell aren't an event page (event pages don't have the .sm-page class at the moment) */
.sm-page .sm-page-widget-galleries h2 {
  display:block;
}

If SmugMug could add a class to the body tag identifying it as an event, this would be much tidier and less prone to breaking as SmugMug changes.

garrettm30 · August 15, 2013

Lamah wrote: »

event pages don't have the .sm-page class at the moment

Well spotted!

Lamah wrote: »

You can still do it, but it would be a horrible hack that would basically hide those gallery titles sitewide, then explicitly reshow them for each of the non-event pages

That's not so horrible. Wait till you hear how truly horrible the only idea I came up with is: I was going to press that #eventName that we got rid of earlier back into service. I was going to hide it's text, give it a background color equal to the background color of the page, then relatively position it on top of the undesired heading. And we wouldn't stop there! No, because surely it wouldn't look right on mobile devices, so we'd need special rules for them. Oh, and as soon as Trish decided to change the theme of her site in the future with a different color, there would suddenly have an unexplained black box hanging around for no apparent reason.

How's that for a horrible hack? I like yours better. If they do add a .sm-page class to event pages for no reason, perhaps they will also give us an .sm-event-page or some such class. If suddenly the heading pops up again, we can revisit it at that time. Now, it's too bad CSS comments get stripped out, because we might forget what we did.

thenickdude · August 15, 2013

garrettm30 wrote: »

That's not so horrible. Wait till you hear how truly horrible the only idea

Hahaha, yup that is definitely more horrible.

If they do add a .sm-page class to event pages for no reason, perhaps they will also give us an .sm-event-page or some such class.

Yeah I'm sure they would at the same time. I'm really surprised that there isn't one there already to be honest.

Now, it's too bad CSS comments get stripped out, because we might forget what we did.

That is really annoying, and crazy. I *think* it happens because SmugMug takes your CSS, minifies it, and stores only that version for the widget. Then when you want to edit the CSS, it takes the minified version and reformats it back to readability. That's a really stupid way of doing things.

Thankfully, the global Theme CSS does preserve comments.

spider-t · August 16, 2013

Glad you guys are having fun trying to solve my problem. :-)

Remove unlisted box from gallery thumbs?

Comments