Community Documentation

How to alter the overlay

Last updated March 9, 2011. Created by altrugon on March 9, 2011.
Log in to edit this page.

The following example shows how to modify the overlay when a specific node type (test) is displayed inside the overlay. The script re-size the overlay to 450px wide and also hide some unwanted items.

If you want to alter all the layouts no matter what, then overlay.tpl.php would be a better choice.

Declare your hook:

function mymodule_overlay_child_initialize() {
  // Add our custom JavaScript.
  drupal_add_js(drupal_get_path('module', 'mymodule') . '/overlay-child.js');
}

Add the code to your JavaScript file:

(function ($) {

  // Adjust the overlay dimensions.
  Drupal.behaviors.myModule = {
   
    attach: function (context) {
      $('#overlay:not(.mymodule-adjusted)', context).each(function() {
        var $test = $(this).find('.node-type-test');
       
        if ($test.length){
          // adjust the overlay
          $(this).css({
            'width'     : '450px',
            'min-width' : '450px'
          });
           
          $('.add-or-remove-shortcuts', this).hide();  // hide "add short-cut" button
          $('#branding', this).hide();  // hide branding container
        } 
      }).addClass('mymodule-adjusted');
    }
   
  };

})(jQuery);
nobody click here