Right Click Protection Code

Jingle Images · August 5, 2013

Ok did a update on this here is the new code needed

Thanks to dallasw

CODE goes in css box on Entire Site

For example

Custom message in green
Right click tooltip look and feel in blue

/* Right Click Protection code */
/* Your Message */
.sm-user-ui .sm-right-click-message:after {
  content: '[COLOR="PaleGreen"]YOUR Custom Message Here[/COLOR]';
}

/* To Block SM Message */
.sm-user-ui .sm-right-click-message .sm-tooltip-content {
  display: none;
}

/* used for changing background-color and Radius AND color of Text In some Themes */
[COLOR="DeepSkyBlue"].sm-user-ui .sm-right-click-message {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: -4px 5px 10px #000;
  color: black;
}[/COLOR]

thenickdude · August 5, 2013

Nicely done! The double colon syntax for ::after isn't understood by IE8. The single colon syntax is more compatible as it works for IE8 and also all the browsers which support the double-colon syntax (.sm-tooltip-content:after).

G-Force · August 5, 2013

That work, but now all my tool tips, including the ones in the customizer now say the message in this CSS. This should be limited to the gallery only.

Jingle Images · August 5, 2013

Lamah wrote: »

Nicely done! The double colon syntax for ::after isn't understood by IE8. The single colon syntax is more compatible as it works for IE8 and also all the browsers which support the double-colon syntax (.sm-tooltip-content:after).

Ok updated to single.

Pedro Alicea · August 5, 2013

Disregard. My buttons gallery had rightclick protection off.

And this works like a charm. Thanks!!!

Jingle Images · August 5, 2013

Pedro Alicea wrote: »

Disregard. My buttons gallery had rightclick protection off.

And this works like a charm. Thanks!!!

Ok.

www.jingleimages.com

Darter02 · August 6, 2013

Cool beans! This worked out well. Of course, it took me a moment to sort out while only part of my message appeared. I'd used a contraction in my message. Should I say, "I had" used...

juanheredia · August 6, 2013

Great tip. Thanks for sharing.

Jingle Images · August 6, 2013

Darter02 wrote: »

Cool beans! This worked out well. Of course, it took me a moment to sort out while only part of my message appeared. I'd used a contraction in my message. Should I say, "I had" used...

Yea I had the same thing trying to make it work for me. I had "" around a word. Will work on it today to see if can somehow get around this.

thenickdude · August 6, 2013

You can add backslashes in front of quotes and apostrophes in the string to make them work, like so:

content: 'This gallery\'s awesome';

Or:

content: "\"The bird\" is the word.";

RKnecht · August 6, 2013

Thanks for this code. Customizing the new site is so much faster/easier than before.

Tonto · August 6, 2013

Thanks Jingle that was really helpful

juanheredia · August 6, 2013

RKnecht wrote: »

Thanks for this code. Customizing the new site is so much faster/easier than before.

Yes, customizing is faster and easier, but we are still missing JavaScript support and a better comment system.

Jingle Images · August 6, 2013

Tonto wrote: »

Thanks Jingle that was really helpful

Your welcome. check it on IE 9 might need to add or adj. code
IE 9 is not working for me.

dragandjordjevic · August 6, 2013

Thanks, solved 1 of my issues

Dreadnote · August 6, 2013

Where should this CSS be placed? When I put in the theme CSS section it just makes the right-click message go away altogether. The image is protected but there is no message.

Jingle Images · August 6, 2013

Dreadnote wrote: »

Where should this CSS be placed? When I put in the theme CSS section it just makes the right-click message go away altogether. The image is protected but there is no message.

Are you using IE 7,8,9 ???

If so I have to find away for it to work.

Dreadnote · August 6, 2013

Jingle Images wrote: »

Are you using IE 7,8,9 ???

If so I have to find away for it to work.

Safari, Chrome or Firefox

ColinM · August 6, 2013

Worked like a charm. Hope you don't mind but I Changed/Added a few lines to make it look more like the original box, color is 595959 instead of 8a8585 and I added padding so text isn't jammed to the top and left of the box

Full code with added lines:
.sm-tooltip-content:after {
content: 'Your message here.';
visibility: visible;
display: inline-block;
position: relative;
background-color: #595959;
width: 240px;
height: 75px;
padding: 8px;
}

.sm-user-ui .sm-tooltip, .sm-user-ui.sm-tooltip {
visibility: hidden;
}

Hope that helps some

ColinMPhotography.com

JSS44 · August 6, 2013

This worked for me, thank you!

Jingle Images · August 6, 2013

Dreadnote wrote: »

Safari, Chrome or Firefox

I do not see your site as new, so until it is live it will be hard to help.

LouB · August 6, 2013

How would one change the font size of this ? My font gets a little unreadable at certain sizes under chrome

Thanks for this

Jingle Images · August 6, 2013

LouB wrote: »

How would one change the font size of this ? My font gets a little unreadable at certain sizes under chrome

Thanks for this

use this and adj. in red

font-size: [COLOR="Red"]12px[/COLOR];

Darter02 · August 6, 2013

ColinM wrote: »

Worked like a charm. Hope you don't mind but I Changed/Added a few lines to make it look more like the original box, color is 595959 instead of 8a8585 and I added padding so text isn't jammed to the top and left of the box

Full code with added lines:
.sm-tooltip-content:after {
content: 'Your message here.';
visibility: visible;
display: inline-block;
position: relative;
background-color: #595959;
width: 240px;
height: 75px;
padding: 8px;
}

.sm-user-ui .sm-tooltip, .sm-user-ui.sm-tooltip {
visibility: hidden;
}

Hope that helps some

ColinMPhotography.com

Will this code work on IE 10?

Jingle Images · August 6, 2013

LouB wrote: »

How would one change the font size of this ? My font gets a little unreadable at certain sizes under chrome

Thanks for this

Darter02 wrote: »

Will this code work on IE 10?

I cant get it to work on IE at all on my end.
will work on code tonight and see what I can come up with.

ColinM · August 6, 2013

Darter02 wrote: »

Will this code work on IE 10?

Just tried on IE 10 & when I right click nothing happens (I don't get any menus, even the default IE menu).

Short answer: No, it does not appear to work in IE 10.

jbenayas · August 6, 2013

ColinM wrote: »

Worked like a charm. Hope you don't mind but I Changed/Added a few lines to make it look more like the original box, color is 595959 instead of 8a8585 and I added padding so text isn't jammed to the top and left of the box

Full code with added lines:
.sm-tooltip-content:after {
content: 'Your message here.';
visibility: visible;
display: inline-block;
position: relative;
background-color: #595959;
width: 240px;
height: 75px;
padding: 8px;
}

.sm-user-ui .sm-tooltip, .sm-user-ui.sm-tooltip {
visibility: hidden;
}

Hope that helps some

ColinMPhotography.com

It works perfect. Thank you very much!

Jingle Images · August 6, 2013

Ok everyone I have updated the code to work on all Browsers. Remove any code you have now and replace with this.
Have a good Day

Code is

.sm-tooltip-floating:after {
content: '[COLOR="Red"]YOUR Message Here[/COLOR]'}

.sm-tooltip-content {
  display: none;
}

Jingle Images · August 6, 2013

ColinM wrote: »

Just tried on IE 10 & when I right click nothing happens (I don't get any menus, even the default IE menu).

Short answer: No, it does not appear to work in IE 10.

Try replacing the code with updated code and see if it works now.
It works on my end with updated code.

Dreadnote · August 6, 2013

Jingle Images wrote: »

I do not see your site as new, so until it is live it will be hard to help.

I know, it is the irony of the "New and Improved SmugMug". To work out the bugs you have to unveil, which is the very thing you want to avoid doing until after you have worked out the bugs.

Thanks for trying.

EDIT: In Safari the new code appends what you type in the 'YOUR MESSAGE HERE' section of the code to the already existing SmugMug boiler plate so that it ends up looking like this (here i just inserted "test message"):

Jingle Images · August 6, 2013

Dreadnote wrote: »

I know, it is the irony of the "New and Improved SmugMug". To work out the bugs you have to unveil, which is the very thing you want to avoid doing until after you have worked out the bugs.

Thanks for trying.

Try the new code I put up.

Right Click Protection Code

Comments