Inject CSS and JS files and code into Panels, Mini-Panels and Panels Everywhere.

This module allows developers to inject CSS and JS files and code into a page based on Panels or into a block based on Mini Panels. Also this module is useful when you building a site theme using Panels Everywhere page template.

Advantages:

  • you don't need to push all CSS code into "style.css" file and all JS code into "script.js" file
  • you don't need to add CSS and JS files using theme ".info" file
  • you don't need to inject files and code using drupal_add_css() and drupal_add_js() using template.php or custom module
  • you can inject CSS and JS files and code into pages based on Panels
  • you can inject CSS and JS files and code into blocks based on Mini Panels
  • you can inject CSS and JS files and code into Panels Everywhere page template
  • you can use different types of placeholders to enter path to CSS or JS files instead of full path
  • you can use jQuery and document.ready wrappers for JS code field
 

How to Inject Files:

  • using "CSS & JS" tab under Page Manager page (Structure -> Pages) when you configuring a page based on Panels
  • using ctools content types such as "CSS files", "CSS code", "JS files", "JS code" under "Page elements" tab when you adding new content to Panels or Mini-Panels
 

How to Use:

There are two textareas for CSS and JS files and two textareas for CSS and JS code accordingly. For files fields enter one file per line.
You can use "[module-{module_name}]" or "[theme-{theme_name}]" placeholders to get path to module/theme. You can use "[theme]" placeholder to get path to current page theme.

Placeholder Examples:

  • [theme]/css/careers.css - path to current page theme
  • [theme-zen]/js/careers.js - path to "Zen" theme
  • [module-views]/views.css - path to "Views" module

 

Project Information

Downloads