Right Click Protection Code

Jingle Images · August 7, 2013

einat wrote: »

Thanks. Lots of thanks.
It works, and I have a question to clarify something -

Is it an either\or situation?
When I'm looged in I will see the tool tips and SM's original RCP msg, and only when logged out my customized RCP will appear?
It's OK if that's how it is, just wanted to make sure that I did it right.

Yes it is setup to for logged in and not logged in.

einat · August 7, 2013

Jingle Images wrote: »

Yes it is setup to for logged in and not logged in.

This was quick, thanks again
And in my language - toda raba
תודה רבה

dallasw · August 7, 2013

Jingle Images wrote: »

Thats why i did the other code to be able to do that.
I could not find any other way to get around it, and be able to have a custom box.

That makes sense. I was offering a way to change just the right click message, leaving the other help tooltips intact, whether you're logged in or out. If you change the references to 'sm-tooltip-floating' and 'sm-tooltip' in your example code to the more specific 'sm-right-click-message', your CSS will only apply to the right click message. This includes changes to the message itself, background color, text color, border radius, etc.

For example, your most recent CSS would change to this:

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]

Jingle Images · August 7, 2013

brandofamily wrote: »

It MUST be something in the theme codes... at least that's my guess.

I would like to customize the pop-up box, but with this new code the box breaks if I try to change the background-color.

dallasw wrote: »
That makes sense. I was offering a way to change just the right click message, leaving the other help tooltips intact, whether you're logged in or out. If you change the references to 'sm-tooltip-floating' and 'sm-tooltip' in your example code to the more specific 'sm-right-click-message', your CSS will only apply to the right click message. This includes changes to the message itself, background color, text color, border radius, etc.

For example, your most recent CSS would change to this:
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]

Works Perfect Thanks

do you mind if we update the main part of my post with this?

dallasw · August 7, 2013

Jingle Images wrote: »

Works Perfect Thanks

do you mind if we update the main part of my post with this?

Please do!

Jingle Images · August 7, 2013

dallasw wrote: »
That makes sense. I was offering a way to change just the right click message, leaving the other help tooltips intact, whether you're logged in or out. If you change the references to 'sm-tooltip-floating' and 'sm-tooltip' in your example code to the more specific 'sm-right-click-message', your CSS will only apply to the right click message. This includes changes to the message itself, background color, text color, border radius, etc.

For example, your most recent CSS would change to this:
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]

Ok thanks to dallasw we have a shorter code for this that works all around.

Thanks dallasw.

juanheredia · August 8, 2013

dallasw wrote: »
That makes sense. I was offering a way to change just the right click message, leaving the other help tooltips intact, whether you're logged in or out. If you change the references to 'sm-tooltip-floating' and 'sm-tooltip' in your example code to the more specific 'sm-right-click-message', your CSS will only apply to the right click message. This includes changes to the message itself, background color, text color, border radius, etc.

For example, your most recent CSS would change to this:
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]

Thanks for the clean a simple code. Just only a small contribution, if you want your custom message in two or more lines, you could use the escape code "\A" (newline) and the property "white-space" with the value "pre". Like this:

/* Right Click Protection code */
.sm-user-ui .sm-right-click-message:after {
  content: '[COLOR="PaleGreen"]First Line content \A Second Line content \A Other content...[/COLOR]';
  [B]white-space: pre;[/B]
}

You can see it running at my site (URL in my sign). I hope it helps.

Jingle Images · August 8, 2013

juanheredia wrote: »
Thanks for the clean a simple code. Just only a small contribution, if you want your custom message in two or more lines, you could use the escape code "\A" (newline) and the property "white-space" with the value "pre". Like this:
/* Right Click Protection code */
.sm-user-ui .sm-right-click-message:after {
  content: '[COLOR="PaleGreen"]First Line content \A Second Line content \A Other content...[/COLOR]';
  [B]white-space: pre;[/B]
}
You can see it running at my site (URL in my sign). I hope it helps.

That works to. anyone have a way to add a link inside this?????

Sir_Eagle · August 8, 2013

Any way to resize the message box. I've added another box over it.

Jingle Images · August 8, 2013

Sir_Eagle wrote: »

Any way to resize the message box. I've added another box over it.

Try this

.sm-tooltip-floating {
max-width: none;}

OR move this code in red to here to label in green

.sm-user-ui .sm-right-click-message {
background-color: #fff;
box-shadow: -4px 5px 10px #000;
color: #000;
max-width: 320px;
height: 110px;
padding: 10px;
font-size: 18px;
border-radius: 10px;

}

Sir_Eagle · August 8, 2013

Jingle Images wrote: »
Try this
.sm-tooltip-floating {
max-width: none;}

This worked, thanks,

Jingle Images wrote: »

OR move this code in red to here to label in green
.sm-user-ui .sm-right-click-message {
background-color: #fff;
box-shadow: -4px 5px 10px #000;
color: #000;
max-width: 320px;
height: 110px;
padding: 10px;
font-size: 18px;
border-radius: 10px;
}

Had this in originally and didn't really want to do it this way.

cls241 · August 9, 2013

Thank you so much, it works well.. made some minor changes for color and size.. but could not have done the code w/o you!

phaserbeam · August 9, 2013

Thanks very much for the code to customize the right-click message. Since new SM the original right-click message did not work on Opera12. Using the code above fixed that, thanks a lot

Darter02 · August 9, 2013

I copy/pasted the exact code in post #1, with my own message where it belongs. Last night I unveiled. This morning I thought I'd test it. Using IE 10, and not logged in, I right clicked and I get this:

It does work in Firefox & Chrome.

Jingle Images · August 9, 2013

Darter02 wrote: »

I copy/pasted the exact code in post #1, with my own message where it belongs. Last night I unveiled. This morning I thought I'd test it. Using IE 10, and not logged in, I right clicked and I get this:

It does work in Firefox & Chrome.

When you added you message you have added a } or some that is blocking the code.

Your message needs to be inside ' '

Darter02 · August 9, 2013

Jingle Images wrote: »

When you added you message you have added a } or some that is blocking the code.

Your message needs to be inside ' '

I swear all I did was place my message between the ' ' in the code you provided. It works in 2 of the three browsers I have.

/* Right Click Protection code */
/* Your Message */
.sm-user-ui .sm-right-click-message:after {
  content: 'I am sorry but I have disallowed saving from this site. You can use the Share Button, just mouse over the lower right corner. It will give you many options for sharing this image online. You are also welcome to purchase a copy, print, or any other offered merchandise. Just hit the Add to Cart button. Thanks!';
}

/* 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 */
.sm-user-ui .sm-right-click-message {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: -4px 5px 10px #000;
  color: black;
}

Jingle Images · August 9, 2013

Darter02 wrote: »

I swear all I did was place my message between the ' ' in the code you provided. It works in 2 of the three browsers I have.

/* Right Click Protection code */
/* Your Message */
.sm-user-ui .sm-right-click-message:after {
  content: 'I am sorry but I have disallowed saving from this site. You can use the Share Button, just mouse over the lower right corner. It will give you many options for sharing this image online. You are also welcome to purchase a copy, print, or any other offered merchandise. Just hit the Add to Cart button. Thanks!';
}

/* 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 */
.sm-user-ui .sm-right-click-message {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: -4px 5px 10px #000;
  color: black;
}

Remove ; after the thanks'

Darter02 · August 9, 2013

That did the trick. The really weird things is, I didn't add that. It was in the notepad where I'd pasted the code I'd copied from here. When I went into the CSS for my site to manually delete it, and it wasn't there. I deleted it from the notepad copy, and then pasted that into the CSS. It looked the exact same as what i'd replaced in the window. Now it works.

Gremlins...

Jingle Images · August 9, 2013

Darter02 wrote: »

That did the trick. The really weird things is, I didn't add that. It was in the notepad where I'd pasted the code I'd copied from here. When I went into the CSS for my site to manually delete it, and it wasn't there. I deleted it from the notepad copy, and then pasted that into the CSS. It looked the exact same as what i'd replaced in the window. Now it works.

Gremlins...

Good deal.

Cindy · August 9, 2013

Jingle Images wrote: »

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]

Perfect & Thank You!!! I haven't unveiled yet but getting oh so very much closer thanks to people like you!

thumb

pworm14 · August 9, 2013

Cindy wrote: »

Perfect & Thank You!!!

Me too!!! Thanks a bunch. It works great.

JimClark · August 9, 2013

oh so I have read the thread and would like to use this on my account. Has the code been updated in the first post or is the latest code in the latest posts of the thread?
Sorry code challanged in Seattle
Next to figure out how and where to put the code.
Jim

Djm3006 · August 9, 2013

"ADD TO CART" color in copyright message?
Thanks Jingle Images for the Customizations they work great
Would it be possible to make the "ADD TO CART" a deferent color in the copyright message?

Jingle Images · August 9, 2013

JimClark wrote: »

oh so I have read the thread and would like to use this on my account. Has the code been updated in the first post or is the latest code in the latest posts of the thread?
Sorry code challanged in Seattle
Next to figure out how and where to put the code.
Jim

It is updated and it goes in CSS on the Entire site.

JimClark · August 10, 2013

thanks Jingle Images but is it the first post or the latest post that contains the latest code?

Jingle Images · August 10, 2013

JimClark wrote: »

thanks Jingle Images but is it the first post or the latest post that contains the latest code?

1st post is updated.

JimClark · August 10, 2013

Thank you again from the code chalanged

Sent from my SGH-T989 using Tapatalk 2

kbevphoto · August 10, 2013

/* Right Click Protection code */
/* Your Message */
.sm-tooltip-floating:after {
content: 'YOUR Custom Message Here'}

/* To Block SM Message */
.sm-tooltip-content {
display: none;
}

/* For Sm Message and Help Tips to be Displayed when Logged IN */
.sm-user-loggedin .sm-tooltip-content {
display: inline ;
color: #000;
}

/* To Cancel your custom message */
.sm-user-loggedin .sm-tooltip-floating:after {
display: none;
}

/* used for changing background-color and Radius AND color of Text In some Themes */
.sm-user-ui .sm-tooltip {
background-color: #fff;
border-radius: 10px !important;
box-shadow: -4px 5px 10px #000 !important;
color:black !important;
}

I'm using this code. works in IE, but I still get the default SM code in Chrome. ideas?

dragandjordjevic · August 10, 2013

Thanks guys, updated mine and looks much better now.

Jingle Images · August 10, 2013

kbevphoto wrote: »

I'm using this code. works in IE, but I still get the default SM code in Chrome. ideas?

Use the updated code in 1st post. But for that code you are using now if your not logged out you will not see your message.

Right Click Protection Code

Comments