Customize/Change the "Unlock Folder" text?

pmbpro

Hello,

Is there a CSS code where I can customize/change the "Unlock Folder" wording of password-protected folders? I did a search and found one short thread from way back in 2013, but the answer doesn't seem to work for me. Someone else also asked back then in 2013 too, in another thread, but there is no answer.

Is such a customization possible now with our current sites?

Thanks!

Hikin' Mike

Add this to your CSS:

#sm-node-password .sm-heading {
    visibilty: hidden;
    }

    #sm-node-password h1:before {
        visibility: visible;
        content: 'Text Here';
        float: left;
        margin-bottom: -125px;
        }

You may need to adjust the margin-bottom: -125px depending on the font size.

pmbpro

Thank you very much for the code, Mike!
You mentioned adjusting the margin-bottom, depending on the type size.
That type size is another thing I forgot to mention. The original type size is rather large for what I want.

For that, do I add the 'font size: 00px; ' line in there, to reduce the font size to whatever I want?

@Hikin' Mike said:
Add this to your CSS:

#sm-node-password .sm-heading {
  visibilty: hidden;
  }
  
  #sm-node-password h1:before {
      visibility: visible;
      content: 'Text Here';
      float: left;
      margin-bottom: -125px;
      }

You may need to adjust the margin-bottom: -125px depending on the font size.

Hikin' Mike

Use this:

.sm-user-ui h1.sm-title-xl {
    font-size: 00px;
    }

pmbpro

Thanks again Mike! I was able to type in a test phrase and reduce the size.

However, the "Unlock Folder" text remains underneath my text (attached screenshot) but I can't figure out how to remove it.

Is it because of this ".sm-user-ui h1.sm-title-xl" part? Is there a way to remove those two words completely?

Ideally I'd like it removed completely, but if there's no way to do it, I can live with the current customization.
You've been a huge help!

@Hikin' Mike said:
Use this:

.sm-user-ui h1.sm-title-xl {
  font-size: 00px;
  }

Hikin' Mike

@pmbpro said:
Thanks again Mike! I was able to type in a test phrase and reduce the size.

However, the "Unlock Folder" text remains underneath my text (attached screenshot) but I can't figure out how to remove it.

Is it because of this ".sm-user-ui h1.sm-title-xl" part? Is there a way to remove those two words completely?

Ideally I'd like it removed completely, but if there's no way to do it, I can live with the current customization.
You've been a huge help!

I had a typo, sorry.

#sm-node-password .sm-heading {
    visibility: hidden;
    }

#sm-node-password h1:before {
    visibility: visible;
    content: 'Text Here';
    float: left;
    margin-bottom: -125px;
    }

.sm-user-ui h1.sm-title-xl {
    font-size: 26px;
    }

pmbpro

Oh, I didn't even notice that typo!

Everything works fine now. I even changed the colour.

This is the URL I was fussing with.
pmbimages.com/Film-Stills/Client-Access

I really appreciate your help on this. Thanks again!

@Hikin' Mike said:

I had a typo, sorry.

#sm-node-password .sm-heading {
  visibility: hidden;
  }
  
#sm-node-password h1:before {
  visibility: visible;
  content: 'Text Here';
  float: left;
  margin-bottom: -125px;
  }

.sm-user-ui h1.sm-title-xl {
  font-size: 26px;
  }

BigRed

P.S. Another approach would be to only use CSS to hide the "Unlock Folder" text, and add a text block to http://username.smugmug.com/password to customize the replacement text.

pmbpro

@BigRed said:
P.S. Another approach would be to only use CSS to hide the "Unlock Folder" text, and add a text block to http://username.smugmug.com/password to customize the replacement text.

Oh wow. Thanks very much for this other option too, BigRed! I tried this one and it works. I can vary the font size and colour there too. Nice to know there is more than one way to do this.

Hikin' Mike

@pmbpro said:
Nice to know there is more than one way to do this.

There usually is. I usually pick the hard way....lol!

pmbpro

Hi again @Hikin' Mike!

I just recently started using the automated 'Private Sharing' feature (using email-specific invites/access to clients).

I encountered this (below) login page as well for those who haven't logged in yet.

Is there also a way that I can customize this page too? I'd like to see if I can make both types of login pages appear consistent.

Hikin' Mike

@pmbpro said:
Hi again @Hikin' Mike!

I just recently started using the automated 'Private Sharing' feature (using email-specific invites/access to clients).

I encountered this (below) login page as well for those who haven't logged in yet.

Is there also a way that I can customize this page too? I'd like to see if I can make both types of login pages appear consistent.

I've never used it, so I had to try it out...lol!

They use a h1 for the "These photos..." and a h4 for the "If you..." and they don't add a class to the headers like the password page. BUT, there is a way to do it (I tried it)...

#sm-access-denied-reserved h1,
.sm-access-denied-section h4 {
    visibility: hidden;
    margin-left: -99999px;
    }

#sm-access-denied-reserved:before,
.sm-access-denied-section:before {
    visibility: visible;
    }

#sm-access-denied-reserved:before {
    font-size: 48px;
    content: 'Text Here';
    }


.sm-access-denied-section:before {
    font-size: 24px;
    content: 'More text here';
    }   

#sm-access-denied-login.sm-access-denied-section:before{
    content: '';
    }

pmbpro

Wow, thanks so much Mike!

I added it in the overall 'Theme' CSS box, and it worked perfectly! I reduced the font sizes of both of the text lines a little bit, and I even added a code line (color: #E6C71C;) to change the colour of the first line, that larger text.

The only thing I'm not sure how to do, is to reduce the line spacing between the two lines of text, to bring them a bit closer together (similar to what I did for the other page).

Do you know if there is a code for that formatting via CSS? I had used a text box method for the other page, so that idea may not work on this particular page?

@Hikin' Mike said:
I've never used it, so I had to try it out...lol!

They use a h1 for the "These photos..." and a h4 for the "If you..." and they don't add a class to the headers like the password page. BUT, there is a way to do it (I tried it)...

#sm-access-denied-reserved h1,
.sm-access-denied-section h4 {
  visibility: hidden;
  margin-left: -99999px;
  }
  
#sm-access-denied-reserved:before,
.sm-access-denied-section:before {
  visibility: visible;
  }
  
#sm-access-denied-reserved:before {
  font-size: 48px;
  content: 'Text Here';
  }
  
  
.sm-access-denied-section:before {
  font-size: 24px;
  content: 'More text here';
  }   

#sm-access-denied-login.sm-access-denied-section:before{
  content: '';
  }

Hikin' Mike

@pmbpro said:
Wow, thanks so much Mike!

I added it in the overall 'Theme' CSS box, and it worked perfectly! I reduced the font sizes of both of the text lines a little bit, and I even added a code line (color: #E6C71C;) to change the colour of the first line, that larger text.

The only thing I'm not sure how to do, is to reduce the line spacing between the two lines of text, to bring them a bit closer together (similar to what I did for the other page).

Do you know if there is a code for that formatting via CSS? I had used a text box method for the other page, so that idea may not work on this particular page?

Find this:

#sm-access-denied-reserved h1,
.sm-access-denied-section h4 {
    visibility: hidden;
    margin-left: -99999px;
    }

and change it to this:

#sm-access-denied-reserved h1,
.sm-access-denied-section h4 {
    visibility: hidden;
    margin-left: -99999px;
    line-height: 0;
    padding: 0;
    }

pmbpro

Oh, yeah, the 'line height' and 'padding'! I'll never remember these things, LOL!

Thanks so much Mike! It's perfect!

@Hikin' Mike said:

Find this:

#sm-access-denied-reserved h1,
.sm-access-denied-section h4 {
    visibility: hidden;
    margin-left: -99999px;
    }

and change it to this:

#sm-access-denied-reserved h1,
.sm-access-denied-section h4 {
    visibility: hidden;
    margin-left: -99999px;
  line-height: 0;
  padding: 0;
    }

pmbpro

[Deleted post and started new thread, since it's a different problem anyway]
https://dgrin.com/discussion/262399/access-to-client-shared-with-me-dashboard-through-my-customized-login-page#latest