Answers.Body: <p><a href="https://craftcms.stackexchange.com/questions/267/can-a-plugin-add-js-or-css-to-the-control-panel/270#270">Josh's answer</a> is great if you are interested in building your own plugin. But if that's a little much for you, you're still in luck...</p>
  
  <p>You can use these plugins to quickly &amp; easily add CSS and JavaScript to your control panel:</p>
  
  <ul>
  <li><a href="https://github.com/doublesecretagency/craft-cpcss" rel="nofollow noreferrer">Control Panel CSS plugin</a></li>
  <li><a href="https://github.com/doublesecretagency/craft-cpjs" rel="nofollow noreferrer">Control Panel JS plugin</a></li>
  </ul>
  
  <p><strong>Disclaimer:</strong> I wrote both of those plugins, let me know if you run into any issues!</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-18T17:50:26.493Z
Answers.Text: Good shout @Lindsey D!
Answers.UserDisplayName: Josh Angell
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2014-06-18T17:08:22.713Z
Answers.LastActivityDate: 2019-08-05T16:41:48.713Z
Answers.LastEditDate: 2019-08-05T16:41:48.713Z
Answers.UserDisplayName: Lindsey D
Answers.Body: <p>One way to accomplish this is to write some code in the <code>init()</code> function of your root plugin file. So in your example that might look something like:</p>
  
  <pre><code>class MyFunkyPlugin extends BasePlugin
  {
  
    function init() {
  
      // check we have a cp request as we don't want to this js to run anywhere but the cp
      // and while we're at it check for a logged in user as well
      if ( craft()-&gt;request-&gt;isCpRequest() &amp;&amp; craft()-&gt;userSession-&gt;isLoggedIn() )
      {
  
        // the includeJs method lets us add js to the bottom of the page
        craft()-&gt;templates-&gt;includeJs('var Myjs = "foo";');
  
        // the includeCss method will add css in the head
        craft()-&gt;templates-&gt;includeCss('.myFunkyPluginSelector { color: red; }');
  
        // the includeJsResource method will add a js file to the bottom of the page
        craft()-&gt;templates-&gt;includeJsResource('myPlugin/js/app.js');
  
        // the includeCssResource method will add a link in the head
        craft()-&gt;templates-&gt;includeCssResource('myFunkyPlugin/css/style.css');
  
      }
  
    }
  
    // rest of the root plugin file
    ...
  
  }
  </code></pre>
  
  <p>The nice thing about the <code>init()</code> function is it gets run before anything else in your plugin does and it gets run on every request as every installed plugin is initialised on every request.</p>
  
  <p>More detail on the available functions can be found in the <a href="http://buildwithcraft.com/classreference/services/TemplatesService">TemplatesService docs</a>.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-15T09:17:36.950Z
Answers.Text: If you implement the `includeJsResource` or `includeCssResource` method, where would you put the actual resources?
Answers.UserDisplayName: bravokiloecho
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-15T09:30:14.993Z
Answers.Text: Well, if you are doing it in your own plugin then in the `resources` folder in the root of your plugin. So for example `includeJsResource ('myPlugin/js/script.js')` would load `pluginRoot/resources/js/script.js`. See [the docs](http://buildwithcraft.com/docs/plugins/resources) for a more thorough explanation.
Answers.UserDisplayName: Josh Angell
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-15T10:27:07.903Z
Answers.Text: Brilliant, thanks for the super-speedy response
Answers.UserDisplayName: bravokiloecho
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-15T10:39:01.597Z
Answers.Text: Glad I could help :)
Answers.UserDisplayName: Josh Angell
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-06-18T12:23:23.477Z
Answers.LastActivityDate: 2015-04-15T09:31:11.500Z
Answers.LastEditDate: 2015-04-15T09:31:11.500Z
Answers.UserDisplayName: Josh Angell
Body: <p>Say for example, I wanted to add a "Expand/Collapse All" button to Matrix fields.</p>
  
  <p>Is there any way to do this, or is this something more appropriate for a feature request for P&amp;T?</p>
  
Tags: <plugins><control-panel>
Title: Can a plugin add JS or CSS to the control panel?
ThreadText: # Can a plugin add JS or CSS to the control panel?
  
  (Asked by: username_0 on 2014-06-18)
  
  Say for example, I wanted to add a "Expand/Collapse All" button to Matrix fields.
  
  Is there any way to do this, or is this something more appropriate for a feature request for P&T?
  
  **Tags:** plugins, control-panel
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_2 on 2014-06-18. Score: 23 | Accepted answer
  
  One way to accomplish this is to write some code in the `init()` function of your root plugin file. So in your example that might look something like:
  
  ```
  class MyFunkyPlugin extends BasePlugin
  {
  
    function init() {
  
      // check we have a cp request as we don't want to this js to run anywhere but the cp
      // and while we're at it check for a logged in user as well
      if ( craft()->request->isCpRequest() && craft()->userSession->isLoggedIn() )
      {
  
        // the includeJs method lets us add js to the bottom of the page
        craft()->templates->includeJs('var Myjs = "foo";');
  
        // the includeCss method will add css in the head
        craft()->templates->includeCss('.myFunkyPluginSelector { color: red; }');
  
        // the includeJsResource method will add a js file to the bottom of the page
        craft()->templates->includeJsResource('myPlugin/js/app.js');
  
        // the includeCssResource method will add a link in the head
        craft()->templates->includeCssResource('myFunkyPlugin/css/style.css');
  
      }
  
    }
  
    // rest of the root plugin file
    ...
  
  }
  
  ```
  
  The nice thing about the `init()` function is it gets run before anything else in your plugin does and it gets run on every request as every installed plugin is initialised on every request.
  
  More detail on the available functions can be found in the [TemplatesService docs](http://buildwithcraft.com/classreference/services/TemplatesService).
  
  > **Comments:**
  > **username_3**: If you implement the `includeJsResource` or `includeCssResource` method, where would you put the actual resources?  
  > **username_2**: Well, if you are doing it in your own plugin then in the `resources` folder in the root of your plugin. So for example `includeJsResource ('myPlugin/js/script.js')` would load `pluginRoot/resources/js/script.js`. See [the docs](http://buildwithcraft.com/docs/plugins/resources) for a more thorough explanation.  
  > **username_3**: Brilliant, thanks for the super-speedy response  
  > **username_2**: Glad I could help :)  
  
  ---
  
  ### Answer by username_1 on 2014-06-18. Score: 12
  
  [username_2's answer](https://craftcms.stackexchange.com/questions/267/can-a-plugin-add-js-or-css-to-the-control-panel/270#270) is great if you are interested in building your own plugin. But if that's a little much for you, you're still in luck...
  
  You can use these plugins to quickly & easily add CSS and JavaScript to your control panel:
  
  * [Control Panel CSS plugin](https://github.com/doublesecretagency/craft-cpcss)
  * [Control Panel JS plugin](https://github.com/doublesecretagency/craft-cpjs)
  
  **Disclaimer:** I wrote both of those plugins, let me know if you run into any issues!
  
  > **Comments:**
  > **username_2**: Good shout @username_1!  
  
  ---
  
  