Frequently Requested Simple Modifications

leftquark

Since the beginning of August 2013 I have been maintaining a list of Frequently Used / Requested CSS customizations in a stickied thread in this forum (http://www.dgrin.com/showthread.php?t=237930). Unfortunately due to dgrin maximum character rules I can no longer add customizations to the thread. Instead, I have transitioned my SmugMug CSS customizations to a section on my website.

Please visit my website for the CSS code to the Frequently Used / Requested CSS customizations:
http://www.aaronmphotography.com/Customizations

I have taken all of the customizations from the thread, as well as some customizations that I use on my own site, as well as some contributions from other dgrin forum members, and put them in 1 easy to find place.

The benefits of finding the code on my website include:

• Ability to see screenshots of what the code does
• Ability to add additional information on how to use the code
• Ability to see the code in action on my website
• I can continuously add customizations without being limited by dgrin character maximums

The following customizations may be found on the site (I will update the list here as I add customizations):

Sitewide Customizations:

• Modify "Load More" Button
• Remove the Breadcrumb
• Make Thumbnails Transparent on Hover
• Change the Button Background Colors
• Change Social Icon Hover Color
• Change the Contact Form "The Question" Text
• Use Additional Google Fonts
• Create a Fullscreen Slideshow
• Change Features for Mobile or Tablet Browsers
• Remove the "Powered by SmugMug" Footer
• Change the Breadcrumb Text Color
• Add a Line Under the Breadcrumb
• Make Anything Clickable Have Its Color Fade In/Out
• Add a Drop Shadow to Images on Hover
• Make Slideshow Captions Fill the Height

Gallery Customizations:

• Remove the Comments Section
• Remove the Keywords Section
• Remove the Thumbnail Arrows
• Remove the Thumbnail Pagination
• Change Photo Title and Caption Fonts
• Force Captions to Have Line Breaks
• Remove Image Pagination
• Properly Center the Image Pagination
• Change Caption Link and Hover Color
• Add Labels to the Icons
• Add a Border Around Thumbnails and Gallery Image
• Add "Click to Enlarge" to Thumbnails
• Wrap Titles on Thumbnails
• Reduce Thumbnail Margin (SmugMug Layout)
• Widen Caption / Comments Area (SmugMug Layout)
• Change the Right Click Protection Text
• Change the "Add to Cart" Button Text
• Remove the Buy Button
• Remove the Slideshow Button
• Change Gallery Description Font
• Customize the Lightbox
• Change the Shopping Cart Back Button Text

Lightbox Customizations

• Change the Add to Cart Button Text
• Remove Add to Cart Button
• Customize the "Add to Cart" Button
• Remove Fullscreen Button
• Always Show Lightbox Captions
• Change Photo Title and Caption Fonts
• Add the Words "Full Screen" to Lightbox
• Make Lightbox Caption Wider
• Add The word "Close" to the Lightbox

Navbar Customizations

• Change Navbar Hover Color
• Emphasize the Active Page
• Add a Line or Border to Your Navbar
• Display Different Navbar Based on Screensize
• Change Submenu Colors

The initial release, at this time, includes 45 CSS customizations. I plan on adding additional CSS tweaks that I use on my own website, as well as a number of CSS customizations that you have asked about here on the forums. As I find the time I will go through all my posts and pull out all the CSS tweaks that I've typed in various forums and try to post them on my Customizations Website.

Again, the full list of customizations can be found at http://www.aaronmphotography.com/Customizations

Feel free to post CSS customization requests in this thread. I won't guarantee that I will be able to respond or answer your question but if I have the free time I will give it a try. Remember, I do this on my free time (I'm not paid by SmugMug to help out ... I just do it because I'm a nice guy!)

leftquark

Changelog

• 2013-10-10 1:09 AM: Initial release of 45 customizations.
• 2013-10-15 12:34am PT: Added "Change Gallery Description Font"
• 2013-10-15 2:46am PT: Updated code to fix bug in "Change the Contact Form 'The Question' Text"
• 2013-10-15 10:44am: Added "Add a Drop Shadow to Images on Hover"
• 2013-10-15 11:11am: Added "Customize the Lightbox"
• 2013-10-16 2:22am: Added "Change Submenu Colors"
• 2013-10-17 11:18pm: Added an "Other Customizations" page with 24 new customizations
• 2013-10-21 1:58pm: Added Left Indent and Fix Height Spacing of Wrapped Links in Accordion Menu to the "Other Customizations" page.
• 2013-10-23 1:16am: Added "Move Title to Top of Thumbnail" for Folder/Gallery/Page titles, to the "Other Customizations" page.
• 2013-11-01 1:40am: Added "Change the Font Size and Color of the Search Content Block's Title" to the "Other Customizations" Page
• 2013-12-16 12:50am: Added "Change the Order of the Social Icons" to the "Other Customizations" Page
  
  
• 2013-12-29 3:04am PST: Created new section called "Font / Link Tweaks" and moved all tweaks pertaining to fonts or links to it. Also moved 7 customizations from the "Other Customizations" page to their own page with detailed instructions: Change the Color of the "Like" Button When Clicked, Remove the map icon / button, Change the Colors of the Caption Links, Change the Hover Color of Links in the Comments, Change the font of the Photo Title, SM Layout: Ensure the top of the photo aligns with the thumbnails, Define how List Items Look in the Caption. Removed these 7 from the "Other Customizations" page.
  2013-12-29 1:40pm: Moved the following 4 customizations from "Other Customizations" to their own pages, complete with screenshots and additional instructions: SM Layout: Swap the Image and Thumbnails, Change the Font of the Menu (Top Level), Hide the Weird Icon Underneath Gallery Names, Center the Text of the Gallery Names (Folder View)
  
  
• 2013-12-30 12:13am PST: Added "Hide Photo Title"
  
  Major Update:
• 2013-12-30 1:35am PST: Re-arranged the "Galleries" customizations by creating new sections for "Buttons" and "SmugMug Layout" and moved customizations there. Old links will be broken.
• 2013-12-30 2:32am PST: Moved the following customizations from "Other Customizations" to their own pages, complete with screenshots and additional instructions: Change the Height of the Lightbox Close "x" button area, Change the Font of the Description of the Gallery, Add the Words "See Caption" to the caption area in the lightbox, Move the Breadcrumb Up, Center the Lightbox Caption and Title, Change the Color of Links in Your Footer, Change the Color of Links in your Breadcrumb, In Collected Galleries, change "from" text, Accordion Menu: Fix Height Spacing and Left Indent Long Links, Move Title Text to Top of Image, Customize the Search Box Text, Change the Font Size and Color of the Search Content Block's Title, Change the Order of the Social Icons, Create some space to the left of the left navbar
  
  
• 2013-12-30 1:03pm PST: Added "Hide Gallery Descriptions"
• 2014-01-20 9:09am: Added SM Layout: Change Buy Button Text
• 2014-04-18 1:05am: Added "Turn your Gallery into a Filmstrip"
• 2014-04-18 10:54am: Added "Customize the Shipping Cart" Filter Checkboxes
• 2014-08-22 10:41am: Added "Change the Shopping Cart Back Button Text"
• 2015-02-24 2:16pm PST: Added "Make Slideshow Captions Fill the Height"

leftquark

(Reserved for future use)

einat

You're great,
Thanks!

AceCo55

Excellent!! Thank you so much

Allen

leftquark wrote: »

...

Can you also add a link back to the original Dgrin thread where the discussion is?

einat

Allen - it's a sticky thread
and here's the link:
http://www.dgrin.com/showthread.php?t=237930

Allen

einat wrote: »

Allen - it's a sticky thread
and here's the link:
http://www.dgrin.com/showthread.php?t=237930

I was referring to his site where he has all the customization examples.

From the sticky you can go to his site but if you see some other customization on his site the discussion would be handy.

einat

ahhh, good point

leftquark

Allen wrote: »

I was referring to his site where he has all the customization examples.

From the sticky you can go to his site but if you see some other customization on his site the discussion would be handy.

That's a really good suggestion. If it came from a discussion I'll try to link back to the dgrin forums here. I'll definitely do it going forward. It may be a bit time consuming to do it to the ones I've already posted but if I have some spare time I'll work on that too.

I just got back from a couple photo trips and I have something like 800 photos I'm trying to go through, so my time is focused on the photo editing and not on CSS customizations I'll work on it when I can!

leftquark

2013-10-15 12:34am PT: Added "Change Gallery Description Font"

beardedgit

Aaron, I'm using your Contact Page hack (to change "The Question") and it's having an unwanted effect elsewhere on my site...

The second part (the code that hides the original text) is affecting the Gallery Settings box, it's hiding the word "Sigma". I've yet to check if there are similar unwanted effects anywhere else.

Please let me know if there's a workaround.

Screenshot:

leftquark

beardedgit wrote: »

Aaron, I'm using your Contact Page hack (to change "The Question") and it's having an unwanted effect elsewhere on my site...

The second part (the code that hides the original text) is affecting the Gallery Settings box, it's hiding the word "Sigma". I've yet to check if there are similar unwanted effects anywhere else.

Please let me know if there's a workaround.

Ack, I see why. Simple fix actually ... in the 2nd set of code where it says "Hack to hide the question" just add ".sm-contact-pro-form" before the ".sm-form-contents"

I've updated my page with the code (http://www.aaronmphotography.com/Customizations/Sitewide/The-Question) but here it is for reference:

/* Set the The Question text to your own wording */
.sm-contact-pro-form:before {
   content: "This is the text you want above the text box";
   position: absolute;
   top: 215px;
   left: 200px;
}

/* Hack to hide the The Question */
.sm-contact-pro-form .sm-form-contents .sm-form-field-overhead:nth-child(4) label {
    color: #242528;
    padding-left: 290px;
}

leftquark

2013-10-15 2:46am PT: Updated code to fix bug in "Change the Contact Form 'The Question' Text"

beardedgit

leftquark wrote: »

Ack, I see why. Simple fix actually ... in the 2nd set of code where it says "Hack to hide the question" just add ".sm-contact-pro-form" before the ".sm-form-contents"

I've updated my page with the code (http://www.aaronmphotography.com/Customizations/Sitewide/The-Question) but here it is for reference:

/* Set the The Question text to your own wording */
.sm-contact-pro-form:before {
   content: "This is the text you want above the text box";
   position: absolute;
   top: 215px;
   left: 200px;
}

/* Hack to hide the The Question */
.sm-contact-pro-form .sm-form-contents .sm-form-field-overhead:nth-child(4) label {
    color: #242528;
    padding-left: 290px;
}

Sorted - many thanks for your prompt reply

FWIW, I'm using visibility:hidden instead of color: #242528; and padding-left: 290px; - can you see any downside with me using that?

leftquark

beardedgit wrote: »

Sorted - many thanks for your prompt reply

FWIW, I'm using visibility:hidden instead of color: #242528; and padding-left: 290px; - can you see any downside with me using that?

Nope. I got the code from someone else but was wondering the same thing. If "visibility: hidden;" works, I think that's a better option.

beardedgit

leftquark wrote: »

Nope. I got the code from someone else but was wondering the same thing. If "visibility: hidden;" works, I think that's a better option.

Thanks for the professional opinion

Sam

I haven't got the mental energy to tackle creating a new site. but i have bookmarked your site for when I do.

THANKS!!

Sam

leftquark

2013-10-15 10:44am: Added "Add a Drop Shadow to Images on Hover"
2013-10-15 11:11am: Added "Customize the Lightbox"

leftquark

2013-10-16 2:22am: Added "Change Submenu Colors"

leftquark

2013-10-17 11:18pm: Added an "Other Customizations" page with 24 new customizations.

This is a compiled list of all the code I plan to add to my customizations site but haven't gotten around to. It provides the basic code but doesn't have any screenshots or additional information. You'll have to figure out how to implement it on your own but the code is there for your pickings. As I have time I'll integrate those bits of code into my main customizations page.

leftquark

2013-10-21 1:58pm: Added Left Indent and Fix Height Spacing of Wrapped Links in Accordion Menu to the "Other Customizations" page.

leftquark

2013-10-23 1:16am: Added "Move Title to Top of Thumbnail" for Folder/Gallery/Page titles, to the "Other Customizations" page.

AceCo55

Thankyou ... thankyou ... thankyou.
It is a fabulous thing you are doing ... very much appreciated.

waltztj

Aaron
Thanks for the quick reply

I am having trouble getting this to work (Drop Shadow around thumbnails) I am using Smugmug layout
I think I have all the code in the correct place. Take a look

leftquark

waltztj wrote: »

I am having trouble getting this to work (Drop Shadow around thumbnails) I am using Smugmug layout
I think I have all the code in the correct place. Take a look

It was a bit trickier in SmugMug Layout:

/* Add a drop-shadow to the thumbnails in SmugMug Layout */
.sm-gallery-tilesnav .sm-tile .sm-tile-content .sm-tile-overlay {
  box-shadow: 7px 7px 5px #888;
}

waltztj

leftquark wrote: »

It was a bit trickier in SmugMug Layout:

/* Add a drop-shadow to the thumbnails in SmugMug Layout */
.sm-gallery-tilesnav .sm-tile .sm-tile-content .sm-tile-overlay {
  box-shadow: 7px 7px 5px #888;
}

Where should I put this code I tried just the Galleries and I tried the whole site CSS and no luck

leftquark

It should go in your theme's advanced CSS section. Click on Customize -> Customize Site -> All Galleries -> "Themes" tab -> Click on the Wrench next to the "Active Theme" -> Click on the "Advanced" tab -> Click "Edit". Paste in there.

I developed the code on your site and tested it so I know it should work.

waltztj

leftquark wrote: »

It should go in your theme's advanced CSS section. Click on Customize -> Customize Site -> All Galleries -> "Themes" tab -> Click on the Wrench next to the "Active Theme" -> Click on the "Advanced" tab -> Click "Edit". Paste in there.

I developed the code on your site and tested it so I know it should work.

Thanks it works
Now I have to get the client log in to work

leftquark

2013-11-01 1:40am: Added "Change the Font Size and Color of the Search Content Block's Title" to the "Other Customizations" Page

picomoments

Hi Aaron, thank you for the amazing work... really appreciate all the tips and tricks provided.

Wondering if you could advise how to always show the nav arrows in ligthbox. I have been having issues with clients reviewing their photos in lightbox mode and the arrows keep disappearing (as per design) but it makes the experience rather horrid when having to keep tapping on the image for the nav arrows to appear.

Could this be done only for mobile devices? If not, globally would be great.

Thanks again.