Right Click Protection Code

Jingle ImagesJingle Images Registered Users Posts: 212 Major grins
edited March 18, 2014 in SmugMug Customization
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]
«1345

Comments

  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited 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-ForceG-Force Registered Users Posts: 21 Big grins
    edited 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 ImagesJingle Images Registered Users Posts: 212 Major grins
    edited 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 AliceaPedro Alicea Registered Users Posts: 72 Big grins
    edited August 5, 2013
    Disregard. My buttons gallery had rightclick protection off.

    And this works like a charm. Thanks!!!
    Pedro Alicea
    "Taking One Shot at a Time"
    [url]Http://PedroAlicea.smugmug.com[/url]
    [url]Http://www.PedroAlicea.com[/url]
  • Jingle ImagesJingle Images Registered Users Posts: 212 Major grins
    edited August 5, 2013
    Disregard. My buttons gallery had rightclick protection off.

    And this works like a charm. Thanks!!!

    Ok.


    www.jingleimages.com
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited 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...
  • juanherediajuanheredia Registered Users Posts: 345 Major grins
    edited August 6, 2013
    Great tip. Thanks for sharing.
  • Jingle ImagesJingle Images Registered Users Posts: 212 Major grins
    edited 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.
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited 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.";
    
  • RKnechtRKnecht Registered Users Posts: 366 Major grins
    edited August 6, 2013
    Thanks for this code. Customizing the new site is so much faster/easier than before.
    A few Nikon bodies and some fast Nikon glass

    www.richknechtphotography.com
  • TontoTonto Registered Users Posts: 30 Big grins
    edited August 6, 2013
    Thanks Jingle that was really helpful
  • juanherediajuanheredia Registered Users Posts: 345 Major grins
    edited 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 ImagesJingle Images Registered Users Posts: 212 Major grins
    edited 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.
  • dragandjordjevicdragandjordjevic Registered Users Posts: 188 Major grins
    edited August 6, 2013
    Thanks, solved 1 of my issues :)
  • DreadnoteDreadnote Registered Users Posts: 634 Major grins
    edited 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.
    Sports, Dance, Portraits, Events... www.jasonhowardking.com
  • Jingle ImagesJingle Images Registered Users Posts: 212 Major grins
    edited 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.
  • DreadnoteDreadnote Registered Users Posts: 634 Major grins
    edited August 6, 2013
    Are you using IE 7,8,9 ???

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

    Safari, Chrome or Firefox
    Sports, Dance, Portraits, Events... www.jasonhowardking.com
  • ColinMColinM Registered Users Posts: 14 Big grins
    edited 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
  • JSS44JSS44 Registered Users Posts: 46 Big grins
    edited August 6, 2013
    This worked for me, thank you!
  • Jingle ImagesJingle Images Registered Users Posts: 212 Major grins
    edited 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.
  • LouBLouB Registered Users Posts: 39 Big grins
    edited 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 ImagesJingle Images Registered Users Posts: 212 Major grins
    edited 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];
    
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited 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 ImagesJingle Images Registered Users Posts: 212 Major grins
    edited 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.
  • ColinMColinM Registered Users Posts: 14 Big grins
    edited 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.
  • jbenayasjbenayas Registered Users Posts: 18 Big grins
    edited 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 ImagesJingle Images Registered Users Posts: 212 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;
    }
    
  • Jingle ImagesJingle Images Registered Users Posts: 212 Major grins
    edited 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.
  • DreadnoteDreadnote Registered Users Posts: 634 Major grins
    edited August 6, 2013
    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"):
    Sports, Dance, Portraits, Events... www.jasonhowardking.com
  • Jingle ImagesJingle Images Registered Users Posts: 212 Major grins
    edited 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.
Sign In or Register to comment.