Frequently Requested Simple Modifications / Tweaks

Hikin' Mike

einat wrote: »

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

I didn't look at his code. I use this on my thumbnail gallery.

einat

Hikin' Mike wrote: »

I didn't look at his code. I use this on my thumbnail gallery.

Mine are smugmug style, that's why it didn't work.
But never mind, I'll leave it for now.

Thanks, though.

einat

BTW, Mike, your B&Ws from Yosemite are stunning!

Hikin' Mike

I kind of figured you were using a different gallery format when it didn't work.

Thanks for the compliment!

rammarcelo

Hi Aaron,

I really like your site! I would like to ask about your slideshow on the homepage, how can I do it? And what design did you use?

leftquark

einat wrote: »

Is there a way to have the border only around the thumbnails, not the enlarged photo?

Einat, yes, there is. Replace the first half of the original code I had with the following:

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

You still need the second half of the original code.

The images in the thumbnail and the enlarged photo both have the class "sm-image" associated with them. However, the area where the thumbnails are is called "sm-gallery-tilesnav". By replacing the ".sm-gallery-smugmug" in my original code with the "sm-gallery-tilesnav" you restrict the border only to the thumbnails area.

I added the full code up at the top in case you need the full thing.

leftquark

Update 2013-08-13 11:19pm PT: Added code for border around thumbnails in SmugMug Layout, but no border around the large image

leftquark

rammarcelo wrote: »

I really like your site! I would like to ask about your slideshow on the homepage, how can I do it? And what design did you use?

Unfortunately rammarcelo my live site (as of August 21, 2013) is still my Legacy SmugMug site. There is no way to do the fullscreen slideshow on the homepage as of now in the New SmugMug. Once this feature is added I will go live. Until then you're looking at my old design.

For my New SmugMug I started with a copy of "Arrow" and customized it from there. The screenshots you see above are my modifications from that theme.

Cindy

I modified the code slightly wanting a border, radius & drop shadow… while in firefox webdev all shows… but when I actually put the code into the theme then the shadow disappears in safari… ??? It shows in firefox though. Do I need a different code to add the shadow & make it stick for various browsers?
Here's the code:

/************* START SMUGMUG GALLERY SYTLE THUMBS AND PHOTO ***********/
/* Add 1 pixel border around the thumbnails and photos */
.sm-user-ui .sm-gallery-smugmug .sm-image {
  border: 1px solid #583B1E;
  padding: .2px;
  border-radius:4px;
  box-shadow: 8px 8px 14px -6px rgba(0,0,0.8,0.8);
}

/* 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;
}
/************* END SMUGMUG GALLERY SYTLE THUMBS AND PHOTOS ***********/

Allen

Cindy wrote: »

...put the code into the theme ...

Why not put it "all galleries" CSS?

Cindy

Hmmm… Will it work there better? I've been putting any & all CSS that can be placed in the theme there so that if I need to change at a later date it would at least have most of it in one place for easier copying over. Having to place bits & pieces here & there is truly imho not a + for the changeover :-(

einat

leftquark wrote: »

Einat, yes, there is. Replace the first half of the original code I had with the following:

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

You still need the second half of the original code.

The images in the thumbnail and the enlarged photo both have the class "sm-image" associated with them. However, the area where the thumbnails are is called "sm-gallery-tilesnav". By replacing the ".sm-gallery-smugmug" in my original code with the "sm-gallery-tilesnav" you restrict the border only to the thumbnails area.

I added the full code up at the top in case you need the full thing.

You are great. I also really appreciate the explanation.
And I also love you FWx photos. I shoot them too, I even used to have a license to launch them.

W.W. Webster

leftquark wrote: »

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%

I don't think I was clear. I am wishing to narrow the vertical depth of each of bars that contains a top level menu item, not the width of the vertical menu! I've also lost the line under the last of my menu items.

Can you kindly help me with these issues?

leftquark

W.W. Webster wrote: »

I don't think I was clear. I am wishing to narrow the vertical depth of each of bars that contains a top level menu item, not the width of the vertical menu! I've also lost the line under the last of my menu items.

Can you kindly help me with these issues?

Webster, do you have an example you can show me? When I looked at your page I don't see any borders. Are you just trying to make the vertical height of each smaller (with no border). If so, in my code I have the padding set to 7 pixels above and 7 pixels below. Change that to a smaller number and the vertical distance should shrink.

leftquark

2013-08-24 1:32 AM PT: Added Full Screen Slideshow on Homepage.
2013-08-24 1:32 AM PT: Added Emphasize the Current Page in the Nav Bar

leftquark

2013-08-24 1:51 AM PT: Added the word "Close" after the "X" in Lightbox

Motorider

Thank You!
Aaron, I'm still learning the basics of all this stuff & I really appreciate you posting this helpful information. I've incorporated a couple of your nifty magic CSS stuff into my site & I love it.

I'm still building & adding content to my new non-photo website (but after seeing all your incredible shots, I'm seriously considering upgrading my camera).

I'm struggling a bit with a graphic I placed in the footer of my 'entire site'. When I added your code that adds a border around 3 static pictures I have on this page, I end up getting a border around the footer graphic also. It's happening because I added this graphic as a 'photo' type block to the footer of my 'entire site' so your code is affecting it also.

I'd certainly be willing to post this question in the customization forum if you're not sure (or don't have time), but on the off-hand chance you do know, I thought I'd ask.

Here goes. I want my footer graphic to be right-justified but can't figure out how to do it. If I add the graphic as a second 'logo' to my entire site & try to adjust it's location with CSS I end up also moving my primary logo (where yours is). So I originally thought if I added it as a 'photo' rather than a 'logo' I might have better luck, but now I'm getting the border. Do ya catch my drift?

Cheers & thanks again!

Motorider

I'm still not sure how, but it looks like I may have figure this out myself. Have a look at my site if you like. Here's the code I used:

/* change position of logo in footer */
.sm-user-ui
.sm-page-layout-region-bottom
{
float: right;
}

/* change position of 'Photo Sharing by SmugMug' text */
.sm-page-powered-by
a:first-child{
position: absolute; top: 200px; left: 0;
}

/* change position of 'Login' text */
.sm-muted
{
position: absolute; top: 200px; left: 200;
}

leftquark

Motorider wrote: »

I'd certainly be willing to post this question in the customization forum if you're

Just wanted to give you a quick response now ... I'm running out for the day to do some errands but I'll take a look when I get back.

leftquark

bazancik wrote: »

Hi Aaron,

looks like managed to sort some of the navbar problems - and it was all looking good... but did something and not sure what...

Any help with any of the above would be greatly appreciated stuck and not sure like the new interface at all!

Just wanted to give you a quick response now ... I'm heading out to run some errands but I'll take a look when I get back.

I did want to quickly mention that whatever dgrin did to your attachment, it's unfortunately super teeny and hard to see anything. Any chance you have a link to a bigger version of your screenshot mashup?

leftquark

bazancik wrote: »

I put some screenshots here:

http://www.franeksiedlok.com/Private/private/Ebays

Still can't see the screenshots The "Ebays" folder isn't listed and I just see 2 galleries (motorcycles and one other)

leftquark

bazancik wrote: »

1. ... but only one gallery ( PORTFOLIO) is currently showing OK. The rest of links (folders / galleries) are not displaying at al (see the attached screenshot mashup below) -- can't figure this one out!

You prob. need to look at your gallery settings. Also know that there's a slight difference between "preview" and done. I think Preview shows you slightly what your users would see, where as when you click done/publish it shows you what you'd see. There's a number of threads on here about folders / galleries not showing up properly; have you looked at any of those?

bazancik wrote: »

2. Add to Navbar --> on hover #8cca1

Try this:

.sm-page-widget-nav-toplink a:hover {
   color: #8cca1!important;
}

bazancik wrote: »

3. Change text colour of the secondary (footnote) navbar to white / #8cca1e on hover (Put two separate navbars - should use footnote to make it work?)

I'd have to see you implement this for me to get a better handle. Right now I don't see a secondary navbar on your page. What browser do you use? If you use Chrome, you can right click on an area and do "Inspect Element". It'll start to show you the code and if you click on code, it'll start showing you what area of the webpage it's for. You can drill down until you get to the footnote area. When you find the name of the footnote area you can do the code I typed above for the hover ... except add ".WHATEVER_FOOTNOTE_NAME_IS " before ".sm-page-widget-nav-toplink ...". That should do the trick. To change its color to white instead of doing "a:hover" just do "a".

bazancik wrote: »

4. CAPITILIZE sub-links in main navigation

This is done easily through the customizer. In your menu block click the settings. You'll see an option for secondary links. Just set it to Capitalize.

bazancik wrote: »

5. BLOG: Blogspot feed: currently all text in red L and feed is narrow and left aligned

a. Stretch the text to fit the window – or at least menu bar!
b. Change text colour to white + Heading in #8cca1e
c. Is there a way to have a snippets divided with a line that expands (as here: http://franeksiedlok.blogspot.co.nz/)? Or add a simple navigation of posts?

Did you get this figured out or do you still want help with this?

leftquark

Motorider wrote: »

I'm still not sure how, but it looks like I may have figure this out myself. Have a look at my site if you like. Here's the code I used:

Looks like you got it! Let me know if you have any other questions!

leftquark

bazancik wrote: »

main questions are:
- how to clean up the directory of categories / subcategories (still visible through Legacy)
- fix folders and galleries not showing up
- fix top navbar:
- change colour on hover
- capitilise and align sub-galleries
- fix disappearing and slowly loading navbars when moving to another gallery
- fix bottom navbar - change to white + different colour on hover
- fix blog / feed: different font colours for title / text; snippet of post instead of whole post + navigation

Cheers again - back to deleting (and already fearing all the hours of uploading...)

See above for hover color and capital/sub-galleries.
This whole time I thought your live site was the new smugmug. Just realized it's legacy.

Without being live it's hard for me to give you tips but here's what I can offer

Blog text color:

.sm-feed-item-title { color: white!important; }
.sm-feed-item-description { color: white!important;

To fix the snippet/vs entire post I think you have to go into the RSS settings on your blog. Mine is set only to show a snippet. SmugMug only shows what the RSS feed gives, so it's not a smugmug issue. Try looking in your blog settings

See my suggestion above about bottom navbar colors.

Sir_Eagle

You can also add "Full Screen" after the double arrow icon using this code, similar to "Close" after the X.

.sm-user-ui .sm-lightbox-tools .sm-lightbox-close:after {
  content: ' Close';
  font-size: 18px;
}
.sm-user-ui .sm-lightbox-tools .sm-lightbox-expand:after {
  content: ' Full Screen';
  font-size: 18px;
}

Gobo Fongo

Hi, I'm trying to change the color of the breadcrumb on my site, and having no luck with:

/*change breadcrumb color*/
.sm-user-ui .sm-breadcrumb-item{
color:#00fffb !important;
}

Only the arrow changes, what should I do different? I understand css to some degree but I'm not understanding why this won't work.

Allen

Gobo Fongo wrote: »

Hi, I'm trying to change the color of the breadcrumb on my site, and having no luck with:

/*change breadcrumb color*/
.sm-user-ui .sm-breadcrumb-item{
color:#00fffb !important;
}

Only the arrow changes, what should I do different? I understand css to some degree but I'm not understanding why this won't work.

H1 is the gallery name.

[COLOR=Red].sm-user-ui .sm-breadcrumb-item h1,[/COLOR]
.sm-user-ui .sm-breadcrumb-item [COLOR="Red"]a[/COLOR] {
color:#00fffb !important;
}

Gobo Fongo

Thanks for the quick reply!

leftquark

Gobo Fongo wrote: »

Hi, I'm trying to change the color of the breadcrumb on my site, and having no luck with:

/*change breadcrumb color*/
.sm-user-ui .sm-breadcrumb-item{
color:#00fffb !important;
}

Only the arrow changes, what should I do different? I understand css to some degree but I'm not understanding why this won't work.

I see you may have already gotten it to work, but this worked for me:

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

leftquark

2013-08-25 10:28 PM PT: Added the word "Full Screen" after the double arrow
2013-08-25 10:35 PM PT: Added Changing the Breadcrumb text color
2013-08-25 11:02pm PT: Change the width of the lightbox caption