Right Click Protection Code

245

Comments

  • raebrownraebrown Registered Users Posts: 273 Major grins
    edited August 6, 2013
    Try the new code I put up.

    Working here, Firefox, Chrome & IE. Thanks!
    Rae
    Tickled Pixels

    Tickled Pixels Blog: "
    A walk in Gamla stan, the old town of Stockholm"
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited 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;
    }
    

    At least in FF (not unveiled) the original text is in the box as well as my new text.
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited 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;
    }
    

    You rock! Thanks!
  • ColinMColinM Registered Users Posts: 14 Big grins
    edited August 6, 2013
    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!!
  • ColinMColinM Registered Users Posts: 14 Big grins
    edited 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:

    bkk5.jpg

    This happens over any question mark that usually has the helpful hints. I'd say fair trad off :)
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited 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;
    }
    

    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_EagleSir_Eagle Registered Users Posts: 137 Major grins
    edited 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:

    bkk5.jpg

    This happens over any question mark that usually has the helpful hints. I'd say fair trad off :)
    Just noticed this myself.
  • ColinMColinM Registered Users Posts: 14 Big grins
    edited August 7, 2013
    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.
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited 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.
  • juanherediajuanheredia Registered Users Posts: 345 Major grins
    edited August 7, 2013
    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.
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited August 7, 2013
    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 ImagesJingle Images Registered Users Posts: 212 Major grins
    edited August 7, 2013
    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 ImagesJingle Images Registered Users Posts: 212 Major grins
    edited 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]
    }
    
  • ramdiskramdisk Registered Users Posts: 189 Major grins
    edited August 7, 2013
    I didn't work for me, where does the CSS code go?
    Nikon D70
    Nikkor 18-70mm
    Nikkor 70-300mm

    My Gallery

    Ahh! The joy of not much of anything.............
  • Jingle ImagesJingle Images Registered Users Posts: 212 Major grins
    edited 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
  • ramdiskramdisk Registered Users Posts: 189 Major grins
    edited August 7, 2013
    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?
    Nikon D70
    Nikkor 18-70mm
    Nikkor 70-300mm

    My Gallery

    Ahh! The joy of not much of anything.............
  • Jingle ImagesJingle Images Registered Users Posts: 212 Major grins
    edited 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
  • MRudlandMRudland Registered Users Posts: 285 Major grins
    edited 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 ImagesJingle Images Registered Users Posts: 212 Major grins
    edited 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 ?
  • MRudlandMRudland Registered Users Posts: 285 Major grins
    edited August 7, 2013
    I think I got it this time.
  • Jingle ImagesJingle Images Registered Users Posts: 212 Major grins
    edited 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 ImagesJingle Images Registered Users Posts: 212 Major grins
    edited 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]
    }
    
  • dallaswdallasw Registered Users Posts: 37 Big grins
    edited 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]';
    }
    
  • AndyAndy Registered Users Posts: 50,016 Major grins
    edited 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
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited 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.
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited August 7, 2013
    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 ImagesJingle Images Registered Users Posts: 212 Major grins
    edited August 7, 2013
    Darter02 wrote: »
    I'll have to wait until I unveil to see if this works.

    It will. I have it working.
  • dallaswdallasw Registered Users Posts: 37 Big grins
    edited 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 ImagesJingle Images Registered Users Posts: 212 Major grins
    edited 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.
  • einateinat Registered Users Posts: 193 Major grins
    edited 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]';
    }
    
    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.
Sign In or Register to comment.