Frequently Requested Simple Modifications / Tweaks

1246713

Comments

  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited August 30, 2013
    I have finally figured out how to wrap long gallery titles in the "grid" format folders. Using Smugmug style as default.
    I have "hide" when hover set.
         /* titles on thumbs in folders */
    .sm-tiles-grid ul li a p {
      font-size: 95%!important;
      padding-left: 0!important;
      padding-right: 0!important;
      color: gold!important;
      text-align:center;
    [COLOR=Red]  overflow: visible !important;
      white-space:normal !important;
      height: 41px !important;[/COLOR]
    }
    
    This seems to work also and adjusts to how many lines. Have to check a bunch of pages.
    height: auto !important;

    Screen shot showing 1, 2 and 3 lines of titles.
    Edit: I replaced the screen shot with the "auto" height in the CSS
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • charlesdalycharlesdaly Registered Users Posts: 110 Major grins
    edited August 30, 2013
    help with minor issues please
    I lost my site due to incompatibility with CSS3 and I'm starting over with a new design. I have most of it back but the navs came with the new design. I was able to custom the text logo. But they are on different lines (containers?) and I can not find how to move them to the same and format the font for the navs.

    My custom NoRightClicki no longer works and every where I place it is the wrong place.
    Please.
    Thanks!
    Thanks!
    Charles
    Port Credit. Canada
    http://charlesdalyphotography.com
  • charlesdalycharlesdaly Registered Users Posts: 110 Major grins
    edited August 30, 2013
    Regarding captions. The captions on my galleries page are white and very readable but on the home page they are greyish. I tried in themes and change to white and lost my logo (for a few seconds until I quickly changed that brilliant move) I don't mind trial and error but there are so many cliffs...
    Thanks!
    Charles
    Port Credit. Canada
    http://charlesdalyphotography.com
  • RKnechtRKnecht Registered Users Posts: 366 Major grins
    edited August 30, 2013
    Allen wrote: »
    I have finally figured out how to wrap long gallery titles in the "grid" format folders. Using Smugmug style as default.
    I have "hide" when hover set.
         /* titles on thumbs in folders */
    .sm-tiles-grid ul li a p {
      font-size: 95%!important;
      padding-left: 0!important;
      padding-right: 0!important;
      color: gold!important;
      text-align:center;
    [COLOR=Red]  overflow: visible !important;
      white-space:normal !important;
      height: 41px !important;[/COLOR]
    }
    
    This seems to work also and adjusts to how many lines. Have to check a bunch of pages.
    height: auto !important;

    Screen shot showing 1, 2 and 3 lines of titles.

    Allen, that's awesome. I was trying to figure that out as well I'll have to give it a try after this weekend's event. If it works on my galleries, I'll be a happy camper.
    A few Nikon bodies and some fast Nikon glass

    www.richknechtphotography.com
  • pmbpropmbpro Registered Users Posts: 236 Major grins
    edited August 30, 2013
    Allen wrote: »
    I have finally figured out how to wrap long gallery titles in the "grid" format folders. Using Smugmug style as default.
    I have "hide" when hover set.
         /* titles on thumbs in folders */
    .sm-tiles-grid ul li a p {
      font-size: 95%!important;
      padding-left: 0!important;
      padding-right: 0!important;
      color: gold!important;
      text-align:center;
    [COLOR=Red]  overflow: visible !important;
      white-space:normal !important;
      height: 41px !important;[/COLOR]
    }
    
    This seems to work also and adjusts to how many lines. Have to check a bunch of pages.
    height: auto !important;

    Screen shot showing 1, 2 and 3 lines of titles.
    Edit: I replaced the screen shot with the "auto" height in the CSS


    This worked perfectly with my site (I'd used the Moss theme). THANK YOU, Allen!
    pmb images
    Film/TV Stills Photography
    "When your work speaks for itself, don't interrupt." ~ Henry J. Kaiser
  • MelGattisMelGattis Registered Users Posts: 42 Big grins
    edited August 31, 2013
    Good Morning.
    Thank you so much for sharing your codes as I've already used a few to improve my site. I'm hoping you may be able to help me get my mail chimp set up on my homepage for email signup. I was given the code below from the site but I have not been able to get it to work. Maybe you can let me know what's wrong or if I can even get this working on Smugmug. I searched and couldn't find anything helpful. Thanks in advance.

    Mel





    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
    We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

    Subscribe to our mailing list

    * indicates required










    Email Format








  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited August 31, 2013
    The issues you're running into are that SmugMug doesn't support JavaScript code (the <script> tag), HTML comments, or stylesheets loaded from external domains (the <link> tag). That stuff is easily worked around because the <script> is only used to validate entered data. However, even after you strip that all out, you've still got a problem. The code uses this to allow the user to enter their email address:
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    

    When that code is entered into SmugMug, the name of the email field gets changed to lowercase!
    <input type="email" value="" name="email" class="required email" id="mce-EMAIL">
    

    This causes MailChimp to not be able to read the email address that is entered. SmugMug doesn't make the same breaking change to the NAME or EMAILTYPE fields. To me it looks like SmugMug is intentionally trying to break the entering of email addresses into MailChimp forms, because I can't think of a legitimate reason to modify things like that.

    (It may be a feature of their HTML validator that they just weren't aware of, or it may be designed to protect a particular SmugMug backend which accepts a parameter called precisely 'EMAIL', you'll have to ask the support team about this one line of code to find out.)
  • MelGattisMelGattis Registered Users Posts: 42 Big grins
    edited August 31, 2013
    Thank you so much for your reply and advice. It is greatly appreciated and I'll follow up with support.


    Lamah wrote: »
    The issues you're running into are that SmugMug doesn't support JavaScript code (the <script> tag), HTML comments, or stylesheets loaded from external domains (the <link> tag). That stuff is easily worked around because the <script> is only used to validate entered data. However, even after you strip that all out, you've still got a problem. The code uses this to allow the user to enter their email address:
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    
    When that code is entered into SmugMug, the name of the email field gets changed to lowercase!
    <input type="email" value="" name="email" class="required email" id="mce-EMAIL">
    
    This causes MailChimp to not be able to read the email address that is entered. SmugMug doesn't make the same breaking change to the NAME or EMAILTYPE fields. To me it looks like SmugMug is intentionally trying to break the entering of email addresses into MailChimp forms, because I can't think of a legitimate reason to modify things like that.

    (It may be a feature of their HTML validator that they just weren't aware of, or it may be designed to protect a particular SmugMug backend which accepts a parameter called precisely 'EMAIL', you'll have to ask the support team about this one line of code to find out.)
  • MotoriderMotorider Registered Users Posts: 60 Big grins
    edited August 31, 2013
    Thanks Allen!!! I had a version of that caption text code on my homepage but I still had it on my to-do list for my galleries. Here's the version of your code I used for my Collage Landscape galleries. Because I don't completely understand all this CSS magic stuff yet, I took out everything in it that didn't seem to make a difference or break anything.
    /* caption text on gallery thumbs */
    .sm-tile-caption  {
      color: gold;
      overflow: visible;
      white-space:normal !important;
      height: auto !important;
    }
    
    Now, if I could just figure out how to make the captions stay visible regardless of hover over these thumbs I'd be thrilled.

    Cheers
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited August 31, 2013
    Motorider wrote: »
    ...Now, if I could just figure out how to make the captions stay visible regardless of hover over these thumbs I'd be thrilled.

    Cheers
    The folder grid layout I'm using has that toggle in the 2nd tab.
    "on hover" hide
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • MotoriderMotorider Registered Users Posts: 60 Big grins
    edited August 31, 2013
    Allen wrote: »
    The folder grid layout I'm using has that toggle in the 2nd tab.
    "on hover" hide

    I see that setting for Folders & Pages, but not Galleries. That block in my All Galleries says "Area reserved for default SmugMug content" and is locked.
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited August 31, 2013
    Motorider wrote: »
    I see that setting for Folders & Pages, but not Galleries. That block in my All Galleries says "Area reserved for default SmugMug content" and is locked.
    I added a galleries box and this works on it. Might have to add more specifiers as I don't know what
    else it will affect. I have some big gallery descriptions so added a rule so those would not show.
    Might add this to "just this page" first to see how it looks. Then higher to cover more pages.
    Not sure if .sm-tile-album is high enough to only affect this type of box. I did not look at removing
    the icon, kinda unless as they are all galleries.
         /* titles on thumbs in folders */
      .sm-tile-album .sm-tile-info p {
      font-size: 95%!important;
      padding-left: 0!important;
      padding-right: 0!important;
      color: gold!important;
      text-align:center;
      overflow: visible !important;
      white-space:normal !important;
      height: auto!important;
    }
    
     .sm-tile-album .sm-tile-info .sm-tile-caption {display:none;}
    
    BTW, the box did have a 2nd tab to set hover.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Sir_EagleSir_Eagle Registered Users Posts: 137 Major grins
    edited September 1, 2013
    Allen wrote: »
    I have finally figured out how to wrap long gallery titles in the "grid" format folders. Using Smugmug style as default.
    I have "hide" when hover set.
         /* titles on thumbs in folders */
    .sm-tiles-grid ul li a p {
      font-size: 95%!important;
      padding-left: 0!important;
      padding-right: 0!important;
      color: gold!important;
      text-align:center;
    [COLOR=Red]  overflow: visible !important;
      white-space:normal !important;
      height: 41px !important;[/COLOR]
    }
    
    This seems to work also and adjusts to how many lines. Have to check a bunch of pages.
    height: auto !important;

    Screen shot showing 1, 2 and 3 lines of titles.
    Edit: I replaced the screen shot with the "auto" height in the CSS

    Any idea how to get rid of the grey background on the description?
  • charlesdalycharlesdaly Registered Users Posts: 110 Major grins
    edited September 1, 2013
    issues with nav alignment, captions colors
    *Fixed the nav hover problem listed below- thanks

    I hope I'm not asking for too much help in one post. If I am please let me know asap and I will edit this down into multiples. Any/all help is gratefully requested.

    I'm having a problem with my nav bar being on a different line and different font than my logo and don't know how to fix that.

    On thumbnails the caption only shows on hover. I want no hover but would just like the captions to be there all the time. The captions are also less readable than on the gallery page so I went into organize and manually changed all captions to titles but that had no affect on the thumbs in the galleries. I did that only on the first gallery, 'slideshow images' as a test.

    In galleries slide show there is no way out except the browser back button. This is the code I thought controlled the 'X':
    I just removed that and there is still no X, or way out

    /* Lightbox: Add the word "Close" next to the X */
    .sm-user-ui .sm-lightbox-tools .sm-lightbox-close:after {
    content: ' Close';
    font-size: 18px;
    }

    /* Set the color of the "X" */
    .sm-user-ui .sm-lightbox-tools .sm-fonticon-XCross2 {
    color: #000000 !important; */
    }

    .sm-user-ui .sm-lightbox .sm-lightbox-tools {
    padding: 5px;
    }

    /* Set the properties for the entire close box */
    /* If you want to change the color of the "Close" text, uncomment out the color and set your color */
    .sm-user-ui .sm-lightbox-tools .sm-lightbox-close {
    background-color: #000000 !important; */
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: 14px;
    opacity: 2.0;
    }

    Thanks for all help
    Thanks!
    Charles
    Port Credit. Canada
    http://charlesdalyphotography.com
  • pat.kanepat.kane Registered Users Posts: 332 Major grins
    edited September 1, 2013
    Charles, to fix the navbar problem, adjust the width of your logo to something less than 100% then drag your navbar just to the right of the logo. You should see the "highlight" when it is placed in the correct spot. It took me a little while to figure that out myself. Good luck.
  • charlesdalycharlesdaly Registered Users Posts: 110 Major grins
    edited September 1, 2013
    pat.kane wrote: »
    Charles, to fix the navbar problem, adjust the width of your logo to something less than 100% then drag your navbar just to the right of the logo. You should see the "highlight" when it is placed in the correct spot. It took me a little while to figure that out myself. Good luck.
    Thanks Pat. I moved around the container widths but the prob is those two containers are separate and only the contents get shifted by changing widths/margins. Just now I adjusted their placement and stacked them in the center. That's something I could play with but I'm still not accessing the font manager so the fonts are not the same.
    Thanks!
    Thanks!
    Charles
    Port Credit. Canada
    http://charlesdalyphotography.com
  • raebrownraebrown Registered Users Posts: 273 Major grins
    edited September 1, 2013
    Any way to add an apostrophe to the right click message and have it take? As soon as I add one it reverts to the generic message.
    Rae
    Tickled Pixels

    Tickled Pixels Blog: "
    A walk in Gamla stan, the old town of Stockholm"
  • charlesdalycharlesdaly Registered Users Posts: 110 Major grins
    edited September 1, 2013
    raebrown wrote: »
    Any way to add an apostrophe to the right click message and have it take? As soon as I add one it reverts to the generic message.
    Rae, I can't even spell apostrophe but I do know that your photos are excellent. But you really must get out and about more.
    Thanks!
    Charles
    Port Credit. Canada
    http://charlesdalyphotography.com
  • Sir_EagleSir_Eagle Registered Users Posts: 137 Major grins
    edited September 1, 2013
    Copy and paste this symbol instead. ʹ I used the windows character map to get it. It is a "Modifier Letter Prime", whatever that symbol is for, but looks like an apostrophe to me. And it works.
  • raebrownraebrown Registered Users Posts: 273 Major grins
    edited September 2, 2013
    Rae, I can't even spell apostrophe but I do know that your photos are excellent. But you really must get out and about more.


    Thanks Charles. I do get out just as often as my wife will let me. :D This weekend my assignment is to paint the en-suite. Of course I can play with the website while waiting for the paint to dry.
    Rae
    Tickled Pixels

    Tickled Pixels Blog: "
    A walk in Gamla stan, the old town of Stockholm"
  • raebrownraebrown Registered Users Posts: 273 Major grins
    edited September 2, 2013
    Sir_Eagle wrote: »
    Copy and paste this symbol instead. ʹ I used the windows character map to get it. It is a "Modifier Letter Prime", whatever that symbol is for, but looks like an apostrophe to me. And it works.


    Worked like a charm...thanks!
    Rae
    Tickled Pixels

    Tickled Pixels Blog: "
    A walk in Gamla stan, the old town of Stockholm"
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited September 2, 2013
    raebrown wrote: »
    Any way to add an apostrophe to the right click message and have it take? As soon as I add one it reverts to the generic message.

    You can add a backslash in front of the apostrophe so that it doesn't end up prematurely ending the string it's contained in:
    content: 'CSS\'s great!';
    

    Alternatively, enclose the string in double-quotes instead of single-quotes:
    content: "CSS's great!";
    
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited September 2, 2013
    Added this code to effect the active page on nav, but it does not work on the "IMAGE GALERIES" tab. Any ideas? ne_nau.gif
    /*Active Page Color*/
    .sm-page-widget-nav-activepage > a {
      color: orange!important;
    }
    

    http://www.brandolinoimaging.com/Image-Galleries

    Click around and see... it works on all top and inner levels except that one.
  • MotoriderMotorider Registered Users Posts: 60 Big grins
    edited September 2, 2013
    I added a galleries box and this works on it
    Allen, perhaps you've added a Gallery block to your page that you can edit. But I cannot edit the block on my 'All Galleries' page therefore I can't see that second tab to turn off the hover.

    Anyone know the CSS to make captions permanently visible without hovering?
  • raebrownraebrown Registered Users Posts: 273 Major grins
    edited September 2, 2013
    Lamah wrote: »
    You can add a backslash in front of the apostrophe so that it doesn't end up prematurely ending the string it's contained in:
    content: 'CSS\'s great!';
    
    Alternatively, enclose the string in double-quotes instead of single-quotes:
    content: "CSS's great!";
    


    I knew about the backslash but, for some reason, it wasn't working this time. Didn't know about the double-quotes solution. Thanks for providing your other modifications - have used one and may eventually add more. We parked ourselves in Auckland for 2 weeks in 2010 and loved it. Looking forward to seeing more of NZ this February. Cheers!
    Rae
    Tickled Pixels

    Tickled Pixels Blog: "
    A walk in Gamla stan, the old town of Stockholm"
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited September 2, 2013
    Added this code to effect the active page on nav, but it does not work on the "IMAGE GALERIES" tab. Any ideas? ne_nau.gif
    /*Active Page Color*/
    .sm-page-widget-nav-activepage > a {
      color: orange!important;
    }
    
    http://www.brandolinoimaging.com/Image-Galleries

    Click around and see... it works on all top and inner levels except that one.

    Got it... the code does not like the custom URL's
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 3, 2013
    2013-09-03 1:24pm PT: Added Change the Background Color of Buttons on Mouse Hover
    2013-09-03 1:32pm PT: Grid Format: Places Wraped Titles on Gallery Thumbnails (thanks to Allen)
    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 4, 2013
    2013-09-04 2:09pm PT: Added Change the "The Question" text in the Contact Form (thanks to jwashburn)
    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
  • charlesdalycharlesdaly Registered Users Posts: 110 Major grins
    edited September 4, 2013
    Titles color/captions size
    The default size of my Titles is good but the color is not -it's dull grey and not as readable in thumbnails as the captions are. I changed the color of captions to white which made them more readable but too small in font size Does anyone have the code to either increase the caption font size or change Title color to white. Ideally, changing the captions size would be best for me due to the inability of SM to bulk load Titles.

    If I can achieve either one I would not use the other.
    Thanks!
    Charles
    Port Credit. Canada
    http://charlesdalyphotography.com
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 4, 2013
    Aaron,

    If you haven't done so already (for which I apologise in advance for not being able to find), can you kindly share how you have implemented the hide/reveal feature for your left sidebar/ menu? That is something very neat I haven't noticed elsewhere!

    Thanks
Sign In or Register to comment.