NEW/UPDATED: Gallery Header / Cover Image

12346

Comments

  • corpuzrobcorpuzrob Rob C. Posts: 77Registered Users Big grins
    edited June 14, 2016
    Thanks, Allen, I tried that but it also doesn't seem to be working.
    Allen wrote: »
    I think you'd need this CSS instead. Only hides it for the cover area not lightbox. In "All Galleries"

    .sm-gallery-cover-headerbuttons .sm-gallery-cover-slideshow-button {display:none}
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,651Registered Users Major grins
    edited June 14, 2016
    Try adding the !important
    .sm-gallery-cover-headerbuttons .sm-gallery-cover-slideshow-button {display:none !important}
    Al - Just a volunteer here having fun
    My Website | My Blog
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins
    edited June 15, 2016
    @Allen: the slideshow-button removal has worked for others with the code I gave here :)

    @corpuzrob: I am starting to wonder...did you remove your code again after it seemed to not have worked? Because if I look into your CSS right now from your site I find this:
    .sm-gallery-cover-title {
        font-size: 36px;
    }
    

    Which apparently is larger than 24px and therefore shows up larger than expected :)
    Also I cannot find a line in your CSS that would say
    .sm-button.sm-button-size-large.sm-button-skin-default.sm-gallery-cover-slideshow-button{
    display:none !important;
    }
    

    Which of course explains why the slideshow button in your portfolio-gallery still is visible.

    So to ask the stupid questions as well (in case you did not yourself manually remove those customizations again):
    When you say "OK" for the CSS box to close, do you then also go out of the customizer by clicking "Done" -> "Publish Now" or do you happen to leave the customizer via "Done" -> "Safe for later"? The later would explain it all :D Unless you hit the "Publish Now" button/menu choice your code changes will have no effect on any sites after you leave the customizer.

    Good luck

    Lille Ulven
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • corpuzrobcorpuzrob Rob C. Posts: 77Registered Users Big grins
    edited June 15, 2016
    Hi, thanks again so much for your help Lille and Allen,

    I was busy since I last wrote and just logged on, so I haven't changed anything for the last 6 or 7 hours, but before that, I tried your code Lille, and it didn't appear to work. I'm sure I clicked "publish" rather than "save for later." Then I tried Allen's code, and then added the !important before it was suggested, and then removed it, and none of those seemed to work either.

    For the title text, it's very curious that you found code that said 36px, as I just checked again and I only see 24px, near the very end of the list. Where do you see the 36px? Should I go through and try each of those suggestions again now?

    I'm sure when we get to the bottom of this, the culprit will be me; something I missed, as I really don't know what I'm doing. But I can't figure out what that might be, as I feel like I was very careful when copying the suggested code exactly. Is it possible that there is something else in my code that invalidates what was added?

    Thanks again!
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,651Registered Users Major grins
    edited June 15, 2016
    I noticed a very unusual thing recently, adding CSS to the end of "all galleries" did not work. But then I
    added it to the top and it worked. This is against everything we've ever learned about CSS. Perhaps
    Smug is applying it upside down? That's the only thing that makes sense.
    Al - Just a volunteer here having fun
    My Website | My Blog
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins
    edited June 15, 2016
    OK, this is going to be a long shot...

    @corpuzrob: do you have this text anywhere in your all galleries css: "Hide the right nav bar for screens that aren't large enough" (without the " around)? If so, make sure that there is a /* in front of it. From what I see in Firefox it looks like the customization that I find as active for your cover-header is the original from smug mug, while yours is stored in a file called combo.css (not that there would not be more than one of these, but the one with the 114 rules is the one in question... it starts with this code (look for the last three lines here which are marked as bold red:
    .sm-page-widget-697152 .sm-page-widget-content{margin-top:6px;margin-right:12px;margin-bottom:0px;margin-left:12px;}.sm-page-widget-697153 .sm-page-widget-content{margin-top:-3px;margin-right:30px;margin-bottom:12px;margin-left:30px;}.sm-page-widget.sm-page-widget-7738715 div.fb-like{width:100%!important;position:relative;text-align:center!important;padding-top:0;padding-bottom:30px;opacity:.33;color:#888eb2;font-family:Lato,sans-serif}@media ( min-width: 640px ){.sm-page-widget.sm-page-widget-7738715 div.fb-like{padding-top:12px;padding-bottom:0;position:fixed;position:absolute;bottom:12px;margin-left:-12px}}.sm-tile-folder .sm-tile-type-icon:after,.sm-tile-album .sm-tile-type-icon:after{display:none}.sm-tile-keywords{display:none}.sm-page-widget-folders .sm-tile,.sm-page-widget-galleries .sm-tile,.sm-page-widget-nodes .sm-tile,.sm-page-widget-pages .sm-tile{border-radius:500px;-webkit-border-radius:500px;overflow:hidden;font-weight:700;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.sm-gallery-tiles .sm-tile .sm-image,.sm-gallery-tiles .sm-tile .sm-tile-overlay{border-radius:2px;-webkit-border-radius:2px;overflow:hidden;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.sm-gallery-roworganic .sm-gallery-images .sm-tile,.sm-gallery-columnorganic .sm-gallery-images .sm-tile{border-radius:4px;-webkit-border-radius:4px;overflow:hidden;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title{color:#0d122c!important;font-size:17px}.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption{font-size:17px;color:#0d122c!important}.sm-tile-info a{color:#888eb2!important}.sm-tile-info a:hover{color:#e3af01!important}.sm-user-ui .sm-lightbox-caption{max-width:800px!important}.sm-user-ui .sm-lightbox-panel{max-width:4010px!important}.sm-lightbox-info{text-align:left!important}.sm-gallery-image-container .sm-tile-info,.sm-lightbox-caption,.sm-gallery-images .sm-tile-info{white-space:pre-wrap}.sm-gallery-image-container .sm-tile-info br,.sm-lightbox-caption br,.sm-gallery-images .sm-tile-info br{display:none}@media only screen and (min-width: 1200px){.sm-button.sm-button-image-download:after{content:" Download"!important;font-size:90%}.sm-button.sm-button-image-info:after{content:" Info"!important;font-size:90%}.sm-button.sm-button-image-tools:after{content:" Tools"!important;font-size:90%}.sm-button.sm-button-image-like:after{content:" Like"!important;font-size:90%}.sm-lightbox-icons .sm-button.sm-button-image-comment:after{content:" Comment"!important;font-size:90%}.sm-lightbox-icons .sm-button.sm-button-image-share:after{content:" Share"!important;font-size:90%}.sm-lightbox-icons .sm-button.sm-button-image-sizes:after{content:" Sizes"!important;font-size:90%}}.sm-lightbox-icons .sm-button.sm-button-image-share:hover{color:#e3af01}.sm-lightbox-icons .sm-button.sm-button-image-comment:hover{color:#e3af01}.sm-lightbox-icons .sm-button.sm-button-image-tools:hover{color:#e3af01}.sm-lightbox-icons .sm-button.sm-button-image-download:hover{color:#e3af01}.sm-lightbox-icons .sm-button.sm-button-image-info:hover{color:#e3af01}.sm-lightbox-icons .sm-button.sm-button-image-sizes:hover{color:#e3af01}.sm-lightbox-icons .sm-button.sm-button-image-like:hover{color:#e3af01}.sm-user-ui .sm-button-skin-accent{background:rgba(136,142,178,.5)!important;border-radius:100px;color:#0d122c!important}.sm-user-ui .sm-button-skin-accent:hover{background-color:#888eb2!important;color:#e3af01!important}.sm-user-ui .sm-button-skin-accent{-webkit-transition:all 0.15s ease-in;transition:all 0.15s ease-in}a :hover,a:hover{color:#e3af01!important}.sm-page-widget-social-links a{color:rgba(136,142,178,.75)!important}.sm-page-widget-social-links a:hover{color:#e3af01!important}.sm-page-widget-nav-toplink,.yui3-menu-item .yui3-menu-label,.sm-page-widget-nav-toplink>a{color:#0d122c!important}.sm-user-ui .sm-page-widget-nav-toplink a:hover{color:#e3af01!important}a{-webkit-transition:color 0.1s ease-in;transition:color 0.1s ease-in}.yui3-menu-children{opacity:0;transition:opacity 0.5s ease-out}.yui3-menu-open>.yui3-menu-children{opacity:1}.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a{display:block;border-radius:100px;text-indent:6px;margin-bottom:15px!important;padding:7.5px 7.5px 7.5px 7.5px!important}.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a,.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:visited{background:rgba(136,142,178,.33)!important}.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:hover{background:rgba(136,142,178,0.85)!important}.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-toplink{margin-bottom:-2pt}.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label{background:rgba(136,142,178,0.33);border-radius:100px;margin-top:12px!important;margin-bottom:12px!important;margin-left:20px!important;margin-right:20px!important;padding:6px 12px 6px 12px!important;text-indent:0!important}.yui3-menu .yui3-menu-children .yui3-menu-item:hover{background:0}.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover{background:#888eb2;opacity:1}.sm-user-ui .sm-tiles-pg-button{color:blue;background-color:#888eb2;border:none font-size: 24px;padding:10px}.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand{text-align:center;font-size:15px!important;background:rgba(136,142,178,0.33);border-radius:100px;padding-bottom:10px;padding-top:10px;margin-top:-18px;margin-right:-12px;margin-left:-12px}.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-items .sm-nav-item-sublevel{border:0 none;background:rgba(136,142,178,0.33);border-radius:100px;margin-bottom:12px}.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-items .sm-nav-item-sublevel{border:0 none;background:rgba(136,142,178,0.33);border-radius:100px;margin-bottom:12px}.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header{background:0;font-size:16px!important;margin-top:12px;margin-bottom:12px}.sm-user-ui.yui3-menu-vertical .yui3-menu-children,.sm-user-ui .yui3-menu-vertical .yui3-menu-children,.sm-user-ui.yui3-menu-horizontal>.yui3-menu-children .yui3-menu-children,.sm-user-ui .yui3-menu-horizontal>.yui3-menu-children .yui3-menu-children{background:rgba(212,212,212,1)!important}.sm-lightbox-keywords{display:none}.sm-page-widget-socialbuttons{display:none}.sm-page-edit .sm-page-widget-socialbuttons{display:block}.sm-user-ui .sm-tiles .sm-tile-content:hover{opacity:.9;-webkit-transition:all 0.15s ease-in;transition:all .15 ease-in}.sm-page-widget-nav-mobile-header a{font-size:110%!important;color:#0d122c!important}.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-accordion-item-label{border-radius:100px;background:rgba(136,142,178,0.33);margin-bottom:8px;color:#0d122c!important}.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-nav-item-sublevel{margin-bottom:8px!important;color:#0d122c!important}.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-nav-item-sublevel:hover,.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-accordion-item-label:hover{background:rgba(136,142,178,0.85);color:#e3af01!important}.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-nav-item-sublevel a{background:0}.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-nav-item-sublevel a:hover{background:0;color:#e3af01!important}a :hover,a:hover{color:#e3af01!important}a{color:#888eb2!important}a{-webkit-transition:color 0.25s ease-in;transition:color 0.25s ease-in}.sm-user-ui .sm-button-skin-accent,.sm-user-ui .sm-button,.sm-user-ui .sm-page-widget-galleries .sm-tiles .sm-tile-content,.sm-user-ui .sm-page-widget-folders .sm-tiles .sm-tile-content{-webkit-transition:all 0.15s ease-in;transition:all .15 ease-in}.sm-button .sm-fonticon-small,.sm-user-ui .sm-button-label,.sm-fonticon{-webkit-transition:all 0.2s ease-in;transition:all .2 ease-in}.sm-page-widget-logo-img:hover,.sm-page-widget-logo-img:focus,.sm-page-widget-logo-img:active{background-image:url(http://www.robcorpuz.com/photos/i-2BVWqSb/0/O/i-2BVWqSb.png)!important;-webkit-transition:background-image 0.1s ease-in;transition:background-image 0.05s ease-in}.sm-page-widget-logo-img{-webkit-transition:background-image 1.05s ease-in;transition:background-image 1s ease-in}.sm-page-layout-region-bottom .sm-tile-content .sm-image{opacity:.5;-webkit-transition:all 0.15s ease-in;transition:all .15 ease-in}.sm-page-layout-region-bottom .sm-tile-content:hover .sm-image{opacity:1;-webkit-transition:all 0.15s ease-in;transition:all .15 ease-in}.sm-page-layout-region-bottom .sm-tile-content .sm-image{-webkit-transition:all 0.5s ease-in;transition:all .5 ease-in}.sm-page-powered-by a{display:None}.sm-button.sm-button-size-small.sm-button-skin-accent.sm-gallery-buy-icon,.sm-gallery-buymenu{display:none}@media only screen and (max-width: 100px){.sm-search-form,.sm-page-widget-social-links,.sm-page-widget-share-buttons,.sm-slideshow{display:none}}@media only screen and (max-width: 640px){.sm-slideshow{display:none}}button.sm-lightbox-buy-button{display:none!important}h4.sm-lightbox-title{display:none}.sm-page-layout-region-right .sm-tile-content .sm-image{opacity:.5;-webkit-transition:all 0.15s ease-in;transition:all .15 ease-in}.sm-page-layout-region-right .sm-tile-content:hover .sm-image{opacity:1;-webkit-transition:all 0.15s ease-in;transition:all .15 ease-in}.sm-page-layout-region-right .sm-tile-content .sm-image{-webkit-transition:all 0.5s ease-in;transition:all .5 ease-in}@media only screen and (max-width: 640px){.sm-page-layout-region-right .sm-tile-content{display:none!important}.sm-page-layout-region-right .sm-image{display:none!important}.sm-page-layout-region-right .sm-page-widget-social-links{display:none!important}.sm-page-layout-region-right{display:none!important}.sm-page-layout-region .sm-page-layout-region-center{margin-left:0!important}}Hide the right nav bar for screens that aren't\ large\ enough\ \*\/\n\@media\ only\ screen\ and\ (max-width\:\ 640px)\ \{\n\ \ \}\n\n\n\/\*Change\ Lightbox\ Background\*\/\n\.sm-lightbox\ \{\nbackground\:\ url(http://www.robcorpuz.com/photos/i-TrqHb9t/0/O/i-TrqHb9t.jpg)!important;}/* this block sets the normal font weight (rather than light) on navigation content boxes and provides a hook too change the font size. default font size is 12 pt so as written,this keeps that the same. */.sm-page-widget-folders .sm-tile-title,.sm-page-widget-galleries .sm-tile-title,.sm-page-widget-nodes .sm-tile-title,.sm-page-widget-pages .sm-tile-title{font-size:12pt;font-weight:400}/*lightbox buttons*/.sm-lightbox .sm-lightbox-nav .sm-button{display:block!important;background:rgba(136,142,178,.15);border-radius:100px;margin-left:4px!important;line-height:60px!important}.sm-lightbox .sm-lightbox-nav .sm-button:focus{outline:none;background:rgba(136,142,178,.33)}.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon{color:#0d122c}.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon:hover{color:#e3af01!important}.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon:focus{color:#e3af01!important}@media only screen and (min-width: 1200px){.sm-lightbox .sm-lightbox-nav .sm-button:hover{background:#888eb2}}.sm-lightbox .sm-lightbox-nav .sm-button:active{background:rgba(136,142,178,.15)}.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon:hover{color:#e3af01}/* make the lightbox close button taller */.sm-user-ui .sm-user-overlay-container .sm-lightbox-tools .sm-button-size-large.sm-button-nochrome{line-height:60px;width:40px!important;text-align:center!important;margin-right:4px!important;margin-top:4px!important;padding:10px!important;background:rgba(136,142,178,.15)!important;border-radius:100px}.sm-user-ui .sm-user-overlay-container .sm-lightbox-tools .sm-button-size-large.sm-button-nochrome:hover{background:#888eb2!important}/*remove background on controls in lightbox. this gives a very,very clean screen even though controls can be a little hard to see. added 2014-03-22*/*:root *>.sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools .sm-button,*:root *>.sm-user-ui .sm-lightbox .sm-lightbox-nav{background-color:rgba(0,0,0,0)}.sm-user-ui .yui3-widget-mask.sm-lightbox-mask{background-color:#bdbdbd;background-image:url(http://www.robcorpuz.com/photos/i-TrqHb9t/0/O/i-TrqHb9t.jpg)}/*slideshow controls (incomplete,not working)*/.sm-slideshow-fullscreen-button,.sm-slideshow-nav .sm-button,.sm-slideshow-play,.sm-slideshow-play-pause{display:block!important;background:rgba(136,142,178,.15);border-radius:100px}.sm-slideshow-fullscreen-button,.sm-slideshow-nav .sm-button,.sm-slideshow-play,.sm-slideshow-play-pause:focus{outline:none!important;background:rgba(136,142,178,.33)!important}@media only screen and (min-width: 1200px){.sm-slideshow-fullscreen-button .sm-slideshow-nav .sm-button .sm-slideshow-play .sm-slideshow-play-pause:hover{background:#888eb2!important}}.sm-slideshow-fullscreen-button .sm-slideshow-nav .sm-button .sm-slideshow-play .sm-slideshow-play-pause:active{background:rgba(136,142,178,.15)!important}*:root *>.sm-user-ui .sm-slideshow .yui3-widget-hd .sm-slideshow-tools .sm-button,*:root *>.sm-user-ui .sm-slideshow .sm-slideshow-fullscreen-button .sm-slideshow-nav .sm-slideshow-play .sm-slideshow-play-pause{background-color:rgba(0,0,0,0)}/* hide smug back to top button */.sm-button.sm-button-size-small.sm-button-skin-submit.sm-page-scroll-to-top{display:none!important}/* change the font size of the gallery title */.sm-gallery-cover-title{font-size:24px!important}/* hide slideshow button on cover photo area */.sm-gallery-cover-headerbuttons .sm-gallery-cover-slideshow-button{display:none}.sm-page-widget-7817289 .sm-page-widget-content{margin-top:36px;margin-right:0px;margin-bottom:0px;margin-left:0px;}.sm-page-widget-7743885 .sm-page-widget-content{margin-top:36px;margin-right:12px;margin-bottom:0px;margin-left:12px;}.sm-page-widget-7817193 .sm-page-widget-content{margin-top:36px;margin-right:24px;margin-bottom:0px;margin-left:24px;}.sm-page-widget-social-links .sm-fonticon {
        text-align: center;
    }
    
    [B][COLOR="Red"]/**
     * Social Links - branded (see brandcolors.net)
     */[/COLOR][/B]
    

    And the line in question is hidden within line 120 with very little line breaks. When I import just what is displayed as line 120 to Brackets and save it as a CSS there, it looks like all code starting with Hide the right nav bar for screens that aren't large enough has been commented out because of a missing /* before Hide - not that this makes terribly much sense, but this is the best I have got so far.

    As for where I find the font-size 36px look for the blue line in the bottom of the screen print (within Firefox) and then go over to the right on the same line where the mouse points to...

    Best of luck

    Lille Ulven
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • corpuzrobcorpuzrob Rob C. Posts: 77Registered Users Big grins
    edited June 15, 2016
    @Lille Ulven

    Lille, you're a legend! clap.gif I located the part you noticed and added the /* and now the title text has shrunk to the size I wanted, the slideshow button disappeared, and even the "back to top" button disappeared (just like I wanted). I never would've found that mistake! Thanks so much for taking the time to look through all of that. I very, very much appreciate it!

    If I may be so bold :D, one last question: how do I adjust the space between the title and the gallery photos and description?

    Thanks so so much!

    -Rob
    OK, this is going to be a long shot...

    @corpuzrob: do you have this text anywhere in your all galleries css: "Hide the right nav bar for screens that aren't large enough" (without the " around)? If so, make sure that there is a /* in front of it. From what I see in Firefox it looks like the customization that I find as active for your cover-header is the original from smug mug, while yours is stored in a file called combo.css (not that there would not be more than one of these, but the one with the 114 rules is the one in question... it starts with this code (look for the last three lines here which are marked as bold red:
    .sm-page-widget-697152 .sm-page-widget-content{margin-top:6px;margin-right:12px;margin-bottom:0px;margin-left:12px;}.sm-page-widget-697153 .sm-page-widget-content{margin-top:-3px;margin-right:30px;margin-bottom:12px;margin-left:30px;}.sm-page-widget.sm-page-widget-7738715 div.fb-like{width:100%!important;position:relative;text-align:center!important;padding-top:0;padding-bottom:30px;opacity:.33;color:#888eb2;font-family:Lato,sans-serif}@media ( min-width: 640px ){.sm-page-widget.sm-page-widget-7738715 div.fb-like{padding-top:12px;padding-bottom:0;position:fixed;position:absolute;bottom:12px;margin-left:-12px}}.sm-tile-folder .sm-tile-type-icon:after,.sm-tile-album .sm-tile-type-icon:after{display:none}.sm-tile-keywords{display:none}.sm-page-widget-folders .sm-tile,.sm-page-widget-galleries .sm-tile,.sm-page-widget-nodes .sm-tile,.sm-page-widget-pages .sm-tile{border-radius:500px;-webkit-border-radius:500px;overflow:hidden;font-weight:700;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.sm-gallery-tiles .sm-tile .sm-image,.sm-gallery-tiles .sm-tile .sm-tile-overlay{border-radius:2px;-webkit-border-radius:2px;overflow:hidden;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.sm-gallery-roworganic .sm-gallery-images .sm-tile,.sm-gallery-columnorganic .sm-gallery-images .sm-tile{border-radius:4px;-webkit-border-radius:4px;overflow:hidden;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title{color:#0d122c!important;font-size:17px}.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption{font-size:17px;color:#0d122c!important}.sm-tile-info a{color:#888eb2!important}.sm-tile-info a:hover{color:#e3af01!important}.sm-user-ui .sm-lightbox-caption{max-width:800px!important}.sm-user-ui .sm-lightbox-panel{max-width:4010px!important}.sm-lightbox-info{text-align:left!important}.sm-gallery-image-container .sm-tile-info,.sm-lightbox-caption,.sm-gallery-images .sm-tile-info{white-space:pre-wrap}.sm-gallery-image-container .sm-tile-info br,.sm-lightbox-caption br,.sm-gallery-images .sm-tile-info br{display:none}@media only screen and (min-width: 1200px){.sm-button.sm-button-image-download:after{content:" Download"!important;font-size:90%}.sm-button.sm-button-image-info:after{content:" Info"!important;font-size:90%}.sm-button.sm-button-image-tools:after{content:" Tools"!important;font-size:90%}.sm-button.sm-button-image-like:after{content:" Like"!important;font-size:90%}.sm-lightbox-icons .sm-button.sm-button-image-comment:after{content:" Comment"!important;font-size:90%}.sm-lightbox-icons .sm-button.sm-button-image-share:after{content:" Share"!important;font-size:90%}.sm-lightbox-icons .sm-button.sm-button-image-sizes:after{content:" Sizes"!important;font-size:90%}}.sm-lightbox-icons .sm-button.sm-button-image-share:hover{color:#e3af01}.sm-lightbox-icons .sm-button.sm-button-image-comment:hover{color:#e3af01}.sm-lightbox-icons .sm-button.sm-button-image-tools:hover{color:#e3af01}.sm-lightbox-icons .sm-button.sm-button-image-download:hover{color:#e3af01}.sm-lightbox-icons .sm-button.sm-button-image-info:hover{color:#e3af01}.sm-lightbox-icons .sm-button.sm-button-image-sizes:hover{color:#e3af01}.sm-lightbox-icons .sm-button.sm-button-image-like:hover{color:#e3af01}.sm-user-ui .sm-button-skin-accent{background:rgba(136,142,178,.5)!important;border-radius:100px;color:#0d122c!important}.sm-user-ui .sm-button-skin-accent:hover{background-color:#888eb2!important;color:#e3af01!important}.sm-user-ui .sm-button-skin-accent{-webkit-transition:all 0.15s ease-in;transition:all 0.15s ease-in}a :hover,a:hover{color:#e3af01!important}.sm-page-widget-social-links a{color:rgba(136,142,178,.75)!important}.sm-page-widget-social-links a:hover{color:#e3af01!important}.sm-page-widget-nav-toplink,.yui3-menu-item .yui3-menu-label,.sm-page-widget-nav-toplink>a{color:#0d122c!important}.sm-user-ui .sm-page-widget-nav-toplink a:hover{color:#e3af01!important}a{-webkit-transition:color 0.1s ease-in;transition:color 0.1s ease-in}.yui3-menu-children{opacity:0;transition:opacity 0.5s ease-out}.yui3-menu-open>.yui3-menu-children{opacity:1}.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a{display:block;border-radius:100px;text-indent:6px;margin-bottom:15px!important;padding:7.5px 7.5px 7.5px 7.5px!important}.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a,.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:visited{background:rgba(136,142,178,.33)!important}.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:hover{background:rgba(136,142,178,0.85)!important}.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-toplink{margin-bottom:-2pt}.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label{background:rgba(136,142,178,0.33);border-radius:100px;margin-top:12px!important;margin-bottom:12px!important;margin-left:20px!important;margin-right:20px!important;padding:6px 12px 6px 12px!important;text-indent:0!important}.yui3-menu .yui3-menu-children .yui3-menu-item:hover{background:0}.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover{background:#888eb2;opacity:1}.sm-user-ui .sm-tiles-pg-button{color:blue;background-color:#888eb2;border:none font-size: 24px;padding:10px}.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand{text-align:center;font-size:15px!important;background:rgba(136,142,178,0.33);border-radius:100px;padding-bottom:10px;padding-top:10px;margin-top:-18px;margin-right:-12px;margin-left:-12px}.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-items .sm-nav-item-sublevel{border:0 none;background:rgba(136,142,178,0.33);border-radius:100px;margin-bottom:12px}.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-items .sm-nav-item-sublevel{border:0 none;background:rgba(136,142,178,0.33);border-radius:100px;margin-bottom:12px}.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header{background:0;font-size:16px!important;margin-top:12px;margin-bottom:12px}.sm-user-ui.yui3-menu-vertical .yui3-menu-children,.sm-user-ui .yui3-menu-vertical .yui3-menu-children,.sm-user-ui.yui3-menu-horizontal>.yui3-menu-children .yui3-menu-children,.sm-user-ui .yui3-menu-horizontal>.yui3-menu-children .yui3-menu-children{background:rgba(212,212,212,1)!important}.sm-lightbox-keywords{display:none}.sm-page-widget-socialbuttons{display:none}.sm-page-edit .sm-page-widget-socialbuttons{display:block}.sm-user-ui .sm-tiles .sm-tile-content:hover{opacity:.9;-webkit-transition:all 0.15s ease-in;transition:all .15 ease-in}.sm-page-widget-nav-mobile-header a{font-size:110%!important;color:#0d122c!important}.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-accordion-item-label{border-radius:100px;background:rgba(136,142,178,0.33);margin-bottom:8px;color:#0d122c!important}.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-nav-item-sublevel{margin-bottom:8px!important;color:#0d122c!important}.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-nav-item-sublevel:hover,.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-accordion-item-label:hover{background:rgba(136,142,178,0.85);color:#e3af01!important}.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-nav-item-sublevel a{background:0}.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-nav-item-sublevel a:hover{background:0;color:#e3af01!important}a :hover,a:hover{color:#e3af01!important}a{color:#888eb2!important}a{-webkit-transition:color 0.25s ease-in;transition:color 0.25s ease-in}.sm-user-ui .sm-button-skin-accent,.sm-user-ui .sm-button,.sm-user-ui .sm-page-widget-galleries .sm-tiles .sm-tile-content,.sm-user-ui .sm-page-widget-folders .sm-tiles .sm-tile-content{-webkit-transition:all 0.15s ease-in;transition:all .15 ease-in}.sm-button .sm-fonticon-small,.sm-user-ui .sm-button-label,.sm-fonticon{-webkit-transition:all 0.2s ease-in;transition:all .2 ease-in}.sm-page-widget-logo-img:hover,.sm-page-widget-logo-img:focus,.sm-page-widget-logo-img:active{background-image:url(http://www.robcorpuz.com/photos/i-2BVWqSb/0/O/i-2BVWqSb.png)!important;-webkit-transition:background-image 0.1s ease-in;transition:background-image 0.05s ease-in}.sm-page-widget-logo-img{-webkit-transition:background-image 1.05s ease-in;transition:background-image 1s ease-in}.sm-page-layout-region-bottom .sm-tile-content .sm-image{opacity:.5;-webkit-transition:all 0.15s ease-in;transition:all .15 ease-in}.sm-page-layout-region-bottom .sm-tile-content:hover .sm-image{opacity:1;-webkit-transition:all 0.15s ease-in;transition:all .15 ease-in}.sm-page-layout-region-bottom .sm-tile-content .sm-image{-webkit-transition:all 0.5s ease-in;transition:all .5 ease-in}.sm-page-powered-by a{display:None}.sm-button.sm-button-size-small.sm-button-skin-accent.sm-gallery-buy-icon,.sm-gallery-buymenu{display:none}@media only screen and (max-width: 100px){.sm-search-form,.sm-page-widget-social-links,.sm-page-widget-share-buttons,.sm-slideshow{display:none}}@media only screen and (max-width: 640px){.sm-slideshow{display:none}}button.sm-lightbox-buy-button{display:none!important}h4.sm-lightbox-title{display:none}.sm-page-layout-region-right .sm-tile-content .sm-image{opacity:.5;-webkit-transition:all 0.15s ease-in;transition:all .15 ease-in}.sm-page-layout-region-right .sm-tile-content:hover .sm-image{opacity:1;-webkit-transition:all 0.15s ease-in;transition:all .15 ease-in}.sm-page-layout-region-right .sm-tile-content .sm-image{-webkit-transition:all 0.5s ease-in;transition:all .5 ease-in}@media only screen and (max-width: 640px){.sm-page-layout-region-right .sm-tile-content{display:none!important}.sm-page-layout-region-right .sm-image{display:none!important}.sm-page-layout-region-right .sm-page-widget-social-links{display:none!important}.sm-page-layout-region-right{display:none!important}.sm-page-layout-region .sm-page-layout-region-center{margin-left:0!important}}Hide the right nav bar for screens that aren't\ large\ enough\ \*\/\n\@media\ only\ screen\ and\ (max-width\:\ 640px)\ \{\n\ \ \}\n\n\n\/\*Change\ Lightbox\ Background\*\/\n\.sm-lightbox\ \{\nbackground\:\ url(http://www.robcorpuz.com/photos/i-TrqHb9t/0/O/i-TrqHb9t.jpg)!important;}/* this block sets the normal font weight (rather than light) on navigation content boxes and provides a hook too change the font size. default font size is 12 pt so as written,this keeps that the same. */.sm-page-widget-folders .sm-tile-title,.sm-page-widget-galleries .sm-tile-title,.sm-page-widget-nodes .sm-tile-title,.sm-page-widget-pages .sm-tile-title{font-size:12pt;font-weight:400}/*lightbox buttons*/.sm-lightbox .sm-lightbox-nav .sm-button{display:block!important;background:rgba(136,142,178,.15);border-radius:100px;margin-left:4px!important;line-height:60px!important}.sm-lightbox .sm-lightbox-nav .sm-button:focus{outline:none;background:rgba(136,142,178,.33)}.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon{color:#0d122c}.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon:hover{color:#e3af01!important}.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon:focus{color:#e3af01!important}@media only screen and (min-width: 1200px){.sm-lightbox .sm-lightbox-nav .sm-button:hover{background:#888eb2}}.sm-lightbox .sm-lightbox-nav .sm-button:active{background:rgba(136,142,178,.15)}.sm-user-ui .sm-lightbox .sm-button.sm-button-skin-default .sm-fonticon:hover{color:#e3af01}/* make the lightbox close button taller */.sm-user-ui .sm-user-overlay-container .sm-lightbox-tools .sm-button-size-large.sm-button-nochrome{line-height:60px;width:40px!important;text-align:center!important;margin-right:4px!important;margin-top:4px!important;padding:10px!important;background:rgba(136,142,178,.15)!important;border-radius:100px}.sm-user-ui .sm-user-overlay-container .sm-lightbox-tools .sm-button-size-large.sm-button-nochrome:hover{background:#888eb2!important}/*remove background on controls in lightbox. this gives a very,very clean screen even though controls can be a little hard to see. added 2014-03-22*/*:root *>.sm-user-ui .sm-lightbox .yui3-widget-hd .sm-lightbox-tools .sm-button,*:root *>.sm-user-ui .sm-lightbox .sm-lightbox-nav{background-color:rgba(0,0,0,0)}.sm-user-ui .yui3-widget-mask.sm-lightbox-mask{background-color:#bdbdbd;background-image:url(http://www.robcorpuz.com/photos/i-TrqHb9t/0/O/i-TrqHb9t.jpg)}/*slideshow controls (incomplete,not working)*/.sm-slideshow-fullscreen-button,.sm-slideshow-nav .sm-button,.sm-slideshow-play,.sm-slideshow-play-pause{display:block!important;background:rgba(136,142,178,.15);border-radius:100px}.sm-slideshow-fullscreen-button,.sm-slideshow-nav .sm-button,.sm-slideshow-play,.sm-slideshow-play-pause:focus{outline:none!important;background:rgba(136,142,178,.33)!important}@media only screen and (min-width: 1200px){.sm-slideshow-fullscreen-button .sm-slideshow-nav .sm-button .sm-slideshow-play .sm-slideshow-play-pause:hover{background:#888eb2!important}}.sm-slideshow-fullscreen-button .sm-slideshow-nav .sm-button .sm-slideshow-play .sm-slideshow-play-pause:active{background:rgba(136,142,178,.15)!important}*:root *>.sm-user-ui .sm-slideshow .yui3-widget-hd .sm-slideshow-tools .sm-button,*:root *>.sm-user-ui .sm-slideshow .sm-slideshow-fullscreen-button .sm-slideshow-nav .sm-slideshow-play .sm-slideshow-play-pause{background-color:rgba(0,0,0,0)}/* hide smug back to top button */.sm-button.sm-button-size-small.sm-button-skin-submit.sm-page-scroll-to-top{display:none!important}/* change the font size of the gallery title */.sm-gallery-cover-title{font-size:24px!important}/* hide slideshow button on cover photo area */.sm-gallery-cover-headerbuttons .sm-gallery-cover-slideshow-button{display:none}.sm-page-widget-7817289 .sm-page-widget-content{margin-top:36px;margin-right:0px;margin-bottom:0px;margin-left:0px;}.sm-page-widget-7743885 .sm-page-widget-content{margin-top:36px;margin-right:12px;margin-bottom:0px;margin-left:12px;}.sm-page-widget-7817193 .sm-page-widget-content{margin-top:36px;margin-right:24px;margin-bottom:0px;margin-left:24px;}.sm-page-widget-social-links .sm-fonticon {
        text-align: center;
    }
    
    [B][COLOR="Red"]/**
     * Social Links - branded (see brandcolors.net)
     */[/COLOR][/B]
    

    And the line in question is hidden within line 120 with very little line breaks. When I import just what is displayed as line 120 to Brackets and save it as a CSS there, it looks like all code starting with Hide the right nav bar for screens that aren't large enough has been commented out because of a missing /* before Hide - not that this makes terribly much sense, but this is the best I have got so far.

    As for where I find the font-size 36px look for the blue line in the bottom of the screen print (within Firefox) and then go over to the right on the same line where the mouse points to...

    Best of luck

    Lille Ulven
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins
    edited June 15, 2016
    You are welcome, corpuzrob glad I could help.

    For your new question try this one:
    .sm-gallery-images{
      margin-top: 100px; /*of course you can use other values than 100px :D*/
    }
    

    Good luck

    Lille Ulven
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • corpuzrobcorpuzrob Rob C. Posts: 77Registered Users Big grins
    edited June 15, 2016
    Thanks again, Lille!
    You are welcome, corpuzrob glad I could help.

    For your new question try this one:
    .sm-gallery-images{
      margin-top: 100px; /*of course you can use other values than 100px :D*/
    }
    

    Good luck

    Lille Ulven
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins
    edited June 17, 2016
    You're welcome corpuzrob

    leftquark could it be that the buy button is only displayed on screens with a width of 958px and more? I was just experimenting a little bit with it on smaller screens (removing the text completely and stuff like that to get it displayed correctly on my iPad for example when I found out about it).

    Thanks in advance

    Lille Ulven
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • Erick LErick L Major grins Posts: 354Registered Users Major grins
    edited June 19, 2016
    leftquark wrote: »
    If you're on a gallery, the current page (the title of the gallery) is now displayed below the breadcrumb. I would recommend you remove your Breadcrumb CB and turn on the Gallery Breadcrumb in the Customization settings for each of the gallery styles -- it'll look nicer. We wanted to emphasize the gallery title and felt the navigation elements of the breadcrumb were not the right place for the title.

    So, what if I prefer the title as part of the breadcrumb? I think big titles are ugly.
  • leftquarkleftquark SmugMug Product Team Posts: 3,607Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited June 20, 2016

    leftquark could it be that the buy button is only displayed on screens with a width of 958px and more? I was just experimenting a little bit with it on smaller screens (removing the text completely and stuff like that to get it displayed correctly on my iPad for example when I found out about it).

    Yea, the code I provided doesn't take into account the width of the new buttons. Our built in code assumes no text and sizes the description accordingly. Some tweaks will have to be made for very small monitors so it doesn't overlap, though the instance of window sizes that small should be very low.
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins
    edited June 20, 2016
    Well I have a slight adaption to your code, taking into account that the text might not fit for smaller screens:
    .sm-gallery-cover-buy-button span:nth-of-type(2) {
        display: none;
    }
    
    /* Change the "Buy Photo" button text */
    .sm-gallery-cover-buy-button:after {
        content: ' ';
    }
    
    @media only screen and (min-width: 968px){
    .sm-gallery-cover-slideshow-button:after {
        content: ' Slideshow';
        margin-left: 15px;
        /*padding-left: 0px;
        border-left: 2px;
        width: 120px;
      font-size: 13px;*/
      width:120px;
    }
    
    .sm-gallery-cover-buy-button span:nth-of-type(2) {
        display: none;
    }
    
    /* Change the "Buy Photo" button text */
    .sm-gallery-cover-buy-button:after {
        content: ' Buy';
        /*font-family: Roboto Condensed,Roboto, Helvetica, Arial, sans-serif;
        */
        margin-left: 10px;
        padding-right: 20px;
        width:120px;
      font-size: 13px;
    }
    
    }
    

    But still below 958px the buy button - then without any text - vanishes...maybe if I scale the button myself... will try that next weekend or so :D

    Lille Ulven
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • HaraldEHaraldE Digital Memories Posts: 160Registered Users Major grins
    edited June 21, 2016
    Erick L wrote: »
    So, what if I prefer the title as part of the breadcrumb?
    Morning,

    Almost all changes/improvements done to SmugMug I am silently in favour of. But the large new gallery header I have mixed feelings about.
    It is not a showstopper, just a "waste of space".
    Is it possible to have it the old way, not on a new line?

    Regards, Harald
    ==================
    My focus is on digitizing memories
  • leftquarkleftquark SmugMug Product Team Posts: 3,607Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited June 21, 2016
    The Gallery Title can no longer be part of the breadcrumb. Visitors found it confusing to have the title of the gallery mixed in with the navigational elements of the breadcrumb. The title of your galleries should stand out from the navigational breadcrumb and hold its own weight. When we designed the new header we were able to reduce some of the wasted vertical space of the old one; the new header is only just very slightly taller than the old one, despite the title being on its own line.
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • HaraldEHaraldE Digital Memories Posts: 160Registered Users Major grins
    edited June 22, 2016
    leftquark wrote: »
    The Gallery Title can no longer be part of the breadcrumb. Visitors found it confusing to have the title of the gallery mixed in with the navigational elements of the breadcrumb. The title of your galleries should stand out from the navigational breadcrumb and hold its own weight. When we designed the new header we were able to reduce some of the wasted vertical space of the old one; the new header is only just very slightly taller than the old one, despite the title being on its own line.
    Thanks Aaron, no worry, this will be a good push for me to start some design thinking of my own. Should have done so ages ago.

    Best regards, Harald
    ==================
    My focus is on digitizing memories
  • Erick LErick L Major grins Posts: 354Registered Users Major grins
    edited June 22, 2016
    leftquark wrote: »
    The Gallery Title can no longer be part of the breadcrumb. Visitors found it confusing to have the title of the gallery mixed in with the navigational elements of the breadcrumb. The title of your galleries should stand out from the navigational breadcrumb and hold its own weight. When we designed the new header we were able to reduce some of the wasted vertical space of the old one; the new header is only just very slightly taller than the old one, despite the title being on its own line.

    I like to think my visitors aren't so dumb. They come by searching or by clicking a link. They already know where they are and the breadcrumb was small and effective as a reminder. The tittle also shows on the tab. now the title is huge and ugly. It takes space and if I remove it, there's nothing left in the breadcrumb. It's even more confusing.

    The "back to top " is a nice addition but an arrow pointing up would be better for non-English sites.
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins
    edited June 22, 2016
    @Erik L, if you only want the arrow pointing up for your Back to Top button try this code:
    /*Short test to remove text from back to top button*/
    .sm-page-scroll-to-top-label{
      display: none;
    }
    

    If you want to replace the english text with something in your site's language try this:
    /*Short test to remove text from back to top button*/
    .sm-page-scroll-to-top-label{
      display: none;
    }
    
    /*Short test to remove text from back to top button*/
    .sm-page-scroll-to-top-label:after{
      content: "Your chosen text" !important;
    }
    

    The first one is tested and seems to work, I can only assume that the last one will do the trick too. :)

    Good luck

    Lille Ulven
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • leftquarkleftquark SmugMug Product Team Posts: 3,607Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited June 22, 2016
    Erick L wrote: »
    I like to think my visitors aren't so dumb. They come by searching or by clicking a link. They already know where they are and the breadcrumb was small and effective as a reminder. The tittle also shows on the tab.

    Some visitors will come by following a link sent to them, and therefore won't necessarily know the title of the gallery. Some of them may open multiple galleries in multiple tabs and can very easily loose track of which was which, despite being intelligent people (this happens to me all the time). And the tab bar on most browsers is so small that nothing is displayed (I see the favicon and 1/3 of the first letter of the title). Having a visible title grounds them in where they are and lets them know what these photos are about.
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • denisegoldbergdenisegoldberg Major grins North Andover, MAPosts: 12,380Super Moderators moderator
    edited June 22, 2016
    Erick L wrote: »
    ...now the title is huge and ugly. It takes space and if I remove it, there's nothing left in the breadcrumb.
    In case you haven't seen it, leftquark supplied CSS in this post (earlier in this thread) to change the size of the title.

    --- Denise
  • Erick LErick L Major grins Posts: 354Registered Users Major grins
    edited June 24, 2016
    leftquark wrote: »
    Some visitors will come by following a link sent to them, and therefore won't necessarily know the title of the gallery. Some of them may open multiple galleries in multiple tabs and can very easily loose track of which was which, despite being intelligent people (this happens to me all the time). And the tab bar on most browsers is so small that nothing is displayed (I see the favicon and 1/3 of the first letter of the title). Having a visible title grounds them in where they are and lets them know what these photos are about.

    Links people click on have anchor text, so do gallery links.

    But hey, Smugmug always knows better, right? Seriously, Do you guys sit around trying to find ways to mess people's website?
  • Erick LErick L Major grins Posts: 354Registered Users Major grins
    edited June 24, 2016
    In case you haven't seen it, leftquark supplied CSS in this post (earlier in this thread) to change the size of the title.

    Does it put it inline with the breadcrumb? That's what I'd like.
  • denisegoldbergdenisegoldberg Major grins North Andover, MAPosts: 12,380Super Moderators moderator
    edited June 24, 2016
    Erick L wrote: »
    Does it put it inline with the breadcrumb? That's what I'd like.
    No, it's still on a separate line - but you can control the size.
    Your statement in your previous post indicated that "the title is huge and ugly". This code allows you to make it smaller.

    --- Denise
  • Djm3006Djm3006 Major grins Steamboat Springs, ColoradoPosts: 174Registered Users Major grins
    edited July 8, 2016
    leftquark wrote: »
    You can use this code to change the font size of the Gallery Title:
    /* Change the font size of the Gallery Title */
    .sm-gallery-cover-title {
        font-size: 24px !important;
    }
    



    You can tweak this code to change the sizes as you desire:
    /* Make the slideshow, download and buy buttons smaller */
    .sm-gallery-cover .sm-button-size-large {
        line-height: 24px !important;
    }
    
    .sm-gallery-cover .sm-gallery-cover-headerbuttons .sm-button-size-large {
        padding: 9px 10px 4px !important;
    }
    


    I've updated the code to change the "Buy Photos" button text: http://www.aaronmphotography.com/Customizations/Gallery/Buttons/Add-to-Cart-Button
    /* Hide the "Buy Photos" text */
    .sm-gallery-cover-buy-button span:nth-of-type(2) {
        display: none;
    }
    
    /* Change the "Buy Photo" button text */
    .sm-gallery-cover-buy-button:after {
        content: ' Buy';
        font-family: Roboto Condensed,Roboto, Helvetica, Arial, sans-serif;
        margin-left: 10px;
    }
    


    Let me look into this.


    If you're on a gallery, the current page (the title of the gallery) is now displayed below the breadcrumb. I would recommend you remove your Breadcrumb CB and turn on the Gallery Breadcrumb in the Customization settings for each of the gallery styles -- it'll look nicer. We wanted to emphasize the gallery title and felt the navigation elements of the breadcrumb were not the right place for the title.

    Morning All,
    Is it just me or has something changed wth the font sizing in the above code? Its not working anymore. also the sizing of the buy button.


    Cheers
    Dave
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins
    edited July 8, 2016
    Hi Djm3006

    What I found in your code is that you are using the font-size of 24px only if the screen size is max 1024px width - as soon as you go to a larger screen other css will do the trick. The same counts for making your buttons smaller. They are all stuck behind a @media only screen and (max-width:1024px) clause.

    For your buy-button-text...I am out of a clue as you are using the same code (according to your code snipped) that I am using and it is working well for me...for this I suppose the smug mug heroes would be a better chance to get it fixed as they probably have more access rights to your code, so here you should probably send a mail to [email protected]

    Good luck

    Lille Ulven
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,651Registered Users Major grins
    edited July 8, 2016
    Djm3006 wrote: »
    Morning All,
    Is it just me or has something changed wth the font sizing in the above code? Its not working anymore. also the sizing of the buy button.


    Cheers
    Dave
    Your site is very ignoring as every link in your drop menu opens in a new browser window.
    Al - Just a volunteer here having fun
    My Website | My Blog
  • Djm3006Djm3006 Major grins Steamboat Springs, ColoradoPosts: 174Registered Users Major grins
    edited July 8, 2016
    Hi Djm3006

    What I found in your code is that you are using the font-size of 24px only if the screen size is max 1024px width - as soon as you go to a larger screen other css will do the trick. The same counts for making your buttons smaller. They are all stuck behind a @media only screen and (max-width:1024px) clause.

    For your buy-button-text...I am out of a clue as you are using the same code (according to your code snipped) that I am using and it is working well for me...for this I suppose the smug mug heroes would be a better chance to get it fixed as they probably have more access rights to your code, so here you should probably send a mail to [email protected]

    Good luck

    Lille Ulven
    Thanks Lille,
    I will have a closer look when I get to some faster internet
    Cheers
    Dave
  • Djm3006Djm3006 Major grins Steamboat Springs, ColoradoPosts: 174Registered Users Major grins
    edited July 8, 2016
    Hi Djm3006

    What I found in your code is that you are using the font-size of 24px only if the screen size is max 1024px width - as soon as you go to a larger screen other css will do the trick. The same counts for making your buttons smaller. They are all stuck behind a @media only screen and (max-width:1024px) clause.

    For your buy-button-text...I am out of a clue as you are using the same code (according to your code snipped) that I am using and it is working well for me...for this I suppose the smug mug heroes would be a better chance to get it fixed as they probably have more access rights to your code, so here you should probably send a mail to [email protected]

    Good luck

    Lille Ulven
    Allen wrote: »
    Your site is very ignoring as every link in your drop menu opens in a new browser window.

    Thanks for your input Allen, was thinking about changing that
    Cheers
    dave
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,651Registered Users Major grins
    edited July 8, 2016
    Djm3006 wrote: »
    Thanks for your input Allen, was thinking about changing that
    Cheers
    dave
    Sorry for being so blunt, I was in a hurry and wasn't thinking. My only point was, should of added that a
    lot of surfers would leave the site quickly. I was really enjoying looking at your photos and only noticed
    later all the open windows.
    Al - Just a volunteer here having fun
    My Website | My Blog
  • Djm3006Djm3006 Major grins Steamboat Springs, ColoradoPosts: 174Registered Users Major grins
    edited July 8, 2016
    Allen wrote: »
    Sorry for being so blunt, I was in a hurry and wasn't thinking. My only point was, should of added that a
    lot of surfers would leave the site quickly. I was really enjoying looking at your photos and only noticed
    later all the open windows.

    Laughing.gif ,I don't mind Blunt, I have turned it off thanks again

    Cheers
    Dave
Sign In or Register to comment.