Frequently Requested Simple Modifications / Tweaks

leftquark · September 4, 2013

charlesdaly wrote: »

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.

Did you use the "font-size" tag in your CSS? Do you have an example you can show me? When you mention "Default size of the titles" do you mean below the image, just before the caption? Or do you mean the title block placed over gallery/folder images? Just want to be sure I know which one you're talking about.

leftquark · September 4, 2013

W.W. Webster wrote: »

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

Webster,
Unfortunately I still haven't unveiled my site and the hide/reveal feature on the sidebar is part of the Javascript allowed in Heritage SmugMug. When I unveil my site (hopefully soon) I will lose that functionality. I did see that Fastline Media has it implemented on their "Templates for the New SmugMug" but I assume it requires JavaScript, of which they have access to.

I don't know how to change an attribute to "display: none;" based on a click, without using JS.

W.W. Webster · September 4, 2013

Thanks - I wondered about that!

leftquark · September 4, 2013

2013-09-04 3:56pm PT: Added Make Gallery and Folder Thumbnails Transparent When the Mouse Hovers

brandofamily · September 4, 2013

leftquark wrote: »

2013-09-04 3:56pm PT: Added Make Gallery and Folder Thumbnails Transparent When the Mouse Hovers

Nice touch!

charlesdaly · September 4, 2013

leftquark wrote: »

Did you use the "font-size" tag in your CSS? Do you have an example you can show me? When you mention "Default size of the titles" do you mean below the image, just before the caption? Or do you mean the title block placed over gallery/folder images? Just want to be sure I know which one you're talking about.

Thanks so much for your response. When I open Galleries the Name of each gallery with default font and size is good but color wise, not very contrasty. I found a code and changed that color to white and I'm happy with that.

When I open any gallery I have to mouse over each image to see any text. Initially the captions were on each image (by default) but they were 'weak' in size and color contrast so I inserted a code and changed the captions color to white which works well but is too small. I then manually applied a Title to each image (deleting each caption). Whatever the default size and color is for Titles is what I have. I like the size but not the color. I looked for a code to change the Title color to white to no avail.

As a test I inserted some captions which, on my test, are below each Title just to be judged.

I guess what would work best for me would be to just color the Titles white sans captions with the option of a mouse-over.
The page to see that is:
http://www.charlesdalyphotography.com/Photography/Recent-work

I want to tell you that much of the coding on my site is from your input here and is so much appreciated. It would be great if SM would hire you to do some tutorials. I would sign up immediately. I think a lot of folks here have benefited greatly by your expertise and willingness to share.

leftquark · September 5, 2013

2013-09-05 4:07pm PT: Added Display a Different Navbar Based on What Device is Viewing Your Site

leftquark · September 5, 2013

charlesdaly wrote: »

When I open any gallery I have to mouse over each image to see any text. Initially the captions were on each image (by default) but they were 'weak' in size and color contrast so I inserted a code and changed the captions color to white which works well but is too small. I then manually applied a Title to each image (deleting each caption). Whatever the default size and color is for Titles is what I have. I like the size but not the color. I looked for a code to change the Title color to white to no avail.

As a test I inserted some captions which, on my test, are below each Title just to be judged.

I guess what would work best for me would be to just color the Titles white sans captions with the option of a mouse-over.
The page to see that is:
http://www.charlesdalyphotography.com/Photography/Recent-work

If I understand correctly you have a gallery displayed in "Collage Landscape" and you want to change the color of the "Title" and "Caption" that is shown when the mouse hovers over your images?

It should be pretty easy to change the font type and color of the title:

.sm-tile-title {
   color: #FFFFFF !important; /* Set the title color to white. Feel free to change the color */
   font-family: sans-serif !important;   /* Set the font face to sans-serif */
   font-size: 12px; /* Set the font size. Feel free to change */
}

To change the caption it's similar:

.sm-tile-caption {
   color: #FFFFFF !important; /* Set the title color to white. Feel free to change the color */
   font-family: sans-serif !important;   /* Set the font face to sans-serif */
   font-size: 12px; /* Set the font size. Feel free to change */
}

Other font attributes can be set.

Personally I prefer the default fonts as they're much nicer than a simple "Sans-Serif" font. So I'd just do the color code and leave it at that.

charlesdaly wrote: »

I want to tell you that much of the coding on my site is from your input here and is so much appreciated. It would be great if SM would hire you to do some tutorials. I would sign up immediately. I think a lot of folks here have benefited greatly by your expertise and willingness to share.

Glad I could help out!

leftquark · September 5, 2013

2013-09-05 4:23pm PT: Added Change the Title and Caption Font on Your Photos

charlesdaly · September 5, 2013

leftquark wrote: »

If I understand correctly you have a gallery displayed in "Collage Landscape" and you want to change the color of the "Title" and "Caption" that is shown when the mouse hovers over your images?
It should be pretty easy to change the font type and color of the title:
[code]

Thank you very much. As expected, that worked perfectly.

charlesdaly · September 6, 2013

captions/titles below images when opened

charlesdaly wrote: »

leftquark wrote: »

If I understand correctly you have a gallery displayed in "Collage Landscape" and you want to change the color of the "Title" and "Caption" that is shown when the mouse hovers over your images?
It should be pretty easy to change the font type and color of the title:
[code]

Thank you very much. As expected, that worked perfectly.

Now -there is always a now, isn't there?

How to arrange captions/titles below images once selected from a gallery and open into a single page.
Same question regarding the placement of titles in slide shows. Currently captions are off-set left of the bottom on images once opened.Centered would be good. Same font as default font is used as Titles in galleries would be excellent.
Great work, sir.

jerryr · September 6, 2013

Hi - any thoughts / suggestions on CSS specific settings for a gallery within a folder ? Example - you wish to make all of the galleries in the Senior folder have a red title ?
I know you can create a separate theme for the folder but the galleries within the folder do not adopt the settings of the theme assigned to the folder.
Thoughts ?

Darter02 · September 6, 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.

Cool beans! Thank you! I took your code and modified it to work with Collage Landscape style. I actually figured out the whatever you call that code that starts with".sm-" bit. Learning new tricks and all that.

/* titles on thumbs in folders */
.sm-tiles-row-organic ul li a p {
  font-size: 100%!important;
  padding-left: 0!important;
  padding-right: 0!important;
  color: #f3f3b2!important;
  text-align:left;
  overflow: visible !important;
  white-space:normal !important;
  height: 41px !important;
}

Luc De Jaeger · September 7, 2013

leftquark wrote: »
Add the words "Full Screen" after the double arrow
.sm-user-ui .sm-lightbox-tools .sm-lightbox-expand:after {
  content: ' Full Screen';
  font-size: 18px;
}

This seems to work very well in FF 23 but not in Chrome 29 nor in IE 10 (Windows XP or Windows 7 platforms). The "Full Screen" text nor the double arrow is visible in Chrome/IE.

Any idea how to make it visible in all browsers?

Luc

ultimachi · September 7, 2013

There's a small issue I have with the "Multiple Photos" template that you drop in to any of the pages. I usually select the option to choose my photos, which works great, but then I am stuck with the order I pick the photos in. Is there a way we can implement a "drag to arrange" feature in this? Thank you!

My website is www.digitalmacdaddy.com in case you need to see what I'm talking about. Thank you

leftquark · September 9, 2013

Luc De Jaeger wrote: »

This seems to work very well in FF 23 but not in Chrome 29 nor in IE 10 (Windows XP or Windows 7 platforms). The "Full Screen" text nor the double arrow is visible in Chrome/IE.

Any idea how to make it visible in all browsers?

Luc

Chrome has fullscreen disabled by default so the Full screen text and double arrow are not displayed. Users have to allow fullscreen in their Chrome settings for this to show up.

leftquark · September 9, 2013

charlesdaly wrote: »
charlesdaly wrote: »

How to arrange captions/titles below images once selected from a gallery and open into a single page.
Same question regarding the placement of titles in slide shows. Currently captions are off-set left of the bottom on images once opened.Centered would be good. Same font as default font is used as Titles in galleries would be excellent.
Great work, sir.

You should be able to do the following to center a title:
/* Center the title
.sm-tile-title { text-align: center; }

/* Center the caption */
.sm-tile-info { text-align: center; }
Or did you mean something else?

Not sure on the slideshow as it shows up centered on my screen. Do you have a link to an example that I can see?

leftquark · September 9, 2013

2013-09-09 10:40am PT: Added Change the Social Icons Color on Mouse Hover

Luc De Jaeger · September 9, 2013

leftquark wrote: »

Chrome has fullscreen disabled by default so the Full screen text and double arrow are not displayed. Users have to allow fullscreen in their Chrome settings for this to show up.

Thanks for the clarification. Very much appreciated!!

Luc

krashedmykarch · September 10, 2013

leftquark wrote: »
charlesdaly wrote: »
You should be able to do the following to center a title:
/* Center the title
.sm-tile-title { text-align: center; }
 
/* Center the caption */
.sm-tile-info { text-align: center; }
Or did you mean something else?

Sorry I missed this post and thanks for sending what you did. I did mean otherwise. This link:
http://charlesdaly.smugmug.com/Photography/Recent-work/i-S4w5FxS/A
shows an image selected from an open gallery. The Title is off to the left at the bottom of the screen. I would rather it be below the image. Hopefully you could add (if a second code is necessary) to place the same Title in the same area when in SM slideshow mode as well.
Great help!

leftquark · September 11, 2013

krashedmykarch wrote: »
leftquark wrote: »
charlesdaly wrote: »
You should be able to do the following to center a title:
/* Center the title
.sm-tile-title { text-align: center; }
 
/* Center the caption */
.sm-tile-info { text-align: center; }
Or did you mean something else?

Sorry I missed this post and thanks for sending what you did. I did mean otherwise. This link:
http://charlesdaly.smugmug.com/Photography/Recent-work/i-S4w5FxS/A
shows an image selected from an open gallery. The Title is off to the left at the bottom of the screen. I would rather it be below the image. Hopefully you could add (if a second code is necessary) to place the same Title in the same area when in SM slideshow mode as well.
Great help!
I cannot guarantee this will work since I don't want to test it on my own site, but it works when I add it to the developer tools in chrome
/* Move the lightbox title to the center */
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title {
   position: absolute;  /* Force the position to be where we want it */
   left: 50%;             /* Place the title in the middle of the page */
}  

/* Move the caption down 30px so it doesn't overlap with the title */
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
   position: absolute;
   left: 50%;
   top: 30px;
}
Let me know if that does what you want.

P.S: Make sure to leave the [ /QUOTE] code in or your replies don't format properly in the forums

krashedmykarch · September 11, 2013

leftquark wrote: »
krashedmykarch wrote: »
leftquark wrote: »
I cannot guarantee this will work since I don't want to test it on my own site, but it works when I add it to the developer tools in chrome
/* Move the lightbox title to the center */
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title {
   position: absolute;  /* Force the position to be where we want it */
   left: 50%;             /* Place the title in the middle of the page */
}  
 
/* Move the caption down 30px so it doesn't overlap with the title */
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
   position: absolute;
   left: 50%;
   top: 30px;
}
Thanks Aaron, that worked perfectly to place Titles/Capions below images opened from Lightbox. It doesn't affect Titles below images when is SS mode. Your images in SS show large paragraphs of text below each. I want exactly that but less description which I assume expands as you add more words.
http://www.aaronmphotography.com/photos/swfpopup.mg?swfPop=true&noClickURL=true&url=http://www.aaronmphotography.com/Nature/Water/18930858_RGFgvK#!i=1700697887&k=KMfFXHj
This is what I'm looking for under each image when in slide show.

I'm adding this further request: Your slide shows show speed at top left and 'return to gallery' top right. And also thumnails across the top of the slideshow.
I love all of those enhancements. Kindly indulge me once more.
Thanks!

Thanks!

leftquark · September 11, 2013

krashedmykarch wrote: »
leftquark wrote: »
krashedmykarch wrote: »
leftquark wrote: »
I cannot guarantee this will work since I don't want to test it on my own site, but it works when I add it to the developer tools in chrome
/* Move the lightbox title to the center */
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title {
   position: absolute;  /* Force the position to be where we want it */
   left: 50%;             /* Place the title in the middle of the page */
}  
 
/* Move the caption down 30px so it doesn't overlap with the title */
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
   position: absolute;
   left: 50%;
   top: 30px;
}
Thanks Aaron, that worked perfectly to place Titles/Capions below images opened from Lightbox. It doesn't affect Titles below images when is SS mode. Your images in SS show large paragraphs of text below each. I want exactly that but less description which I assume expands as you add more words.
http://www.aaronmphotography.com/photos/swfpopup.mg?swfPop=true&noClickURL=true&url=http://www.aaronmphotography.com/Nature/Water/18930858_RGFgvK#!i=1700697887&k=KMfFXHj
This is what I'm looking for under each image when in slide show.

I'm adding this further request: Your slide shows show speed at top left and 'return to gallery' top right. And also thumnails across the top of the slideshow.
I love all of those enhancements. Kindly indulge me once more.
Thanks!

Thanks!
I haven't unveiled my New SmugMug yet so everything is with the old SmugMug. There's no fancy full-screen slideshow in the Heritage SmugMug. The Slideshow you are seeing is the flash/HTML5 version of the slideshow. You can get to yours by going to "Share" -> "Get a Link" -> "Gallery Links" -> Slideshow. It'll give you a link like this: http://charlesdaly.smugmug.com/photos/swfpopup.mg?AlbumID=23722200&AlbumKey=7xc9BB

That has the slideshow with the speed on the left, return to gallery on right, and caption (no title) underneath. Is that what you want?

This version of the slideshow is FLASH and cannot be controlled via CSS As you enter more text, it'll start filling up, moving towards being closer underneath the photo.

My Heritage SmugMug is still live but it doesn't support the new "Title" field. If I deleted the title from all my captions then my Heritage Site, which is still live, would have no titles. I had to do something tricky and doing that makes it so titles show up in my Slideshow. In order to make it work I had to place some code in my caption that is HIDDEN to the New SmugMug but VISIBLE to the Heritage SmugMug.

In my captions I place the following at the very top ... before all the caption stuff I want. Essentially I'm making the title for the Heritage SmugMug Page:
<span class="AaronsOldTitle">Title of Photo</span>
Then in my CSS on the New SmugMug I place the following. This hides it from being shown on my New SmugMug site but is still visible on my Heritage Site. I have some CSS in the heritage SM for "AaronsOldTitle" to format the text how I want it to look for the title.
/* Hide the Photo title in the caption. But still display it 
   on my Legacy SmugMug Site */
.AaronsOldTitle {
  display: none;
}
When it gets to the slideshow caption it ignores the above CSS, strips all the HTML out, and puts just the text of the caption in ... which includes the title.

Hope that helps

charlesdaly · September 11, 2013

Arron, thanks for all that work. I'm a bit confused about what parts are from legacy vs what works with new sm. I am using the new so I think a lot of what you mentioned won't work for me, yes? The link you sent (from share/link/slideshow) opens fine if I paste it into my browser. But how do I use that within my site? That slideshow is pretty much exactly what I want -assuming the bkgd can be change to white but is that the legacy slideshow or the new version?
As usual, many thanks

leftquark · September 11, 2013

charlesdaly wrote: »

Arron, thanks for all that work. I'm a bit confused about what parts are from legacy vs what works with new sm. I am using the new so I think a lot of what you mentioned won't work for me, yes? The link you sent (from share/link/slideshow) opens fine if I paste it into my browser. But how do I use that within my site? That slideshow is pretty much exactly what I want -assuming the bkgd can be change to white but is that the legacy slideshow or the new version?
As usual, many thanks

Everything I typed out should work for you in the New SmugMug too. It seems like the Slideshow you want is an artifact of Heritage that they left around. You may be able to get a similar slideshow by creating a custom page and inserting a "Slideshow" block into it. I haven't played around with slideshows too much. I'm not sure there's a way to get the "Slideshow" button to play the 'old' version of the slideshow. It seems like it defaults to going full-screen and rotating images without a filmstrip on it.

I think you're at the point where you need to email SmugMug support...

krashedmykarch · September 11, 2013

leftquark wrote: »

Everything I typed out should work for you in the New SmugMug too. It seems like the Slideshow you want is an artifact of Heritage that they left around. You may be able to get a similar slideshow by creating a custom page and inserting a "Slideshow" block into it. I haven't played around with slideshows too much. I'm not sure there's a way to get the "Slideshow" button to play the 'old' version of the slideshow. It seems like it defaults to going full-screen and rotating images without a filmstrip on it.

I think you're at the point where you need to email SmugMug support...

I think you're right except when I do send to them I am usually directed to post my question here! I knew I was at the head of the line but I did not know it wasn't a line -it was a circle

leftquark · September 11, 2013

krashedmykarch wrote: »

I think you're right except when I do send to them I am usually directed to post my question here! I knew I was at the head of the line but I did not know it wasn't a line -it was a circle

Yes, quite unfortunate. I've been slightly disappointed with SM support as well. DGrin forums have proven to be more useful

charlesdaly · September 11, 2013

I really don't understand, esp after all this time, why senior heros have not produced a list of css codes that address the various areas of expected questions/difficulties that their customers would need help with. The heros could then just push the codes across to the customers who seek help. I'm sure it's not always an easy job but if all the answers they have (assuming) already provided to folks, those 'answers' could have been saved, categorized and pushed out as needed. Anyway....anyone seen my camera?

leftquark · September 12, 2013

2013-09-11 11:44pm: Added Use Additional Google Fonts

leftquark · September 12, 2013

2013-09-12 10:45am: Added Force Captions to Have Line-Breaks

Frequently Requested Simple Modifications / Tweaks

Comments