Is there a hook to put stylesheet and/or JS inside iframes (thickbox or tinyMCE) in admin area

2 Views

I’m working on my admin area theme and I wanted to make some modifications on the way the thickbox and tinyMCE looks. I could make most of the changes through adding custom stylesheets and JS to my admin area using wp_enqueue_script() and wp_enqueue_style(), but I have had a hard time making some others changes. This is because the iframes containing the elements are either not reachable by my own styles or have in their head some other stylesheet and JS that override mine.

I more or less managed to bypass that using some JavaScript and the CSS !important declaration but I was wondering if there was any hooks that would allow me to call wp_enqueue_script() and wp_enqueue_style() to put my scripts inside those iframes headers? Some hook similar to admin_head or admin_init but for the thickbox or iframes?

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. You could over-ride the CSS by using the admin_print_scripts admin_head-media-upload-popup and add css to match your needs. This can be done via the functions.php file or by creating a plugin. Here is the code in a plugin format to begin adding style:

    <?php
/*
Plugin Name: Some Name
Description: Custom Thickbox Styles
*/
add_action('admin_head-media-upload-popup', 'custom_tb_styles');
function custom_tb_styles() {
  ?>
  <style>
    #TB_window {
    background:silver;
    }
    /*
    YOUR CUSTOM STYLES HERE
    */
  </style>
  <?php
  }

    If you’re adding the code to your functions.php file you could just add this to the file:

    <?php
add_action('admin_head-media-upload-popup', 'custom_tb_styles');
function custom_tb_styles() {
  ?>
  <style>
    #TB_window {
    background:silver;
    }
    /*
    YOUR CUSTOM STYLES HERE
    */
  </style>
  <?php
  }

    Another option is to unregister the Thickbox Styles and completely add your own.

    _Edited according to the comment by ungestaltbar, which points to the correct hook to print the style/script only in the thickbox iframe. The action hooks used earlier (admin_print_scripts & admin_print_styles) will be called in all administrative pages.

  2. For TinyMCE, there is a specific function add_editor_style() for enqueuing a stylesheet in the visual editor. If you call that in functions.php you just put editor-style.css in your theme folder and you’re good to go. Otherwise, the function accepts an arg of a custom stylesheet name.