Smugmug Style gap

AllenAllen Registered Users Posts: 10,013 Major grins
edited September 22, 2015 in SmugMug Support
Why all of a sudden is there a huge gap between the gallery description and photo content in a
Smugmug Style gallery. I have done nothing with CSS for some time now.

It is VERY noticeable and shocked me when I just discovered it a few minutes ago. I've been working in
many galleries today with captions an KW's and when just now switching pages this stuck out like a
sore thumb. Did something Smug just did on the sites caused this? I've had the buy button on the right
end of the gallery description forever and it was working great.
Al - Just a volunteer here having fun
My Website index | My Blog

Comments

  • denisegoldbergdenisegoldberg Administrators Posts: 14,383 moderator
    edited September 18, 2015
    I don't think it's just smugmug style. The slideshow and buy photos buttons are on a line under the description - I thought they shared the line with the description before. Most of my galleries are in collage landscape but I just checked a journal style gallery and that is showing the same behavior.

    --- Denise
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 18, 2015
    I turned the slideshow button off because it was next to the buy button in the gallery description. The buy button
    alone took about 20% of the description width. I had to adjust all my gallery description widths to 80% to accommodate
    the buy button. Now it has slid down below the description area and is moving the gallery content with it.

    Edit: 90% width because I made the buy button smaller. If you look at my screen shot you'll see where it fits.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 18, 2015
    Another thing this does is pushes the main photo partially out the bottom of the widow/screen which is
    completely against what Smug has been preaching. This is how a page loads now.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 19, 2015
    When we released the Download All feature it added a 3rd button to the Slideshow and Buy buttons and caused long gallery descriptions to overlap. As a temporary fix to prevent them from overlapping we moved the 3 buttons down. This accounts for the increased space.

    This is also a good time to mention that we're working on update to the gallery header (the breadcrumb, gallery title, description and buttons). It will be a fairly significant design change from the current header but our design team did a great job making it look great. There will be entirely new CSS class names so that it won't interfere with any of your old CSS. I'll try to give you ample heads-up before it goes live so you can review it and personalize as you desire!
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 19, 2015
    leftquark wrote: »
    When we released the Download All feature it added a 3rd button to the Slideshow and Buy buttons and caused long gallery descriptions to overlap. As a temporary fix to prevent them from overlapping we moved the 3 buttons down. This accounts for the increased space.

    This is also a good time to mention that we're working on update to the gallery header (the breadcrumb, gallery title, description and buttons). It will be a fairly significant design change from the current header but our design team did a great job making it look great. There will be entirely new CSS class names so that it won't interfere with any of your old CSS. I'll try to give you ample heads-up before it goes live so you can review it and personalize as you desire!
    So, is this something we have to fix? Or do we leave it borked and look terrible?

    Came up with this temporary fix but many pages would need slightly different numbers depending on number
    of buttons and even whether there is a description.


    .sm-gallery-headerbuttons {
    margin: -65px 3px 0 0;
    float:right;
    }
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 19, 2015
    Allen wrote: »
    So, is this something we have to fix? Or do we leave it borked and look terrible?

    I think you'll want to fix now. The change will be fairly significant and will probably require you to redo it again but as always, the Heroes and I are here to help (though you're an expert with CSS these days, so you probably won't need our help).

    I realize that having to continuously change your CSS is frustrating, however, we have to remember that for SmugMug to grow and improve, we have to at times make changes that will impact custom CSS. There is always risk with using Customizations to SmugMug. We suffered from this issue in Old SmugMug (with JavaScript AND custom CSS) and it held us from improving SmugMug. We're going to try to minimize the impact to customizations and I'll try to give you as much heads up / warning when there are issues that will impact you.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 19, 2015
    leftquark wrote: »
    I think you'll want to fix now. The change will be fairly significant and will probably require you to redo it again but as always, the Heroes and I are here to help (though you're an expert with CSS these days, so you probably won't need our help).

    I realize that having to continuously change your CSS is frustrating, however, we have to remember that for SmugMug to grow and improve, we have to at times make changes that will impact custom CSS. There is always risk with using Customizations to SmugMug. We suffered from this issue in Old SmugMug (with JavaScript AND custom CSS) and it held us from improving SmugMug. We're going to try to minimize the impact to customizations and I'll try to give you as much heads up / warning when there are issues that will impact you.
    I don't mind changing CSS, it's like working a puzzle and somewhat fun, although frustrating
    sometimes. I hate seeing things borked with no warning of changes.

    Moving the buttons also moves the gallery content. So really large descriptions could be a challenge
    vs small descriptions or no description. I do not want to go thru a 1000 or more galleries having to
    make some Custom because a general CSS rule doesn't work for all.

    I've tried CSS, this seems to work most places. But only if there is a description, then it's completely
    borked if none. Buttons override top menu. Have not checked very large descriptions.

    Experimental CSS
       /* moves all buttons up */
    .sm-gallery-headerbuttons {
    margin: -65px 3px 0 0;
    float:right;
    }
       /* fine tune buttons with BUY */
    .sm-gallery-download-button,
    .sm-gallery-slideshow-button {
    position:relative;
    top: -15px;
    left: 15px;
    }
    
    Family galleries are a nightmare, most have no description. I would have to go thru 100's of galleries adding a description.
       /* flow down from top folder */
    .sm-page-parentnode-NcgwK .sm-gallery-headerbuttons {
    margin: -55px 3px 0 0;
    float:right;
    }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 19, 2015
    I believe all we did was push it down a certain number of pixels. Waiting to confirm..... I'll get back to you.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 19, 2015
    I would not mind if the buttons were placed inside the description div and positioned top or bottom right
    with all in description flowing around them.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 19, 2015
    For your case of with descriptiosn and without descriptions ... you can use "sm-gallery-header-has-description" for the class name when there is a description ... for example ... ".sm-gallery-header .sm-gallery-header-has-description .sm-gallery-description { // some code }"

    I believe this code should undo what we did:
    .sm-gallery-header .sm-gallery-headerbuttons {
        position: absolute !important;
        right: 0 !important;
        bottom: 12px !important;
        margin-bottom: 0px !important;
    }
    
     .sm-gallery-header .sm-gallery-description {
        margin: 0 264px 8px 0 !important;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 19, 2015
    It might need bottom: 0px instead of 12px in that first bit ... i'm having a hard time determining ... on my own site it needed 0px.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • zbreezezbreeze Registered Users Posts: 25 Big grins
    edited September 19, 2015
    I do not find CSS a puzzle to solve and do not enjoy changing it when smugmug changes things; some of the customization I have is vital for my many year old site and. "Improvements" that break sites are horrible. I am terribly frustrated with the direction smugmug is taking.
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 19, 2015
    leftquark wrote: »
    It might need bottom: 0px instead of 12px in that first bit ... i'm having a hard time determining ... on my own site it needed 0px.
    Here's what I ended up with.
    No space between these class names, guess in same tag.
    .sm-gallery-header.sm-gallery-header-has-description
    Combinations because of descriptions or not. Button position tweaks. Specific Family top folder flow down.
    .sm-gallery-header.sm-gallery-header-has-description
      .sm-gallery-headerbuttons{
      position:absolute!important;
            right:0!important;
            bottom:10px!important;
            margin-bottom:0!important
      }
    
    .sm-gallery-header.sm-gallery-header-has-description
      .sm-gallery-description{
        margin:0 264px 8px 0!important
      }
              /* family no descriptions section */
    .sm-page-parentnode-NcgwK .sm-gallery-header
     .sm-gallery-headerbuttons {
    position:relative;
    top: 11px!important;
    left: -5px!important;
    }
    
    .sm-page-parentnode-NcgwK 
     .sm-gallery-header
     .sm-gallery-download-button {
       position:relative!important;
       top: -15px!important;
       left: 5px!important
     }
          
    .sm-page-parentnode-NcgwK 
     .sm-gallery-header
     .sm-gallery-slideshow-button {
       position:relative!important;
       top: -15px!important;
       left: 8px!important
     }
              /* family has descriptions section */
    .sm-page-parentnode-NcgwK 
     .sm-gallery-header.sm-gallery-header-has-description
     .sm-gallery-headerbuttons {
    position:relative;
    top: 5px!important;
    left: 15px!important;
    }
    
    .sm-page-parentnode-NcgwK 
     .sm-gallery-header.sm-gallery-header-has-description
     .sm-gallery-download-button {
       position:relative!important;
       top: -16px!important;
       left: 15px!important
     }
          
      .sm-page-parentnode-NcgwK 
     .sm-gallery-header.sm-gallery-header-has-description
     .sm-gallery-slideshow-button {
       position:relative!important;
       top: -16px!important;
       left: 18px!important
     }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 19, 2015
    zbreeze wrote: »
    "Improvements" that break sites are horrible. I am terribly frustrated with the direction smugmug is taking.

    You have to remember that any time you change the way SmugMug has formatted the site, you're actively accepting the risk involved that we may change things in the future. We can't hold back improvements to the site for 99% of SmugMug customers for fear of breaking someone's customization. Would you prefer that we never grow SmugMug? What about the thousands of feature requests from people who wish we would implement them? We want to make SmugMug be even better and sometimes that means making changes to the design, especially as trends change and designs need to be updated and improved. We're doing our best to roll out changes using different class names, so they don't impact your customizations, but sometimes they'll do that. And when that happens, we have a great team of Support Heroes and DGrin guru's that are here to help fix anything. Feel free to monitor the "Product News" forum, where I'll be posting updates more frequently, as well as giving early warning (when I can) on changes that may impact customizations.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • pbandjpbandj Registered Users Posts: 237 Major grins
    edited September 20, 2015
    This seems like it reduces the space available for the main photo in Smugmug Gallery style...I've already got a problem with having captions below the fold (and my header doesn't seem that large). This either pushes stuff further down on the page or makes the thumbnails and content smaller.
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 21, 2015
    pbandj wrote: »
    This seems like it reduces the space available for the main photo in Smugmug Gallery style...I've already got a problem with having captions below the fold (and my header doesn't seem that large). This either pushes stuff further down on the page or makes the thumbnails and content smaller.
    On my site after moving the button back up the gallery below seems normal now. I do not see what you're seeing.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 21, 2015
    I have two identical type content Custom galleries, on one gallery, H-Z, the BUY button will not move up. FF, IE and Chrome same.
    Compared both galleries. Looked at two html boxes above default gallery content.
    I've checked layout, both html box margins, both identical.
    2nd html box, identical content except for links back and forth.

    Each "Just This Gallery" CSS identical.
    CSS "entire site" nothing unique for these two galleries
    CSS "all galleries" contains Button move CSS from this thread. Confirmed that it applies to
    these two "Just This Gallery" galleries despite the denial in this thread. I only added the
    move CSS to "all galleries" and it affected galleries made Custom.

    http://www.photosbyat.com/Birds/Missouri-Bird-Photos-A-G
    http://www.photosbyat.com/Birds/Missouri-Bird-Photos-H-Z << bad BUY button placement

    I'm at a lost as to why the buttons don't react the same. Any help would be appreciated.
    Thanks

    Edit: It's the little things that make customization so complicated. The move CSS I used relied on .sm-gallery-header-has-description. I
    hid the description on these two galleries because it's not needed. But, I had one blank, so the simplest of things can interfere with your
    "best laid plans". Once I added in a description every thing fell in line. Duh
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • jchinjchin Registered Users Posts: 713 Major grins
    edited September 22, 2015
    @Allen,

    I have a crazy idea. Why not try to make the "minimum" width 1024px, the width of your header image?
    .sm-page-layout-region-top,
    .sm-page-layout-region-bottom { min-width: 1024px; }
    
    Johnny J. Chin ~ J. Chin Photography
    FacebookFlickrSmugMug
    SmugMug referral coupon code: ix3uDyfBU6xXs
    (use this for a discount off your SmugMug subscription)
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited September 22, 2015
    jchin wrote: »
    @Allen,

    I have a crazy idea. Why not try to make the "minimum" width 1024px, the width of your header image?
    .sm-page-layout-region-top,
    .sm-page-layout-region-bottom { min-width: 1024px; }
    
    Not sure how this relates to the problem I had.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • jchinjchin Registered Users Posts: 713 Major grins
    edited September 22, 2015
    Allen wrote: »
    Not sure how this relates to the problem I had.

    I read something above where you said you site was wrapping the top section.
    Or was I seeing things.
    I was just thinking maybe some CSS can help that by specifying a minimum width to prevent that.
    Johnny J. Chin ~ J. Chin Photography
    FacebookFlickrSmugMug
    SmugMug referral coupon code: ix3uDyfBU6xXs
    (use this for a discount off your SmugMug subscription)
Sign In or Register to comment.