Frequently Requested Simple Modifications / Tweaks

Allen

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

charlesdaly

help with minor issues please
I lost my site due to incompatibility with CSS3 and I'm starting over with a new design. I have most of it back but the navs came with the new design. I was able to custom the text logo. But they are on different lines (containers?) and I can not find how to move them to the same and format the font for the navs.

My custom NoRightClicki no longer works and every where I place it is the wrong place.
Please.
Thanks!

charlesdaly

Regarding captions. The captions on my galleries page are white and very readable but on the home page they are greyish. I tried in themes and change to white and lost my logo (for a few seconds until I quickly changed that brilliant move) I don't mind trial and error but there are so many cliffs...

RKnecht

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.

Allen, that's awesome. I was trying to figure that out as well I'll have to give it a try after this weekend's event. If it works on my galleries, I'll be a happy camper.

pmbpro

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

This worked perfectly with my site (I'd used the Moss theme). THANK YOU, Allen!

MelGattis

Good Morning.
Thank you so much for sharing your codes as I've already used a few to improve my site. I'm hoping you may be able to help me get my mail chimp set up on my homepage for email signup. I was given the code below from the site but I have not been able to get it to work. Maybe you can let me know what's wrong or if I can even get this working on Smugmug. I searched and couldn't find anything helpful. Thanks in advance.

Mel





#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

Subscribe to our mailing list

* indicates required

Email Address *

Name *

Email Format

• html
• text
• mobile

thenickdude

The issues you're running into are that SmugMug doesn't support JavaScript code (the <script> tag), HTML comments, or stylesheets loaded from external domains (the <link> tag). That stuff is easily worked around because the <script> is only used to validate entered data. However, even after you strip that all out, you've still got a problem. The code uses this to allow the user to enter their email address:

<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">

When that code is entered into SmugMug, the name of the email field gets changed to lowercase!

<input type="email" value="" name="email" class="required email" id="mce-EMAIL">

This causes MailChimp to not be able to read the email address that is entered. SmugMug doesn't make the same breaking change to the NAME or EMAILTYPE fields. To me it looks like SmugMug is intentionally trying to break the entering of email addresses into MailChimp forms, because I can't think of a legitimate reason to modify things like that.

(It may be a feature of their HTML validator that they just weren't aware of, or it may be designed to protect a particular SmugMug backend which accepts a parameter called precisely 'EMAIL', you'll have to ask the support team about this one line of code to find out.)

MelGattis

Thank you so much for your reply and advice. It is greatly appreciated and I'll follow up with support.

Lamah wrote: »

The issues you're running into are that SmugMug doesn't support JavaScript code (the <script> tag), HTML comments, or stylesheets loaded from external domains (the <link> tag). That stuff is easily worked around because the <script> is only used to validate entered data. However, even after you strip that all out, you've still got a problem. The code uses this to allow the user to enter their email address:

<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">

When that code is entered into SmugMug, the name of the email field gets changed to lowercase!

<input type="email" value="" name="email" class="required email" id="mce-EMAIL">

This causes MailChimp to not be able to read the email address that is entered. SmugMug doesn't make the same breaking change to the NAME or EMAILTYPE fields. To me it looks like SmugMug is intentionally trying to break the entering of email addresses into MailChimp forms, because I can't think of a legitimate reason to modify things like that.

(It may be a feature of their HTML validator that they just weren't aware of, or it may be designed to protect a particular SmugMug backend which accepts a parameter called precisely 'EMAIL', you'll have to ask the support team about this one line of code to find out.)

Motorider

Thanks Allen!!! I had a version of that caption text code on my homepage but I still had it on my to-do list for my galleries. Here's the version of your code I used for my Collage Landscape galleries. Because I don't completely understand all this CSS magic stuff yet, I took out everything in it that didn't seem to make a difference or break anything.

/* caption text on gallery thumbs */
.sm-tile-caption  {
  color: gold;
  overflow: visible;
  white-space:normal !important;
  height: auto !important;
}

Now, if I could just figure out how to make the captions stay visible regardless of hover over these thumbs I'd be thrilled.

Cheers

Allen

Motorider wrote: »

...Now, if I could just figure out how to make the captions stay visible regardless of hover over these thumbs I'd be thrilled.

Cheers

The folder grid layout I'm using has that toggle in the 2nd tab.
"on hover" hide

Motorider

Allen wrote: »

The folder grid layout I'm using has that toggle in the 2nd tab.
"on hover" hide

I see that setting for Folders & Pages, but not Galleries. That block in my All Galleries says "Area reserved for default SmugMug content" and is locked.

Allen

Motorider wrote: »

I see that setting for Folders & Pages, but not Galleries. That block in my All Galleries says "Area reserved for default SmugMug content" and is locked.

I added a galleries box and this works on it. Might have to add more specifiers as I don't know what
else it will affect. I have some big gallery descriptions so added a rule so those would not show.
Might add this to "just this page" first to see how it looks. Then higher to cover more pages.
Not sure if .sm-tile-album is high enough to only affect this type of box. I did not look at removing
the icon, kinda unless as they are all galleries.

     /* titles on thumbs in folders */
  .sm-tile-album .sm-tile-info p {
  font-size: 95%!important;
  padding-left: 0!important;
  padding-right: 0!important;
  color: gold!important;
  text-align:center;
  overflow: visible !important;
  white-space:normal !important;
  height: auto!important;
}

 .sm-tile-album .sm-tile-info .sm-tile-caption {display:none;}

BTW, the box did have a 2nd tab to set hover.

Sir_Eagle

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

Any idea how to get rid of the grey background on the description?

charlesdaly

issues with nav alignment, captions colors
*Fixed the nav hover problem listed below- thanks

I hope I'm not asking for too much help in one post. If I am please let me know asap and I will edit this down into multiples. Any/all help is gratefully requested.

I'm having a problem with my nav bar being on a different line and different font than my logo and don't know how to fix that.

On thumbnails the caption only shows on hover. I want no hover but would just like the captions to be there all the time. The captions are also less readable than on the gallery page so I went into organize and manually changed all captions to titles but that had no affect on the thumbs in the galleries. I did that only on the first gallery, 'slideshow images' as a test.

In galleries slide show there is no way out except the browser back button. This is the code I thought controlled the 'X':
I just removed that and there is still no X, or way out

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

Thanks for all help

pat.kane

Charles, to fix the navbar problem, adjust the width of your logo to something less than 100% then drag your navbar just to the right of the logo. You should see the "highlight" when it is placed in the correct spot. It took me a little while to figure that out myself. Good luck.

charlesdaly

pat.kane wrote: »

Charles, to fix the navbar problem, adjust the width of your logo to something less than 100% then drag your navbar just to the right of the logo. You should see the "highlight" when it is placed in the correct spot. It took me a little while to figure that out myself. Good luck.

Thanks Pat. I moved around the container widths but the prob is those two containers are separate and only the contents get shifted by changing widths/margins. Just now I adjusted their placement and stacked them in the center. That's something I could play with but I'm still not accessing the font manager so the fonts are not the same.
Thanks!

raebrown

Any way to add an apostrophe to the right click message and have it take? As soon as I add one it reverts to the generic message.

charlesdaly

raebrown wrote: »

Any way to add an apostrophe to the right click message and have it take? As soon as I add one it reverts to the generic message.

Rae, I can't even spell apostrophe but I do know that your photos are excellent. But you really must get out and about more.

Sir_Eagle

Copy and paste this symbol instead. ʹ I used the windows character map to get it. It is a "Modifier Letter Prime", whatever that symbol is for, but looks like an apostrophe to me. And it works.

raebrown

charlesdaly wrote: »

Rae, I can't even spell apostrophe but I do know that your photos are excellent. But you really must get out and about more.

Thanks Charles. I do get out just as often as my wife will let me. This weekend my assignment is to paint the en-suite. Of course I can play with the website while waiting for the paint to dry.

raebrown

Sir_Eagle wrote: »

Copy and paste this symbol instead. ʹ I used the windows character map to get it. It is a "Modifier Letter Prime", whatever that symbol is for, but looks like an apostrophe to me. And it works.

Worked like a charm...thanks!

thenickdude

raebrown wrote: »

Any way to add an apostrophe to the right click message and have it take? As soon as I add one it reverts to the generic message.

You can add a backslash in front of the apostrophe so that it doesn't end up prematurely ending the string it's contained in:

content: 'CSS\'s great!';

Alternatively, enclose the string in double-quotes instead of single-quotes:

content: "CSS's great!";

brandofamily

Added this code to effect the active page on nav, but it does not work on the "IMAGE GALERIES" tab. Any ideas?

/*Active Page Color*/
.sm-page-widget-nav-activepage > a {
  color: orange!important;
}

http://www.brandolinoimaging.com/Image-Galleries

Click around and see... it works on all top and inner levels except that one.

Motorider

I added a galleries box and this works on it

Allen, perhaps you've added a Gallery block to your page that you can edit. But I cannot edit the block on my 'All Galleries' page therefore I can't see that second tab to turn off the hover.

Anyone know the CSS to make captions permanently visible without hovering?

raebrown

Lamah wrote: »

You can add a backslash in front of the apostrophe so that it doesn't end up prematurely ending the string it's contained in:

content: 'CSS\'s great!';

Alternatively, enclose the string in double-quotes instead of single-quotes:

content: "CSS's great!";

I knew about the backslash but, for some reason, it wasn't working this time. Didn't know about the double-quotes solution. Thanks for providing your other modifications - have used one and may eventually add more. We parked ourselves in Auckland for 2 weeks in 2010 and loved it. Looking forward to seeing more of NZ this February. Cheers!

brandofamily

brandofamily wrote: »

Added this code to effect the active page on nav, but it does not work on the "IMAGE GALERIES" tab. Any ideas?

/*Active Page Color*/
.sm-page-widget-nav-activepage > a {
  color: orange!important;
}

http://www.brandolinoimaging.com/Image-Galleries

Click around and see... it works on all top and inner levels except that one.

Got it... the code does not like the custom URL's

leftquark

2013-09-03 1:24pm PT: Added Change the Background Color of Buttons on Mouse Hover
2013-09-03 1:32pm PT: Grid Format: Places Wraped Titles on Gallery Thumbnails (thanks to Allen)

leftquark

2013-09-04 2:09pm PT: Added Change the "The Question" text in the Contact Form (thanks to jwashburn)

charlesdaly

Titles color/captions size
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.

W.W. Webster

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