Remove unlisted box from gallery thumbs?

spider-tspider-t Registered Users Posts: 443 Major grins
edited August 16, 2013 in SmugMug Customization
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

Comments

  • denisegoldbergdenisegoldberg Administrators Posts: 14,372 moderator
    edited 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-tspider-t Registered Users Posts: 443 Major grins
    edited 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

    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
  • garrettm30garrettm30 Registered Users Posts: 37 Big grins
    edited 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-tspider-t Registered Users Posts: 443 Major grins
    edited 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.
  • garrettm30garrettm30 Registered Users Posts: 37 Big grins
    edited 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.
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited 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-tspider-t Registered Users Posts: 443 Major grins
    edited 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.
  • garrettm30garrettm30 Registered Users Posts: 37 Big grins
    edited 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?
  • garrettm30garrettm30 Registered Users Posts: 37 Big grins
    edited 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-tspider-t Registered Users Posts: 443 Major grins
    edited August 15, 2013
    Wow! Look at that! I love it. I even get choices! clap.gif

    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;
    }
    
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited 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.
  • garrettm30garrettm30 Registered Users Posts: 37 Big grins
    edited 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. yelrotflmao.gif

    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.
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited 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-tspider-t Registered Users Posts: 443 Major grins
    edited August 16, 2013
    Glad you guys are having fun trying to solve my problem. :-)
Sign In or Register to comment.