Change "Let me in"

Candid7 · July 2, 2014

Can I change "Let me in" to "click here"?

Hikin' Mike · July 2, 2014

Do you have a link to the page?

uketeecee · July 8, 2014

Yes, password protected sites have a password text box and a 'LET ME IN' button.
Like the OP I would also find it useful to know the code to change the text to something like 'LOG IN'.

See the button here:
http://ukulelearchive.smugmug.com/

uketeecee · October 30, 2014

bump

SmugSam · October 31, 2014

Hi,

I don't use password protection on my site so can't test this, but I took a look at yours in the link above, and I think something like the following should work:

form#sm-node-passwordform .sm-button-label {content:"Log on";}

I am not sure if it will work best in the Theme CSS area, or as a CSS block added to Entire Site, so you may have to test both. Just change the text to whatever you want, but bear in mind the button is only so wide so only so much will fit unless you start wanting to change font size etc!

It may not be 100%, but I am sure someone else will correct me!

Hikin' Mike · October 31, 2014

SmugSam wrote: »
Hi,

I don't use password protection on my site so can't test this, but I took a look at yours in the link above, and I think something like the following should work:
form#sm-node-passwordform .sm-button-label {content:"Log on";}
I am not sure if it will work best in the Theme CSS area, or as a CSS block added to Entire Site, so you may have to test both. Just change the text to whatever you want, but bear in mind the button is only so wide so only so much will fit unless you start wanting to change font size etc!

It may not be 100%, but I am sure someone else will correct me!

I don't use it either. I added that using the Firebug tool on his site, and it didn't work. I tried yesterday, and I can't see a way to do that. I can add text, but can't remove what's already there.

I'm going to say it can't be done.

Allen · October 31, 2014

See if at least this will work.

form#sm-node-passwordform .sm-button .sm-button-label:before{
content:"click here & "; z-index:99!important;
}

Allen · October 31, 2014

Option

form#sm-node-passwordform .sm-button .sm-button-label {
text-transform: capitalize!important;
color: #635C42; /* changes all text to background color */
}

form#sm-node-passwordform .sm-button .sm-button-label:before {
content:"click here ";
z-index:99!important;
font-size: 120%;
color:#fff; /* changes just this back to white */
padding-left: 50px;
}

It hides the "let me in" on non-hover. Can't quite figure out changing text color for
background hover #756E4D to continue to hide "Let Me In" but it's barely visible.

SmugSam · October 31, 2014

Ahhh I think Allen has about cracked it!

One suggested tweak, which takes away the need to address the changing background colour with mouse hover, is to make the original text invisible, rather than change it to match the background colour.

form#sm-node-passwordform .sm-button-label {
color: rgba(0,0,0,0);
)

form#sm-node-passwordform .sm-button-label:after {
content:"Log on";
color:#fff;
position: relative;
padding-right:[COLOR="Red"]20[/COLOR]px;
}

Bear in mind that you may have to alter the number you apply to padding-right (the number in red) depending on the length of the replacement text you are using in order for it to be centred correctly.

Allen · October 31, 2014

Notice that I used
.sm-button-label:before

Why I used left margin

leftquark · November 4, 2014

Hi uketeecee, have any of the comments above worked for you?

uketeecee · November 4, 2014

leftquark wrote: »

Hi uketeecee, have any of the comments above worked for you?

Yes...thanks to Allen and Mike!

I've been able to change 'Let Me In' to 'Under Renovation' (which is what I was after) but the invisible text 'Let Me In' is still there, making the custom text not centered.

See the page here:
http://ukulelearchive.smugmug.com/

BTW Is there any way to change the text from 'Unlock Site' to 'Site Closed'?

SmugSam · November 7, 2014

Hi uketeecee,

As I mentioned in an earlier response, you will have to adjust the padding size to try and centre the text, but also you have the limitation that the original text is still there (we have just made it invisible). I see that if you get up to around 40px in the padding, then the old (invisible) text jumps to a new line - which means your "Under Renovation" is centred, but the green background box grows downwards. Probably not ideal for you! There may be the possibility of adding further code to get around this new behaviour, but if you could find a title shorter than "Under Renovation" I think it would be a simpler way to achieve your goal. I had previously tried "Log on" and could centre that ok.

Allen · November 7, 2014

How about lowing the text size to very small in the general CSS then raise it in the new content CSS?

form#sm-node-passwordform .sm-button .sm-button-label {
text-transform: capitalize!important;
color: #635C42; /* changes all text to background color */
font-size: 20%;
}

form#sm-node-passwordform .sm-button .sm-button-label:before {
content:"Under Renovation ";
z-index:99!important;
font-size: 120%;
color:#fff; /* changes just this back to white */
padding-left: 50px;
}

uketeecee · November 9, 2014

Sorry, I don't know where the new content CSS block is?

leftquark · November 11, 2014

uketeecee wrote: »

Sorry, I don't know where the new content CSS block is?

Hi uketeecee. The content block to drag in is a new "CSS Content Block" which can be found under the "HTML & CSS" heading. Let me know if you are still having problems finding it in the Customizer.

Change "Let me in"

Comments