Right Click Protection Code

raebrown · August 6, 2013

Jingle Images wrote: »

Try the new code I put up.

Working here, Firefox, Chrome & IE. Thanks!

brandofamily · August 6, 2013

Jingle Images wrote: »
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;
}

At least in FF (not unveiled) the original text is in the box as well as my new text.

Darter02 · August 6, 2013

Jingle Images wrote: »
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;
}

You rock! Thanks!

ColinM · August 6, 2013

Jingle Images wrote: »

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

Works great now!! Tested on Chrome, Firefox & IE on windows and Safari on Mac. All worked great. Thank you!!

ColinM · August 6, 2013

One thing that I just noticed was that now when you hover over any "?" that smugmug has the custom text will come up:

This happens over any question mark that usually has the helpful hints. I'd say fair trad off

brandofamily · August 6, 2013

Jingle Images wrote: »
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;
}

The only way I got back working on my site in FF was to use both the old and new code.
New code left the original content in the box and would not allow me to customize the box at all.

I cannot show you as my site is still not unveiled.

Sir_Eagle · August 6, 2013

ColinM wrote: »

One thing that I just noticed was that now when you hover over any "?" that smugmug has the custom text will come up:

This happens over any question mark that usually has the helpful hints. I'd say fair trad off

Just noticed this myself.

ColinM · August 7, 2013

brandofamily wrote: »

The only way I got back working on my site in FF was to use both the old and new code.
New code left the original content in the box and would not allow me to customize the box at all.

I cannot show you as my site is still not unveiled.

Where on your site are you adding the code? I added a CSS content box to my "entire site" footer then pasted this code in there.

I've tried FF on both PC & Mac and it works for me, but i do have an unveiled site.

brandofamily · August 7, 2013

ColinM wrote: »

Where on your site are you adding the code? I added a CSS content box to my "entire site" footer then pasted this code in there.

I've tried FF on both PC & Mac and it works for me, but i do have an unveiled site.

I added it to the site CSS in the theme.

Moved it to a CSS block below the footer... now it works... makes no sense.

juanheredia · August 7, 2013

brandofamily wrote: »

I added it to the site CSS in the theme.

Moved it to a CSS block below the footer... now it works... makes no sense.

I have to add it at CSS theme level, if not it does not work.

BTW: If we do this, we sacrifice the smugmug tooltips everywhere (as discussed before), so we have to decide, what is more important.

brandofamily · August 7, 2013

juanheredia wrote: »

I have to add it at CSS theme level, if not it does not work.

BTW: If we do this, we sacrifice the smugmug tooltips everywhere (as discussed before), so we have to decide, what is more important.

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.

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.

Use this to change color of box

.sm-user-ui .sm-tooltip {color:red:}

Jingle Images · August 7, 2013

Ok did a update on this here is the new code needed to work they way everyone wants it and the SM help links still work also.

CODE goes in css box on Entire Site

Here is the Code for your own Custom Right Click Message
Insert custom message here in red
I put this in the CSS box for the entire page.
The green text is for you to change how your want it.
Yellow is for if you use the box shadow and border radius to recall what SM has for colors and background and color of Text in some themes
Blue code is not needed if your want the box and layout to stay the same. but the help message will still work.

Code:

/* 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 {
[COLOR="Yellow"]  background-color: #fff;
  border-radius: 10px !important;
  box-shadow: -4px 5px 10px #000 !important;
  color:black !important;[/COLOR]
}

[COLOR="Blue"]/* To recal SM box layout when Logged IN */[/COLOR]
.sm-user-loggedin, .sm-user-ui .sm-tooltip {
  [COLOR="Yellow"]box-shadow: initial;
  border-radius: initial;[/COLOR]
}

ramdisk · August 7, 2013

I didn't work for me, where does the CSS code go?

Jingle Images · August 7, 2013

ramdisk wrote: »

I didn't work for me, where does the CSS code go?

In CSS on Entire Page. Must be NEW SM

You also need to be logged OUT to see your Message

ramdisk · August 7, 2013

Jingle Images wrote: »

In CSS on Entire Page. Must be NEW SM

You also need to be logged OUT to see your Message

Thanks, I'm not logged out and my site is not live yet.
Is there any way to check and see if it works without going live and logging out?

Jingle Images · August 7, 2013

ramdisk wrote: »

I didn't work for me, where does the CSS code go?

ramdisk wrote: »

Thanks, I'm not logged out and my site is not live yet.
Is there any way to check and see if it works without going live and logging out?

If its not live I cant help you out on that.

Sorry

MRudland · August 7, 2013

I input the code but must have done it wrong because nothing came up. wwwauphoto.net someone check and see what I'm doing wrong?

Jingle Images · August 7, 2013

MRudland wrote: »

I input the code but must have done it wrong because nothing came up. wwwauphoto.net someone check and see what I'm doing wrong?

Its not there
Did you save and publish ?
Did you put CSS in on the Entire Site ?

MRudland · August 7, 2013

I think I got it this time.

Jingle Images · August 7, 2013

MRudland wrote: »

I input the code but must have done it wrong because nothing came up. wwwauphoto.net someone check and see what I'm doing wrong?

MRudland wrote: »

I think I got it this time.

ok i updated the code need to change the text color to see it on my end
got to have this in yellow at least for text color

/* Right Click Protection code */
/* Your Message */
.sm-tooltip-floating:after {
content: '[COLOR="Red"]YOUR Custom Message Here[/COLOR]'}


/* 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="Yellow"] color:black !important;[/COLOR]
}

Jingle Images · August 7, 2013

MRudland wrote: »

I think I got it this time.

still not working

need to remove

.sm-user-loggedin, .sm-user-ui .sm-tooltip {
box-shadow: initial;
border-radius: initial;
}

Add this in red to

.sm-user-ui .sm-tooltip {
[COLOR="Red"]color: black;[/COLOR]
}

dallasw · August 7, 2013

To preserve the help text that appears when you hover over a question mark and have a custom message, use this:

/* Custom Right Click message */
.sm-user-ui .sm-right-click-message .sm-tooltip-content {
    display: none;
}
.sm-user-ui .sm-right-click-message:after {
    content: '[COLOR="PaleGreen"]CUSTOM MESSAGE HERE[/COLOR]';
}

Andy · August 7, 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).

IE8 isn't supported. http://help.smugmug.com/customer/portal/articles/93252

Darter02 · August 7, 2013

dallasw wrote: »
To preserve the help text that appears when you hover over a question mark and have a custom message, use this:
/* Custom Right Click message */
.sm-user-ui .sm-right-click-message .sm-tooltip-content {
    display: none;
}
.sm-user-ui .sm-right-click-message:after {
    content: '[COLOR="PaleGreen"]CUSTOM MESSAGE HERE[/COLOR]';
}

When I did this I get both the stock Smugmug message and my own custom one. It also worked on both Chrome & IE.

Darter02 · August 7, 2013

Jingle Images wrote: »

ok i updated the code need to change the text color to see it on my end
got to have this in yellow at least for text color

/* Right Click Protection code */
/* Your Message */
.sm-tooltip-floating:after {
content: '[COLOR="Red"]YOUR Custom Message Here[/COLOR]'}


/* 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="Yellow"] color:black !important;[/COLOR]
}

I'll have to wait until I unveil to see if this works.

Jingle Images · August 7, 2013

Darter02 wrote: »

I'll have to wait until I unveil to see if this works.

It will. I have it working.

dallasw · August 7, 2013

Darter02 wrote: »

When I did this I get both the stock Smugmug message and my own custom one. It also worked on both Chrome & IE.

Hmm, did you get both parts? You need the whole block:

.sm-user-ui .sm-right-click-message .sm-tooltip-content {
  display: none;
}
.sm-user-ui .sm-right-click-message:after {
  content: 'CUSTOM MESSAGE HERE';
}

The first part hides SmugMug's message and the second part adds your own.

Changing the message itself doesn't require any other changes. Adjusting the background color, text color, drop shadow, etc. will.

Jingle Images · August 7, 2013

dallasw wrote: »
Hmm, did you get both parts? You need the whole block:
.sm-user-ui .sm-right-click-message .sm-tooltip-content {
  display: none;
}
.sm-user-ui .sm-right-click-message:after {
  content: 'CUSTOM MESSAGE HERE';
}
The first part hides SmugMug's message and the second part adds your own.

Changing the message itself doesn't require any other changes. Adjusting the background color, text color, drop shadow, etc. will.

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.

einat · August 7, 2013

dallasw wrote: »
To preserve the help text that appears when you hover over a question mark and have a custom message, use this:
/* Custom Right Click message */
.sm-user-ui .sm-right-click-message .sm-tooltip-content {
    display: none;
}
.sm-user-ui .sm-right-click-message:after {
    content: '[COLOR=palegreen]CUSTOM MESSAGE HERE[/COLOR]';
}

Jingle Images wrote: »
Ok did a update on this here is the new code needed to work they way everyone wants it and the SM help links still work also.

CODE goes in css box on Entire Site

Here is the Code for your own Custom Right Click Message
Insert custom message here in red
I put this in the CSS box for the entire page.
The green text is for you to change how your want it.
Yellow is for if you use the box shadow and border radius to recall what SM has for colors and background and color of Text in some themes
Blue code is not needed if your want the box and layout to stay the same. but the help message will still work.

Code:
/* 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 {
[COLOR=yellow] background-color: #fff;[/COLOR]
[COLOR=yellow] border-radius: 10px !important;[/COLOR]
[COLOR=yellow] box-shadow: -4px 5px 10px #000 !important;[/COLOR]
[COLOR=yellow] color:black !important;[/COLOR]
}
 
[COLOR=blue]/* To recal SM box layout when Logged IN */[/COLOR]
.sm-user-loggedin, .sm-user-ui .sm-tooltip {
  [COLOR=yellow]box-shadow: initial;[/COLOR]
[COLOR=yellow] border-radius: initial;[/COLOR]
}

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.

Right Click Protection Code

Comments