title: Change border colors of TinyMCE on focus and blur
body: <p>I'm using jQuery with TinyMCE. I am trying to get the border colors to change when the TinyMCE editor is in focus, and then on a blur, change back.</p>
  
  <p>In the ui.css, I've added/changed these:</p>
  
  <pre><code>.defaultSkin table.mceLayout {border:0; border-left:1px solid #93a6e1; border-right:1px solid #93a6e1;}
  .defaultSkin table.mceLayout tr.mceFirst td {border-top:1px solid #93a6e1;}
  .defaultSkin table.mceLayout tr.mceLast td {border-bottom:1px solid #93a6e1;}
  </code></pre>
  
  <p>I managed to arrive at this for the init script:</p>
  
  <pre><code>$().ready(function() {
  
      function tinymce_focus(){
          $('.defaultSkin table.mceLayout').css({'border-color' : '#6478D7'});
          $('.defaultSkin table.mceLayout tr.mceFirst td').css({'border-top-color' : '#6478D7'});
          $('.defaultSkin table.mceLayout tr.mceLast td').css({'border-bottom-color' : '#6478D7'});
      }
  
      function tinymce_blur(){
          $('.defaultSkin table.mceLayout').css({'border-color' : '#93a6e1'});
          $('.defaultSkin table.mceLayout tr.mceFirst td').css({'border-top-color' : '#93a6e1'});
          $('.defaultSkin table.mceLayout tr.mceLast td').css({'border-bottom-color' : '#93a6e1'});
      }
  
      $('textarea.tinymce').tinymce({
          script_url : 'JS/tinymce/tiny_mce.js',
          theme : "advanced",
          mode : "exact",
            theme : "advanced",
            invalid_elements : "b,i,iframe,font,input,textarea,select,button,form,fieldset,legend,script,noscript,object,embed,table,img,a,h1,h2,h3,h4,h5,h6",
  
            //theme options 
            theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,selectall,|,undo,redo,|,cleanup,removeformat,|", 
            theme_advanced_buttons2 : "bold,italic,underline,|,bullist,numlist,|,forecolor,backcolor,|", 
            theme_advanced_buttons3 : "", 
            theme_advanced_buttons4 : "", 
            theme_advanced_toolbar_location : "top", 
            theme_advanced_toolbar_align : "left", 
            theme_advanced_statusbar_location : "none", 
            theme_advanced_resizing : false,
  
            //plugins
            plugins : "inlinepopups,paste",
            dialog_type : "modal",
          paste_auto_cleanup_on_paste : true,
  
  
          setup : function(ed) {
                ed.onClick.add(function(ed, evt) {
                    tinymce_focus(); 
                });
  
             }
  
  
  
      });    
  
  
  });
  </code></pre>
  
  <p>...but this (onclick, change, border color) is the only thing I have managed to get working. All my other attempts either prevented TinyMCE from loading or simply did nothing.  I've browsed through the TinyMCE wiki pages and on their forums, but haven't been able to piece together a full picture from the small nuggets of information scattered around.</p>
  
  <p>Is there actually a way to do this? Is it something simple that I'm just overlooking, or is it actually something really complex to implement?</p>