We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 2369
    • 44 Posts
    This is probably a dumb question but is there a way to highlight the editable tv area in the frontend for Quickedit so that content editors are able to view exactly which area they will be editing? I’ve scoured the forums, docs and wiki but can’t find any info on this. Any assist would be greatly appreciated.
      • 27147
      • 53 Posts
      There is some support for this in QuickEdit; 99% of the work is done. Here’s my 1% that switches it on.

      In assets/modules/quick_edit/javascript/QuickEdit.js I set a mouseover event to change the class of the parent block.

      Replacing line 60:
          link.setStyle('display','block');

      with:
          link.setStyle('display','block');
          link.onmouseover=function() {
           link.parentNode.className += " QE_Parent";
          }
          link.onmouseout=function() {
           link.parentNode.className = link.parentNode.className.replace("QE_Parent", "");
          }


      In assets/modules/quick_edit/styles/toolbar.css I set a background-color for the class, and as you can see, background-image is already there.

      Replacing line 117:
      a.QE_Link {

      with:
      a.QE_Link {
      z-index: 900;


      Replacing line 136:
      .QE_Parent {
      background-image: url(../images/parent_bg.gif) !important;
      background-repeat: repeat !important;

      with:
      .QE_Parent {
      background-image: url(../images/parent_bg.gif) !important;
      background-repeat: repeat !important;
      background-color: #f8fff8 !important;


      I find the onmouseover to be the clearest method but if your blocks don’t nest or overlap you might prefer it static. Of course, this only works when you’re showing embedded buttons in the page.
        • 2369
        • 44 Posts
        Been away from the posts for awhile... thanks for the info. Very cool! smiley