---

This script will hide the annoying admin "Edit" button that appears in every content box.

If you have a paid site, add the script to your footer to cover every page on your site. If you have a free site, you'll need to add this script to a content box near the bottom of the page (just one) on every page of your site to have it work.

I added a variable set to either true or false in the script to make it easier to turn the function on and off. You can still edit any content box from the control panel:

Control Panel > Site Pages > Click the desired tab > "Edit Content" of the content box

Also if you already have the ".hide" class defined in your CSS, there is no need to add another.

Footer or Content Box

<style type="text/css">
.hide { display: none; }
</style>
<script type="text/javascript">
function hideEditButtons() {
// true = hide all edit buttons
// false = show all edit buttons
var hideButtons = true;

// Don't change anything below!
// *****************************
if (!hideButtons) return;
x = document.getElementsByTagName("input");
 try {
  for (j=0; j < x.length; j++) {
   if( x[j].value == "Edit" ) {
    x[j].className = "hide";
   }
  }
 } catch (err) {}
}
setTimeout("hideEditButtons();", 1);
</script>

Edit: Moved the CSS to the area above the javascript... so people don't have to deal with a Custom StyleSheet.

I have mine added under "Footer" under the "Advanced Style Settings". Are you sure you enabled it?

Also, is it only hiding the left side columns or not hiding any at all? I had this problem when I put the code into the header and the page had a long load time. If you have a large amount of information on your page, try increasing the timer to 2 or 3 (this is in seconds):

setTimeout("hideEditButtons();", 2);

Other than that, I can't think of why it wouldn't work. I've tested it in both Firefox and Internet Explorer.

Yeah you need to add the CSS, it might be better to just add it in the footer with the javascript. Just copy everything below into the footer, I'll edit the original post.

<style type="text/css">
.hide { display: none; }
</style>
<script type="text/javascript">
function hideEditButtons() {
// true = hide all edit buttons
// false = show all edit buttons
var hideButtons = true;

// Don't change anything below!
// *****************************
if (!hideButtons) return;
x = document.getElementsByTagName("input");
 try {
  for (j=0; j < x.length; j++) {
   if( x[j].value == "Edit" ) {
    x[j].className = "hide";
   }
  }
 } catch (err) {}
}
setTimeout("hideEditButtons();", 1);
</script>

It's working great for me now thanks!  I'm not sure what I botched before.

A question for you, Mottie:

Is it possible to hide all the Edits but leave some visible? Like can we have the Calendar Edit button stay visible?