Frequently Requested Simple Modifications / Tweaks

leftquark · August 6, 2013

As I've been playing around with the New SmugMug, getting my site ready, I've found that I've had to do a couple CSS tricks to make my site look how I want it to. I figured some of these would be useful for others (considering many of them are requested here). You can see a number of them implemented over at http://www.aaronmphotography.com.

Due to maximum character limitations on the dgrin forums I can no longer add customizations to this thread. Instead, I have created a website with all of these CSS customizations and more. Please visit:
http://www.aaronmphotography.com/Customizations.
I will continuously update this new thread as well: http://www.dgrin.com/showthread.php?t=241780

List of Customizations Below:

Remove the Slideshow Button
Fading Links
Add a Line or Border Around Each Item in Your Menu
Add a line under the breadcrumb
Change the Breadcrumb Text Color
Remove the "Buy" Button
Remove the "Powered by SmugMug" footer
Change the Right Click Protection Text
Disable Keywords from Being Shown on Your Galleries
Change the Text Color of a Text Field
Change the width of a Caption and Comments Areas Under a Photo (in SmugMug Layout)
Change Features for Mobile Browsers Only
SmugMug Layout: Add a border around the thumbnails and photo
SmugMug Layout: Add a border around the thumbnails section (large photo does NOT have border)
Add the word "Download" after the download icon
Full Screen Slideshow on Homepage
Emphasize the Current Page in the Nav Bar
Lightbox: Add the word "Close" after the "X"
Add the words "Full Screen" after the double arrow
Make the lightbox caption wider
SmugMug Layout: Add "Click to Enlarge" over the thumbnail images when the mouse hovers
Change the link and link hover color in the Caption of a Photo
Change the Background Color of Buttons on Mouse Hover
Grid Format: Places Wraped Titles on Gallery Thumbnails
Change the "The Question" text in the Contact Form
Make Gallery and Folder Thumbnails Transparent When the Mouse Hovers
Display a Different Navbar Based on What Device is Viewing Your Site (SmartPhone, Tablet, Desktop Monitor)
Change the Title and Caption Font on Your Photos
Change the Social Icons Color on Mouse Hover
Use Additional Google Fonts
Force Captions to Have Line-Breaks
Properly center the image pagination
Change the Font Size/Color of Captions]
Always Show Captions in Lightbox

Changelog: (PT time)

2013-09-11 11:44pm: Added Use Additional Google Fonts
2013-09-12 10:45am: Added Force Captions to Have Line-Breaks
2013-09-12 11:15pm: Properly center the image pagination
2013-10-01 11:55am: Added Changing Font Color/Size of Caption

Add the following to your theme's CSS:

Click on Customize --> Customize Site.
Select "Entire Site" from the menu.
Click on the "Theme" tab.
Click the wrench next to your "Active Tab" to Edit your Theme.
Click on the "Advanced" tab
Click on "Edit" next to "Custom CSS"
Paste in the following code and modify as required

Remove the Slideshow Button:

.sm-gallery-slideshow-button
{
  display: none;
}

Fading Links: (when a user hovers over a link instead of it instantly going to the hover decoration, it will fade in and out to it)

a { 
  -webkit-transition:color 0.2s ease-in;
  -moz-transition:color 0.2s ease-in;
  transition:color 0.2s ease-in;
}

You can change "0.2s" to whatever timing you would like.

Add a Line or Border Around Each Item in Your Menu:

/* Add a line underneath each link in the menu (nav) bar */
.sm-page-widget-nav-toplink, .sm-page-widget-nav-toplink:last-child {
  border-bottom: 1px solid #595959 !important;
  padding: 7px 0px 7px 0px !important;
  width: 90%;
  margin-bottom: 0px !important;
}

Notes:

This code adds a line underneath each menu item. You can change the border-left, right, bottom, etc as you'd like.
The padding command adds 7 pixels on the top and bottom and 0 pixels on the left and right. Feel free to change this to suite your desires. The first number in the padding is the top, the second number is right, the 3rd is bottom, and the 4th is left.

Here's an example:

Add a line under the breadcrumb:

.sm-breadcrumb 
{
  border-bottom: 1px solid #595959;
  padding-bottom: 4px;
}

Change the Breadcrumb Text Color:

.sm-breadcrumb-item, .sm-breadcrumb-item a {
  color: #00fffb!important;
}

Change the #00fffb to whatever color you want.

Remove the "Buy" Button:

.sm-gallery-buymenu 
{
  display: none;
}

Remove the "Powered by SmugMug" footer:

.sm-page-powered-by A:first-child
{
   display: none;
}

Assumes you have turned off the main footer in your customization theme settings and only have the "Photo Sharing by SmugMug" left.
See this thread for more information: http://www.dgrin.com/showpost.php?p=1883651&postcount=17

Change the Right Click Protection Text:

.sm-tooltip-content:after {
content: 'YOUR Message Here';
visibility: visible;
display: inline-block;
position: relative;
background-color: #8a8585;
width: 240px;
height: 75px;
}

.sm-user-ui .sm-tooltip, .sm-user-ui.sm-tooltip {
visibility: hidden;
}

Change the 'YOUR Message Here' line next to "content".

Disable Keywords from Being Shown on Your Galleries:

.sm-tile-keywords 
{
  display: none;
}

Change the width of a Caption and Comments Areas Under a Photo (in SmugMug Layout)

/* Make the caption area wider */
.sm-user-ui .sm-gallery-smugmug .sm-tile-info {
  max-width: 900px !important;
}

/* Make the comments area wider */
.sm-gallery-footer .sm-gallery-comments {
  max-width: 900px !important;
  padding-top: 48px !important;
}

Change Features for Mobile Browsers Only:

/* Hide the search form and social media links for mobile browsers */
@media only screen and (max-width: 640px) {
  .sm-search-form, .sm-page-widget-social-links { display: none; }
}

The above code works for mobile screens with a width of 640 pixels (like the iPhone). Change the max-width to 1536 if you want it to work on iPads too.
The above code hides my search form and social media links. Delete that line of code and replace it with whatever CSS you want.

SmugMug Layout: Add a border around the thumbnails and photo

/* Add 1 pixel border around the thumbnails and photos */
.sm-user-ui .sm-gallery-smugmug .sm-image {
  border: 1px solid #4F4F4F;
  padding: 0px;
}

/* Set the overflow of the images to be visible so the border actually displays properly */
.sm-user-ui .sm-gallery-smugmug .sm-tile-content {
  position: relative;
  display: block;
  overflow: visible;
}

This can be modified for other layouts if you need.

SmugMug Layout: Add a border around the thumbnails section (large photo does NOT have border)

/* Add 1 pixel border around the thumbnails  */
.sm-user-ui .sm-gallery-tilesnav .sm-image {
  border: 1px solid #4F4F4F;
  padding: 0px;
}

/* Set the overflow of the images to be visible so the border actually displays properly */
.sm-user-ui .sm-gallery-smugmug .sm-tile-content {
  position: relative;
  display: block;
  overflow: visible;
}

Add the word "Download" after the download icon

/* Add the word "Download" after the download button */
.sm-button.sm-button-image-download:after {
  content: " Download" !important;
  font-size: 100%;
}

If you feel the font for "Download" is too large, change font-size: 100% to something smaller. I used 95% on my page.

Full Screen Slideshow on Homepage
See the thread here: http://www.dgrin.com/showthread.php?t=238292

Emphasize the Current Page in the Nav Bar

/* Make the menu nav bar text for the active page a different color */
.sm-page-widget-nav-activepage > a {
  color: #E3E3E3!important;
}

/* Make the menu nav bar hover text for the active page a different color */
.sm-page-widget-nav-activepage > a:hover {
  color: #FFFFFF!important;
}

Note: In the above I set the color of the active page to an off-white. Then I set the hover color to white. If you just want to set the active page color to white, then delete the a:hover part.

Lightbox: Add the word "Close" after the "X"

/* 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: #fff !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: red !important; */
  border: 1px solid #fff;
  /* color: #fff; */
  font-size: 14px;
  opacity: 1.0;
}

I wanted to keep my font colors default so I commented out the "color" command. If you'd like to manually set the color just uncomment out the /* color: #fff; */ and set your own color (note: there's 2 places to set this in).

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

Make the lightbox caption wider

/* Make the width of the lightbox caption wider */
.sm-user-ui .sm-lightbox-caption {
  max-width: 1000px !important;
}

/* The lightbox caption area is really wide but the text in it is much
   skinner. The scroll bar was very far away. Bring it in to match 
   the width of the lightbox caption */
.sm-user-ui .sm-lightbox-panel {
  max-width: 1010px !important;
}

SmugMug Layout: Add "Click to Enlarge" over the thumbnail images when the mouse hovers

/* For Desktops and laptops only (do not do on mobile devices)
   Hover Notice on SM Gallery Thumb Image */
@media only screen and (min-width : 1224px) {
  /*Hover Notice on SM Gallery Thumb Image*/
  .sm-user-ui .sm-gallery .sm-tile-photo a:hover:after {
    content: 'Click to Enlarge' !important;
    z-index: 9999 !important;
    position: absolute;
    bottom: 0px;
    left: 0px; 
    font-size:10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.6);
    padding: 3px 5px 3px 5px; /* top right bottom left */
    border:solid 1px #595959;
    overflow: visible;
  }
}

You can also add text over the main image to tell people to open it in lightbox. For that code see this thread: http://www.dgrin.com/showpost.php?p=1904019&postcount=13
Note that I wrapped this in the "@media only ..." for non-mobile devices because the "click to enlarge" was showing up on mobile devices that didn't have a mouse. It was distracting and not necessary for mobile devices. Feel free to remove this if you're having issues.

Change the link and link hover color in the Caption of a Photo

/* Set the caption link color to orange */
.sm-tile-info a {
  color: #f36f21 !important;  
}

/* Set the caption hover color to white*/
.sm-tile-info a:hover {
  color: #FFFFFF !important;
}

Change the Background Color of Buttons on Mouse Hover

/* Set the buttons to transition grey on mouse hover */
.sm-user-ui .sm-button-skin-accent:hover {
  background-color: grey;
  border-color: grey;
}

/* Set the buttons to transition to the hover color slowly. 
    Feel free to remove this if you don't want the slow transition.  */
.sm-user-ui .sm-button-skin-accent {
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15 ease-in;
}

Grid Format: Places Wraped Titles on Gallery Thumbnails

/* Place Titles on Thumbnails in Folders.
   Will wrap the long gallery titles in the grid format. */
.sm-tiles-grid .sm-tile-info p {
  padding-left: 0!important;
  padding-right: 0!important;
  overflow: visible !important;
  white-space:normal !important;
  height: 41px !important;
}

Thanks Allen for the code (see post here)

Change the "The Question" text in the Contact Form

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

/* Hack to hide the The Question */
.sm-form-contents .sm-form-field-overhead:nth-child(4) label {
    color: #[COLOR="blue"]242528[/COLOR];
    padding-left: 182px;
}

Thanks to jwashburn in this thread: http://www.dgrin.com/showthread.php?t=240315
This changes the color of the text "The Question" to the same color as the background and shoves it to the right. Depending on the length of the text you put in you can adjust the padding-left value.

Make Gallery and Folder Thumbnails Transparent When the Mouse Hovers

/* Make the folder images slightly transparent when the mouse hovers over it */
.sm-user-ui .sm-tiles .sm-tile-content:hover {
  opacity: 0.6;
  /* Have the transparency fade in */
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15 ease-in;
}

/* Fade out the transparency. This code can be removed if you do not want it to fade */
.sm-user-ui .sm-tiles .sm-tile-content {
  -webkit-transition: all 0.15s ease-in;
  -moz-transition: all 0.15s ease-in;
  transition: all 0.15 ease-in;
}

Display a Different Navbar Based on What Device is Viewing Your Site (SmartPhone, Tablet, Desktop Monitor)
On my iPhone a mobile-friendly page is automatically loaded by SmugMug. But on the iPad, when held vertically (portrait orientation) my menu bar, thumbnails, and photo (SmugMug Layout) don't fit. Using CSS and a 2nd content block I hide the left (vertical) navbar and show a header (horizontal) navbar.

I have 2 navbars ... one is in the HEADER of the page (a horizontal one) and one is in the LEFT SIDEBAR of the page. They are both enabled in "ENTIRE SITE". My "left sidebar" has a LOGO, a MENU BLOCK, and SOCIAL ICONS. My "header navbar" has a LOGO and a MENU BLOCK.

I then use CSS to determine the screen width and hide one of them. Here's the code:

/* 
   = LARGE DISPLAYS   =
   For small screens and tablets in vertical orientation, 
   show a horizontal menubar in the header. 
   Hide the header for screens that are large enough */
@media only screen and (min-width: 801px) {
  .sm-page-layout-region-header { display: none; }
}

/* 
   = iPads and Small Monitors  =
@media only screen and (min-width: 641px) and (max-width: 800px) {
   /* Hide the left nav bar for screens that aren't large enough */
  .sm-page-layout-region-left { display: none; } 

   /* Move the center of the page to the left edge of the screen since the left
       navbar is no longer there */
  .sm-page-layout-region .sm-page-layout-region-center { margin-left: 0px !important; }
} 

/* 
   = Mobile Phones  =
@media only screen and (max-width: 640px) {
  /* Hide the header from Mobile Phones */
  .sm-page-layout-region-header .sm-page-widget-logo,
  .sm-page-layout-region-top .sm-page-widget-nav { display: none !important; }
}

Change the Title and Caption Font on Your Photos
(Also effects the hover box in Collage gallery layout)

/* Change the title font */
.sm-tile-title {
   color: #FFFFFF !important; /* Set the title color to white */
   font-size: 12px; /* Set the font size */
}

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

Other font attribuets can be added as well.

Change the Social Icons Color on Mouse Hover

.sm-page-widget-social-links a:hover{
   /* Set the color to white */
   color: #FFFFFF !important;
}

Use Additional Google Fonts:
By default SM only allows you to load the 2 Google fonts defined in your theme. If you want additional fonts it blocks them. But there's a work-around listed on this thread: http://www.dgrin.com/showpost.php?p=1909714&postcount=13
Then all you have to do is call out "font-family: WHATEVER" in your CSS and the font you chose will work! This works in early version of IE too!

Force Captions to Have Line-Breaks: (works with mixed HTML/Non-HTML)

/* Force linebreaks to have a break */
.sm-gallery-image-container .sm-tile-info, .sm-lightbox-caption,
.sm-gallery-images .sm-tile-info, .sm-lightbox-caption {
  white-space: pre-wrap;
}

/* Disable all BR tags */
.sm-gallery-image-container .sm-tile-info br, .sm-lightbox-caption br,
.sm-gallery-images .sm-tile-info br, .sm-lightbox-caption br {
  display: none;
}

Properly center the image pagination:

/* Properly center the image pagination */
.sm-user-ui .sm-gallery-smugmug .sm-gallery-image-pagination {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

If you're like me and adding the words "Download", "Info", "Tools", etc after the icons then you will have noticed the image pagination is no longer centered. This fixes that.

Change the Font Size/Color of Captions:
On the galleries:

/* Change Font Size/Color of Caption in Gallery */
.sm-page-layout-region .sm-page-layout-region-center .sm-tile-info {
  color: green !important;
  font-size: 18px;
}

In the lightbox:

/* Change Lightbox Title and Captions*/
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title {
    color: green;
}
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
    color: blue !important;
}

Always Show Captions in Lightbox
See Lamah's customization here: http://www.sherlockphotography.org/Customisations/Lightbox-captions

LouB · August 6, 2013

Arron,

Simply love your site!! Hope you are amble to recreate some the the nice features like the menu hide in New SM.

Thanks for sharing!!!!

bazancik · August 6, 2013

Hi Aaron,

love the look of it - and your step-by step guide. I see many of the elements that I had in my 'legacy' site - which I struggle to get to work and wondered if you could help the masses again with anther step-by step?
In particular how do I get the navbar with logo an my own set of links? And personalise it in a similar way to what you get going on your new site?

Other issues are getting a blog integrated into the links (blogger site).

Final question (maybe somebody else has the answer) is to replace the SM Buy option with Paypal / email order (for folks not in the US who might want just to get some canvas printed by a friendly lab locally...).

Trying to keep some of the elements (navbar etc) from here: www.franeksiedlok.com

leftquark · August 6, 2013

Hi Franek,
A number of your questions are answered just by reading the help pages that SmugMug has already put together. I'll try to give you some links:

bazancik wrote: »

In particular how do I get the navbar with logo an my own set of links? And personalise it in a similar way to what you get going on your new site?

See this article: http://help.smugmug.com/customer/portal/articles/1222523-customization-how-do-i-make-a-navigation-menu-

Basically you login -- select to customize your site, choose "Entire Site", and then drag the "Menu" widgit onto your header. Using the options of the "Menu" widgit you can add your links. You'll have to use some of the CSS to get your hover links to act differently (have the line over the text).

bazancik wrote: »

Other issues are getting a blog integrated into the links (blogger site).

See this article: http://help.smugmug.com/customer/portal/articles/1239442-customization-what-does-the-feeds-content-block-do-

Again, login, but go to "Organize". Select create, and create a page. Call it "blog". Now click to Customize and select to customize this page. Drag the "feed" widgit onto the content (body) of the page. Paste in the RSS feed URL to your blog. Set other settings. Wallah!

bazancik wrote: »

Final question (maybe somebody else has the answer) is to replace the SM Buy option with Paypal / email order (for folks not in the US who might want just to get some canvas printed by a friendly lab locally...).

Trying to keep some of the elements (navbar etc) from here: www.franeksiedlok.com

That one is beyond me. Sorry. You start with hiding the Buy Button as I linked above. See some of the other posts about embedding iframes. That might work for ya.

RKnecht · August 7, 2013

Some awesome tips here Aaron. How did you get your SS to go fullscreen?

leftquark · August 7, 2013

RKnecht wrote: »

How did you get your SS to go fullscreen?

Unfortunately I'm still using the heritage SmugMug. Until I can get a fullscreen slideshwow on the homepage I haven't unveiled my site. I've got everything else pretty much all set and ready to go though.

It looks like SmugMug has given the "Customizers" (guys like FastLine Media) access to JavaScript, but haven't turned it on for anyone else yet. They can show off their customizations for us to see, but they can't even implement them for us. I imagine that SM is working their butts off right now trying to clean up and add some features after the launch, and something like this might be one of them. We'll have to sit tight and be patient. For now I'm still really happy with my heritage site so no real complaints from me

leftquark · August 9, 2013

2013-08-08 10:57pm PT: Added tweaks to expand caption and comments areas under photo in SmugMug View

WinkXR6T · August 9, 2013

Edit: Got it working

wdbrnb · August 9, 2013

Thanks so much for the list of tips, I found what I needed....and it worked. YEAH

Jseelow · August 9, 2013

Very great tips and tricks thanks! Is there anyway to get the Add a Line or Border Around Each Item in Your Menu to look like smugs separator bar? Here is an example http://www.mb-photography-sf.com/

leftquark · August 11, 2013

Jseelow wrote: »

Very great tips and tricks thanks! Is there anyway to get the Add a Line or Border Around Each Item in Your Menu to look like smugs separator bar? Here is an example http://www.mb-photography-sf.com/

Hi Jseelow: The css to do that has been listed on here since the beginning. That was actually the first bit of CSS I added to my site!

Add a Line or Border Around Each Item in Your Menu:

.sm-page-widget-nav-toplink 
{
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  border-bottom: 1px solid #595959;
  padding: 7px 0 7px 0;
}

leftquark · August 11, 2013

2013-08-10 11:55pm: Added code to modify certain features for mobile browsers only

bazancik · August 11, 2013

Thanks Aaron for all the tips and pointer - great thread!

still having quite a lot of trouble with the navbar: how do you add the collapse / expand option? This looks neat but cannot work it out

For some reason still cannot get the logo and links appear as one item (2 separate containers and for some reason the width setting keeps changing for no reason - making them either overlap or get too).

cheers!

Jseelow · August 11, 2013

Tried that didn't look like the smug boaderss realized now just had to change the color. The color that looks like the smug boarders is #1b1c1b might not be perfect match but works for me. Thanks again.

leftquark wrote: »
Hi Jseelow: The css to do that has been listed on here since the beginning. That was actually the first bit of CSS I added to my site!

Add a Line or Border Around Each Item in Your Menu:
.sm-page-widget-nav-toplink 
{
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  border-bottom: 1px solid #595959;
  padding: 7px 0 7px 0;
}

RichmondImage · August 12, 2013

Hey Aaron, thanks for all your advice. Quick question though, I am having a bit of difficulty getting my links to do the fade in and out. I added the CSS site-wide and that didn't work, then I added it to the entire site via CSS content block. That seems to have effected the links in the customizer when that is open, but not my actual site links.
richmondimage.net

W.W. Webster · August 14, 2013

Thanks for all this good stuff Aaron! I've implemented the lines under the top level menu items successfully, but how did you narrow the bands for each item?

Thanks again!

Vanlippe · August 17, 2013

The tip for changing the width of the caption text for SmugMug layout is something I've wanted since day one of the new layout. I almost didn't even update to the new look because I put a lot text under some of my photos and the offset to the left really looked wrong. Can't thank you enough for that one tip alone. But there are several others from this thread which I also adapted.

thanks!
_______________
Richard Vanderlippe
www.rvanderlippe.com

bazancik · August 19, 2013

Hi,

did you work the code out? trying to get this myself - so far just created a lot of mess!

LouB wrote: »

Arron,

Simply love your site!! Hope you are amble to recreate some the the nice features like the menu hide in New SM.

Thanks for sharing!!!!

leftquark · August 21, 2013

bazancik wrote: »

still having quite a lot of trouble with the navbar: how do you add the collapse / expand option? This looks neat but cannot work it out

Unfortunately my live site is still my legacy site. It used some JavaScript to do the collapse/expand on the navbar. Can't do it in the new SmugMug at this time

leftquark · August 21, 2013

RichmondImage wrote: »

Hey Aaron, thanks for all your advice. Quick question though, I am having a bit of difficulty getting my links to do the fade in and out. I added the CSS site-wide and that didn't work, then I added it to the entire site via CSS content block. That seems to have effected the links in the customizer when that is open, but not my actual site links.
richmondimage.net

Are you still having trouble? I can't see your CSS code in the new smugmug (or at least haven't figured out how) and I see that it's not working on the version you have up right now. Make sure there's a hover color that's different than the link color. What browser are you using?

leftquark · August 21, 2013

W.W. Webster wrote: »

Thanks for all this good stuff Aaron! I've implemented the lines under the top level menu items successfully, but how did you narrow the bands for each item?

Thanks again!

Narrowing the bands for each item doesn't require CSS, luckily! That's a setting in the smugmug dimensions. In your customizer on your menu click the ruler icon to bring up the dimensions, margins, etc. I think I set my width to 90%

bazancik · August 21, 2013

leftquark wrote: »

Unfortunately my live site is still my legacy site. It used some JavaScript to do the collapse/expand on the navbar. Can't do it in the new SmugMug at this time

so the bottom line is that only 'static' navbar can be done n the new SM? do you know if in the future ths might work?
do you have a screenshot of what the new SM looks like (looking at the legacy is obviously not the same to get a feel for the final look!)

also - on the legacy your navbar & menu are one block (or so FireFox inspector thinks!) -- I'm having problems to get a logo and the links in the navbar work in vertical layout as one unit in the new layout (as two separate boxes they constantly move, misalign, change to sit next to each other etc) - is there a way around it (html code?). so far only managed to get it working fine in horizontal layout (still as two boxes and some playing with the % size)

cheers,

leftquark · August 21, 2013

bazancik wrote: »

so the bottom line is that only 'static' navbar can be done n the new SM? do you know if in the future ths might work?

For now SmugMug is not allowing users to add their own JavaScript, which means this feature is not possible. However, I have heard that the "Advanced Customizers" like FastLine Media will be able to do it. They did my original Legacy website and are great and wonderful to deal with. As of now, though, they also don't have access to do JavaScript for us. We have to sit tight for now

bazancik wrote: »

do you have a screenshot of what the new SM looks like (looking at the legacy is obviously not the same to get a feel for the final look!)

Yes, here's 2 screenshots:

bazancik wrote: »

also - on the legacy your navbar & menu are one block (or so FireFox inspector thinks!) -- I'm having problems to get a logo and the links in the navbar work in vertical layout as one unit in the new layout (as two separate boxes they constantly move, misalign, change to sit next to each other etc) - is there a way around it (html code?). so far only managed to get it working fine in horizontal layout (still as two boxes and some playing with the % size)

As you can see in the screenshots above, I have this working fine. Make sure you have the width of your image set appropriately so it fits within the navbar. Also make sure that the margins are identical and the width's set accordingly. The rest is done with the CSS I listed above.

Here are the screenshots of my logo content block and menu content block, dimensions:

Let me know if you have any specific questions and I'll do my best.

rkw624 · August 21, 2013

Hello Aaron,

I cannot get the "No Right Click message to work. I place the code into the Entire Site/Theme Tab per instructions. When I preview the "No Right Click" ceases to work. No message shows up at all and right click quits working completely on the site. When I remove the code SmugMugs No Right Click message appears and works again. ??? Any help would be appreciated. Thank you. My site: www.fourmilephotography.com

Edit! - Figured it out!

leftquark · August 21, 2013

rkw624 wrote: »

Hello Aaron,

I cannot get the "No Right Click message to work. I place the code into the Entire Site/Theme Tab per instructions. When I preview the "No Right Click" ceases to work. No message shows up at all and right click quits working completely on the site. When I remove the code SmugMugs No Right Click message appears and works again. ??? Any help would be appreciated. Thank you. My site: www.fourmilephotography.com

Edit! - Figured it out!

Glad you got it to work! Your site looks great. I see you got it working on your photos for sale. Great job!

leftquark · August 21, 2013

2013-08-21 12:30pm PT: Added code to add a border around thumbnails/photo in SmugMug Layout. Added code for adding "Download" text next to Download icon.

rkw624 · August 21, 2013

leftquark wrote: »

Glad you got it to work! Your site looks great. I see you got it working on your photos for sale. Great job!

.....and thank you again!

bazancik · August 21, 2013

Thanks for the info - should be able to get it all sorted.
will play with it over the next few days and see what I end up with. Think the problem was that my logo was larger (in pixels) than the navbar. maybe a time for a new logo / layout anyway!

leftquark wrote: »

For now SmugMug is not allowing users to add their own JavaScript, which means this feature is not possible. However, I have heard that the "Advanced Customizers" like FastLine Media will be able to do it. They did my original Legacy website and are great and wonderful to deal with. As of now, though, they also don't have access to do JavaScript for us. We have to sit tight for now

einat · August 21, 2013

[QUOTE=leftquark; Added code to add a border around thumbnails/photo in SmugMug Layout. [/QUOTE]

Thanks, I really missed this from old SM.
Is there a way to have the boarder only around the thumbnails, not the enlarged photo?

Hikin' Mike · August 21, 2013

einat wrote: »

Thanks, I really missed this from old SM.
Is there a way to have the boarder only around the thumbnails, not the enlarged photo?

Try this:

.sm-gallery-thumbnail .sm-tile {
    border: 1px solid #000;
    }

Change the size and color to suit.

einat · August 21, 2013

Hikin' Mike wrote: »
Try this:
.sm-gallery-thumbnail .sm-tile {
    border: 1px solid #000;
    }
Change the size and color to suit.

Thanks, this was quick (-:

Was I supposed to use this instead of leftquark's original code or as an addition?
When I added it - nothing changed.
When I used only this - then the boarder for both thumbnails and photo were gone