Frequently Requested Simple Modifications / Tweaks

13468913

Comments

  • Sir_EagleSir_Eagle Registered Users Posts: 137 Major grins
    edited September 12, 2013
    leftquark wrote: »
    2013-09-12 10:45am: Added Force Captions to Have Line-Breaks

    I have to be the fool on this one. Can someone post some examples of with and without this tweak?
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 12, 2013
    Sir_Eagle wrote: »
    I have to be the fool on this one. Can someone post some examples of with and without this tweak?

    My captions use a mix of HTML and non-HTML. I use the font or span tag to help create a title and possibly include links to my friends who are with me. Legacy SmugMug would handle a mix of HTML and non-HTML and automatically add line-breaks. The new SmugMug detects HTML and assumes you're entering ONLY HTML. It will not add <BR>'s when displaying your captions.

    I'll give you an example:

    If you wanted:
    This is the photo I took. It is good.
    
    Taken with <a href="http://www.somewebsite.com">my friend</a> on 1/1/1999.
    

    Without the code it would look like:
    This is the photo I took. It is good. Taken with [U][COLOR="Blue"]my friend[/COLOR][/U] on 1/1/1999.
    

    With the code for Forcing Captions to Have Line-Breaks it looks as if it should:
    This is the photo I took. It is good. 
    
    Taken with [U][COLOR="Blue"]my friend[/COLOR][/U] on 1/1/1999.
    
    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
  • Sir_EagleSir_Eagle Registered Users Posts: 137 Major grins
    edited September 12, 2013
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 16, 2013
    As of 9/16/13 I'm still using the Heritage SM. Plans to unveil in the next day or two! Super excited. I think my tweaks finally have me at the point where I'm ready!
    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
  • garymillergarymiller Registered Users Posts: 18 Big grins
    edited September 17, 2013
    "My captions use a mix of HTML and non-HTML."

    @leftquark - Are you hand coding everything in your captions and titles including the camera EXIF info or are you managing to pull some of that in from the data? Very impressively done mate.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 17, 2013
    garymiller wrote: »
    "My captions use a mix of HTML and non-HTML."

    @leftquark - Are you hand coding everything in your captions and titles including the camera EXIF info or are you managing to pull some of that in from the data? Very impressively done mate.

    Unfortunately I code that by hand :(

    For example, here's the caption/title for my latest photo "Surprise Awakening":
    <span class="AaronsOldTitle">Surprise Awakening</span><br><span class="AaronsSubTitle">Sunrise over Dead Tree
    Glacier National Park, Montana</span>
    
    [MY REALLY LONG STORY GOES HERE...]
    
    Nikon D800 w/Nikkor 17-35mm f/2.8 ED-IF AF-S:
    17mm, f/16, 1/4 sec, ISO 100
    

    And the CSS:
    /* Customize the way my sub-titles work in the caption below the photo */
    .AaronsSubTitle {
      color: white;
      font-family: 'Open Sans Condensed';
      font-size: 15px;
      display: block;
      margin-bottom: -20px;
    }
    
    /* Hide the Photo title in the caption. But still display it 
       on my Legacy SmugMug Site */
    .AaronsOldTitle {
      display: none;
    }
    
    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 18, 2013
    2013-09-12 11:15pm Properly center the image pagination
    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
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 18, 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

    Allen of course I thought I could pull this off with a copy/paste of your code, but it's not working. Could you please tell me what code to use? And - I put it in the CSS field via Theme edit, correct?

    http://www.joinrats.com/EarningTrust

    The only change I made was to not insist on gold.
    Also, my layout has the titles beneath the images, not at the bottom.

    Thanks.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 18, 2013
    ChancyRat wrote: »
    Allen of course I thought I could pull this off with a copy/paste of your code, but it's not working. Could you please tell me what code to use? And - I put it in the CSS field via Theme edit, correct?

    http://www.joinrats.com/EarningTrust

    The only change I made was to not insist on gold.
    Also, my layout has the titles beneath the images, not at the bottom.

    Thanks.

    Since you haven't unveiled and your live site is still the Legacy SmugMug, it's hard for us to take a look. Perhaps you could supply a screenshot?
    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
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 18, 2013
    leftquark wrote: »
    Since you haven't unveiled and your live site is still the Legacy SmugMug, it's hard for us to take a look. Perhaps you could supply a screenshot?

    Oh thanks. No it won't be live for a long time as I slowly sort this out.
    What do you need a screen shot of? The code, or the images as I see them?
    Gee, too bad I can't give you a special URL where you could see what I see...
    Thanks again.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 18, 2013
    ChancyRat wrote: »
    Oh thanks. No it won't be live for a long time as I slowly sort this out.
    What do you need a screen shot of? The code, or the images as I see them?
    Gee, too bad I can't give you a special URL where you could see what I see...
    Thanks again.

    The CSS
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 18, 2013
    ChancyRat wrote: »
    Allen of course I thought I could pull this off with a copy/paste of your code, but it's not working. Could you please tell me what code to use? And - I put it in the CSS field via Theme edit, correct?

    http://www.joinrats.com/EarningTrust

    The only change I made was to not insist on gold.
    Also, my layout has the titles beneath the images, not at the bottom.

    Thanks.

    I simplified Allen's code so it works more universally. It will now work when the titles are placed under the photo too. Use this:
    .sm-tiles-grid .sm-tile-info p {
      /* 
      font-size: 95%!important;
      color: gold!important;
      text-align:center;
      */
      padding-left: 0!important;
      padding-right: 0!important;
      overflow: visible !important;
      white-space:normal !important;
      height: 41px !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
  • toddbuchanantoddbuchanan Registered Users Posts: 61 Big grins
    edited September 18, 2013
    leftquark wrote: »
    I simplified Allen's code so it works more universally. It will now work when the titles are placed under the photo too. Use this:
    .sm-tiles-grid .sm-tile-info p {
      /* 
      font-size: 95%!important;
      color: gold!important;
      text-align:center;
      */
      padding-left: 0!important;
      padding-right: 0!important;
      overflow: visible !important;
      white-space:normal !important;
      height: 41px !important;
    }
    


    Just as an FYI...I was trying to get my text to stand out on the over lay and came across a good styling tip if it's of interest....adding some CSS drop shadows to the text...

    Here are a couple different types of drop shadows you can add to taste:

    for a simple drop shadow:
    text-shadow: 1px 1px 1px #000;

    or one with a couple colors:
    text-shadow: 1px 1px 1px #000, 3px 3px 5px blue;


    Here's how it works:
    1. value = The X-coordinate
    2. value = The Y-coordinate
    3. value = The blur radius
    4. value = The color of the shadow

    Not saying you need it but just was a neat trick I came across....
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 18, 2013
    leftquark wrote: »
    I simplified Allen's code so it works more universally. It will now work when the titles are placed under the photo too. Use this:
    .sm-tiles-grid .sm-tile-info p {
      /* 
      font-size: 95%!important;
      color: gold!important;
      text-align:center;
      */
      padding-left: 0!important;
      padding-right: 0!important;
      overflow: visible !important;
      white-space:normal !important;
      height: 41px !important;
    }
    

    Oh thank you, you are sweet. Now, I think that caused the rows of gallery images to widen apart. I know somewhere there was an option to control the spacing between rows, and I went through every setting I could think of and can't find it. Can you please direct me to that? I put a pink stripe in the image, which is the space I'd like to remove.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 18, 2013
    ChancyRat wrote: »
    Oh thank you, you are sweet. Now, I think that caused the rows of gallery images to widen apart. I know somewhere there was an option to control the spacing between rows, and I went through every setting I could think of and can't find it. Can you please direct me to that? I put a pink stripe in the image, which is the space I'd like to remove.

    Try removing the "height: 41px;". I'm not sure if it's needed to get the text to wrap and it might be causing the extra spacing. I don't have any pages with folders and galleries so I can't really test the code easily without having to rig something up.
    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
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 18, 2013
    leftquark wrote: »
    Try removing the "height: 41px;". I'm not sure if it's needed to get the text to wrap and it might be causing the extra spacing. I don't have any pages with folders and galleries so I can't really test the code easily without having to rig something up.

    Perfect, thanks. That image was not the best choice - the too-wide spacing occurred also between the rows of galleries. Removing that line worked.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 18, 2013
    In addition to wrapping the text of the gallery names, I tweaked a setting to align the left margin of the gallery list, to the same left margin of the Folder list. Did I use the right setting; that is, is it okay/correct to use a negative px number?

    The snapshot is of just the galleries, but actually I also applied a negative -100 px left margin to the folder settings also. I essentially moved both sections significantly to the left this way. Is this the right way to approach and address this problem?

    Thanks.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 18, 2013
    Here's what I was aiming for in terms of the complete left side of the page, starting at the top.
    I found that the default SM margins moved the Folders and Galleries sections far in to the right, leaving a lot of white space on the left.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 18, 2013
    Just as an FYI...I was trying to get my text to stand out on the over lay and came across a good styling tip if it's of interest....adding some CSS drop shadows to the text...

    Here are a couple different types of drop shadows you can add to taste:

    for a simple drop shadow:
    text-shadow: 1px 1px 1px #000;

    or one with a couple colors:
    text-shadow: 1px 1px 1px #000, 3px 3px 5px blue;

    Thanks, I tried it and tried changing the px values, very interesting. I think the blur is a little too much for me though.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 18, 2013
    ChancyRat wrote: »
    In addition to wrapping the text of the gallery names, I tweaked a setting to align the left margin of the gallery list, to the same left margin of the Folder list. Did I use the right setting; that is, is it okay/correct to use a negative px number?

    The snapshot is of just the galleries, but actually I also applied a negative -100 px left margin to the folder settings also. I essentially moved both sections significantly to the left this way. Is this the right way to approach and address this problem?

    Thanks.

    Using a negative (-100px) MARGIN is acceptable. In fact, I use negative margins quite frequently to move things around as I want them. Just to note: negative PADDINGS is not allowed while negative MARGINS is allowed.
    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
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 18, 2013
    Using a negative (-100px) MARGIN is acceptable.

    Thanks Lefty. :)
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 18, 2013
    Isn't the 2nd breadcrumb supposed to go away?
    It seems I cannot turn off "display full breadcrumb" for the gallery settings. This means I end up with two full breadcrumbs (because I do want the breadcrumb to be at the top of all pages).

    Mainly I want only the gallery title to be visible in a gallery. In this snapshot you see the pink should be gone.
    And clicking "Off" for display full breadcrumb, will not turn Off, green.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 18, 2013
    ChancyRat wrote: »
    It seems I cannot turn off "display full breadcrumb" for the gallery settings. This means I end up with two full breadcrumbs (because I do want the breadcrumb to be at the top of all pages).

    Mainly I want only the gallery title to be visible in a gallery. In this snapshot you see the pink should be gone.
    And clicking "Off" for display full breadcrumb, will not turn Off, green.

    Now this is something I'd email SmugMug Support Heroes about, since it seems like it's a bug and not properly working ... however, you can take care of it using some CSS code too:
    /* Hide the breadcrumb bar completely */
    .sm-page-layout-region .sm-page-layout-region-center .sm-breadcrumb-item {
      display:none !important;
    }
    
    /* Turn back on the home icon, the separator icon,
        and the current gallery name */
    .sm-page-layout-region-center .sm-page-widget-body li:first-child,
    .sm-page-layout-region-center .sm-page-widget-body li:nth-of-type(2),
    .sm-page-layout-region-center .sm-page-widget-body li:last-child {
      display: inline !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
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 18, 2013
    ChancyRat wrote: »
    Thanks Lefty. :)

    Actually I spoke too soon. Now that I've moved the top sections to the left, the actual gallery contents, which are locked as green and Smugmug-controlled, are too far right. how can I move that section?
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 18, 2013
    ChancyRat wrote: »
    Actually I spoke too soon. Now that I've moved the top sections to the left, the actual gallery contents, which are locked as green and Smugmug-controlled, are too far right. how can I move that section?

    Could you post a screenshot of what you're seeing? Is it the same as in post #169? I'm a little confused because all my folders and galleries and the thumbnails with the image for that folder or gallery are aligned together on the left.

    I imagine this is for a page covered by the "All Folders" section?
    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
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 18, 2013
    leftquark wrote: »
    Could you post a screenshot of what you're seeing? Is it the same as in post #169? I'm a little confused because all my folders and galleries and the thumbnails with the image for that folder or gallery are aligned together on the left.

    I imagine this is for a page covered by the "All Folders" section?

    You are so nice. Not sure what you mean by "all folders" - this is down to the page level. The big pink block is what I'd like to eliminate by moving gallery contents to the left. This is Smugmug style.

    (I also Pinked the extra breadcrumb that I cannot eliminate.)

    I had to resize the browser window so that I would not exceed the image size limit, which is why it looks too tiny, font-wise.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 18, 2013
    Here's a picture of what I see if I try to modify the left margin of the green block. No can do.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited September 18, 2013
    leftquark wrote: »
    Could you post a screenshot of what you're seeing? Is it the same as in post #169? I'm a little confused because all my folders and galleries and the thumbnails with the image for that folder or gallery are aligned together on the left.

    I imagine this is for a page covered by the "All Folders" section?

    Forgot to address the #169 question - no, this is a layer deeper, to the page level. I solved the Folder and sub-folder margins. Now the gallery contents should move too. Is this problem based on my choice of "turbo theme"? I haven't been able to play with other themes yet so I don't know what I locked myself into by choosing this theme.
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited September 18, 2013
    Check the layout tab on the flyout, looks like there's a huge left margin in it. Is the gallery set to stretch?
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 18, 2013
    Allen wrote: »
    Check the layout tab on the flyout, looks like there's a huge left margin in it. Is the gallery set to stretch?

    Yes, it almost looks like there's supposed to be a left sidebar that is blank or something. I dunno if it has to do with the theme you selected.

    Go to Customize -> Customize Site -> Click the "Layout" tab -> Scroll down to "Sidebars" and make sure "left" is set to OFF. Also look at the "Margins" section and make sure the "Side Margins" aren't set to something really large.
    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
Sign In or Register to comment.