Frequently Requested Simple Modifications / Tweaks

Sir_Eagle

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?

leftquark

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.

Sir_Eagle

Thanks

leftquark

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!

garymiller

"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.

leftquark

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;
}

leftquark

2013-09-12 11:15pm Properly center the image pagination

ChancyRat

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.

leftquark

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?

ChancyRat

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.

ChancyRat

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

leftquark

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;
}

toddbuchanan

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....

ChancyRat

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.

leftquark

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.

ChancyRat

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.

ChancyRat

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.

ChancyRat

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.

ChancyRat

toddbuchanan wrote: »

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.

leftquark

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.

ChancyRat

Using a negative (-100px) MARGIN is acceptable.

Thanks Lefty.

ChancyRat

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.

leftquark

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;
}

ChancyRat

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?

leftquark

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?

ChancyRat

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.

ChancyRat

Here's a picture of what I see if I try to modify the left margin of the green block. No can do.

ChancyRat

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.

Allen

Check the layout tab on the flyout, looks like there's a huge left margin in it. Is the gallery set to stretch?

leftquark

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.