Comments/Share links overlapping in Lightbox, Customize Buy Button and Homepage folders vs galleries

DigiScapes · February 27, 2018

Hi, I hope I'm not cramming too much into one thread but here goes..
I've got a few questions, some of which may have been answered before but I was unable to track them down.

1) How do I fix the links at the bottom of the lightbox? See screenshot

2) I had customized the Buy button years back and cannot for the life of me remember what i did. The default buttons are hideous and quite large See next Photo

3) I've got the menu set up so that some of them go straight to the galleries and some go to folders containing multiple galleries. Is there a way to replicate this with the folders I've got set up on my homepage? (See photo)

4) Finally is there a way to show the URL as secure when redirecting to smugmug? I'd like anyone visiting my site to know it's secure, and as it is now it will only shows as secure while using checkout.

Any and all help is greatly appreciated.

Regards,
Brian
www.digi-scapes.com

Hikin' Mike · February 27, 2018

1) Add this:

.sm-user-ui .sm-button-size-small.sm-button-square{
    width: auto;
    }

2) I don't think they're hideous nor two big. But, this is the code the controls the height and width (padding: 0 24px;). Adjust to suit.

.sm-user-ui .sm-button-size-large {
    height: 48px;
    }

.sm-user-ui .sm-button {
    padding: 0 24px;
    }

3) Don't understand your question.

4) SmugMug is in the process of switching over from http to https as we speak. They are going to let us know when it's finished. You can start using https right now if you type in your site: https://www.digi-scapes.com/.

denisegoldberg · February 27, 2018

@DigiScapes said:
3) I've got the menu set up so that some of them go straight to the galleries and some go to folders containing multiple galleries. Is there a way to replicate this with the folders I've got set up on my homepage? (See photo)

How did you set up your homepage? If you want some entries to go to a gallery and others to go to a folder, consider using a Folders, Galleries & Pages content block.

DigiScapes · February 27, 2018

Denise, right now my homepage is set up as folders. If I’m understanding you correctly you’re saying to use multiple content blocks? Or is there a way to have all three (folders, galleries & pages) in one content block?

DigiScapes · February 27, 2018

Thank Mike, I’ll try those fixes!

denisegoldberg · February 27, 2018

@DigiScapes said:
Denise, right now my homepage is set up as folders. If I’m understanding you correctly you’re saying to use multiple content blocks? Or is there a way to have all three (folders, galleries & pages) in one content block?

You can have all three in one content block. Instead of using a folders content block, use a folders, galleries, and pages content block.

From the help page Using the "Folders, Galleries & Pages" content block:

The "Folders, Galleries & Pages" content block allows you to display all three hierarchy containers within one content block on a page. It's the perfect way to show your viewers where they can go next on your website.

DigiScapes · February 28, 2018

@Hikin' Mike said:
1) Add this:

.sm-user-ui .sm-button-size-small.sm-button-square{
  width: auto;
  }

Mike I tried this but it doesn't seem to be working. Maybe I'm putting the code in the wrong spot? I'm adding it to the CSS on "All gallieries" Below is all the code I've currently got in my CSS for all galleries. Note, I have no idea if all this is even needed anymore, I haven't modified my site in several years and have forgot how to do everything. I do know that the right click message in the CSS does not work and I plan to remove it

.sm-page-widget-folders .sm-tile,
.sm-page-widget-galleries .sm-tile,
.sm-page-widget-nodes .sm-tile,
.sm-page-widget-pages .sm-tile {
border-radius: 10px;
overflow: hidden;

.sm-page-powered-by a { display: None; }

.sm-user-ui .sm-page-widget-nav-toplink a:hover {
color: #CC9966 !important;
}

.sm-user-ui .sm-right-click-message:after {
content: '© Brian L Jarvis, All rights reserved. Unauthorized use of this photograph is stricly prohibited and punishable by law. If you are interested in this photograph, please click the buy button to purchase a copy.';
font-weight: 700;
}

.sm-user-ui .sm-right-click-message .sm-tooltip-content {
display: none;
}

.sm-user-ui .sm-right-click-message {
background-color: #C8C8C8;
border-radius: 7px;
border: 2px solid #000000;
box-shadow: -4px 5px 10px #000;
color: #000;
padding: 10px;
}

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

.sm-user-ui .sm-lightbox-tools .sm-lightbox-close:after {
content: ' Exit';
font-size: 18px;
}

.sm-user-ui .sm-lightbox-tools .sm-fonticon-XCross2 {
display: none;
}

.sm-user-ui .sm-lightbox .sm-lightbox-tools {
padding: 5px;
}

.sm-gallery-smugmug .sm-tile-info {
text-align: center;
display: inline;
}

/* Label the download button */
.sm-button.sm-button-image-download:after {
content: "Download" !important;
margin-left: 8px;
display:inline-block;
}

/* Label the info button */
.sm-button.sm-button-image-info:after {
content: "Info" !important;
margin-left: 8px;
display:inline-block;
}

/* Label the tools button */
.sm-button.sm-button-image-edit:after {
content: "Tools" !important;
margin-left: 8px;
display:inline-block;
}

/* Label the comment button */
.sm-button.sm-button-image-comment:after {
content: "Comment" !important;
margin-left: 8px;
display:inline-block;
}

/* Label the like button */
.sm-button.sm-button-image-like:after {
content: "Like" !important;
margin-left: 8px;
display:inline-block;
}

/* Label the share button in the lightbox */
.sm-lightbox .sm-button.sm-button-image-share:after {
content: "Share" !important;
margin-left: 8px;
display:inline-block;
}

/* Remove gallery icon + center gallery captions */
.sm-page-widget-galleries .sm-tile-type-icon {
display:none;
}
.sm-page-widget-galleries .sm-tile-info {
text-align:left;
}

.sm-user-ui .sm-button-size-small.sm-button-square{
width: auto;
}

DigiScapes · February 28, 2018

Thank you @denisegoldberg that worked

Hikin' Mike · February 28, 2018

I would put it in your theme's custom CSS and not in your Gallery section.

DigiScapes · March 2, 2018

@Hikin' Mike said:
I would put it in your theme's custom CSS and not in your Gallery section.

Mike, I must be doing something wrong, or I've got some conflicting code. Below is what I've got in the my There's CSS. The code you said to use is at the bottom, I also put it at the top to see if it made a difference and it didn't

.sm-page-widget-folders .sm-tile,
.sm-page-widget-galleries .sm-tile,
.sm-page-widget-nodes .sm-tile,
.sm-page-widget-pages .sm-tile {
border-radius: 10px;
overflow: hidden;
}
.sm-page-powered-by A
{
display: none;
}
.sm-gallery-tiles .sm-tile .sm-image, .sm-gallery-tiles .sm-tile .sm-tile-overlay {
border-radius:10px;
overflow:hidden;
}

/* Round the main image inside SmugMug-style galleries */
.sm-gallery-image .sm-tile {
border-radius:10px;
overflow:hidden;
}

/* Label the download button */
.sm-button.sm-button-image-download:after {
content: "Download" !important;
margin-left: 8px;
display:inline-block;
}

/* Label the info button */
.sm-button.sm-button-image-info:after {
content: "Info" !important;
margin-left: 8px;
display:inline-block;
}

/* Label the tools button */
.sm-button.sm-button-image-edit:after {
content: "Tools" !important;
margin-left: 8px;
display:inline-block;
}

/* Label the comment button */
.sm-button.sm-button-image-comment:after {
content: "Comment" !important;
margin-left: 8px;
display:inline-block;
}

/* Label the like button */
.sm-button.sm-button-image-like:after {
content: "Like" !important;
margin-left: 8px;
display:inline-block;
}

/* Label the share button in the lightbox */
.sm-lightbox .sm-button.sm-button-image-share:after {
content: "Share" !important;
margin-left: 8px;
display:inline-block;
}

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

.sm-user-ui .sm-page-widget-nav-toplink a:hover {
color: #CC9966 !important;
}

/* Round the images inside Collage Landscape or Collage Portrait galleries */
.sm-gallery-roworganic .sm-gallery-images .sm-tile, .sm-gallery-columnorganic .sm-gallery-images .sm-tile {
border-radius:8px;
overflow:hidden;
}

/* Center Lightbox Caption */
.sm-lightbox-info {
text-align: center;
}

.sm-user-ui .sm-button-size-small.sm-button-square{
width: auto;
}

Hikin' Mike · March 2, 2018

@DigiScapes said:

@Hikin' Mike said:
I would put it in your theme's custom CSS and not in your Gallery section.

Mike, I must be doing something wrong, or I've got some conflicting code. Below is what I've got in the my There's CSS. The code you said to use is at the bottom, I also put it at the top to see if it made a difference and it didn't

Odd. When I view the source code for your home page (https://cdn.smugmug.com/css/custom/p/25362/1519948937-1b1c243f3203ac03f455a140748ebce9.css) I see it, but when I view one of your Astrophotography photos and view the source code (https://cdn.smugmug.com/css/custom/p/25618/1377618714-1b1c243f3203ac03f455a140748ebce9.css) I don't see it. It should be the same. I'm seeing different CSS between the two as well.

I don't know what to tell you other than I think you have some conflicting code....some place.

Hikin' Mike · March 2, 2018

To add, I checked my site doing the same method. My gallery page (my SmugMug home page) and one of my Yosemite photo source code are the exact same link and CSS:
Gallery Page: https://cdn.smugmug.com/css/custom/p/285282/1519545759-1b1c243f3203ac03f455a140748ebce9.css
Yosemite Photo: https://cdn.smugmug.com/css/custom/p/285282/1519545759-1b1c243f3203ac03f455a140748ebce9.css

Your site shows two different CSS URL's (you can see that from the above post), while mine has the same.

I don't have an answer.

DigiScapes · March 2, 2018

@Hikin' Mike said:
To add, I checked my site doing the same method. My gallery page (my SmugMug home page) and one of my Yosemite photo source code are the exact same link and CSS:
Gallery Page: https://cdn.smugmug.com/css/custom/p/285282/1519545759-1b1c243f3203ac03f455a140748ebce9.css
Yosemite Photo: https://cdn.smugmug.com/css/custom/p/285282/1519545759-1b1c243f3203ac03f455a140748ebce9.css

Your site shows two different CSS URL's (you can see that from the above post), while mine has the same.

I don't have an answer.

I copies the CSS into all areas and it seems to work now. I think the fact it was different was causing the issue. Thanks for your help

Hikin' Mike · March 2, 2018

Glad it's working, but you should only put it in one section.

Pshots · March 3, 2018

Hi guys

I have some problems on my website as well like this. Till some weeks ago there were everything ok but actually the view here of the share buttons etc is like this..
Can you tell my why guys ? I`ve done nothing on my website since couple of weeks.

Here is one of my portfolio sites...
pshots-photography.com/Pshots-Photography/Portfolio/Long-Exposure/Long-Exposure/i-TG2x49v/A

If you look one page up in long exposure gallery this is happen everywhere on every image.

Thanks for your help on this.

Regards Phil

denisegoldberg · March 3, 2018

@Pshots said:
Hi guys

I have some problems on my website as well like this. Till some weeks ago there were everything ok but actually the view here of the share buttons etc is like this..
Can you tell my why guys ? I`ve done nothing on my website since couple of weeks.

I believe you need code updates for your buttons as detailed in the thread Button Updates. Note that there are several sets of code in that thread.

Pshots · March 3, 2018

@denisegoldberg great ! Thanks for your fast feedback on this.

Good evening