Custom CSS inside gadget on the dashboard

[Błażej O_]

Hello.

How can I change (add) css used inside the gadgets?

For instance, I have a Filter Results gadget on the dashboard. I wish to change a style of one of the columns inside the gadget. On page load I add my own CSS file using jQuery. Unfortunatelly gadget is in fact an iframe, thus my style is not applied to it's content. Where do I have to place my css file or jQuery/javascript script to apply a custom style to the gadget content?

[HenriqueA · Accepted solution]

Hi Blazej,

I've found the place that you can change the CSS style of the Gadget "Filter Results". All of the embedded plugins on JIRA are inside this file:

{ Path to your "JIRA Installation Directory" }/webapp/WEB-INF/classes/atlassian-bundled-plugins.zip

And inside this zip file there is one jar file named:

jira-gadgets-plugin-6.1.3.jar (or the another version that you have)

This jar file has the configuration of all embedded gadget, which you can manipulate the files that you need and save them.

I've tested changing this file: "/style/common.less" and that worked perfectly

In order to make the changes directly on the files, I suggest that you follow these steps:

- Stop your JIRA instance = to make sure that the file will not be overwrote on the process

- Unzip the "atlassian-bundled-plugins.zip" file

- Unzip the "jira-gadgets-plugin-6.1.3.jar", the file name may change in another version.

Just a heads up: I really recommend that you unzip the files with 7-zip (for windows), Linux's unzip or GNU tar (for linux) - to avoid extracting/compacting problems

- Modify the files that you need

The exact XML file of "Filter Results Gadget" is on /gadgets/filter-results-gadget.xml

- Recompress the files (First the jar file and after the zip file with the jar file inside), making sure that it doesn't has duplicated files

- Replace the old zip with the new one - I would recommend to make backup of the old one.

- Start your JIRA instance

On the other hand, These changes can be lost if you update your JIRA because this procedure is unsupported.

So here goes another idea: Create a plugin based on gadget that you wish. Here is the link to the documentation about how to create a JIRA plugin:

https://developer.atlassian.com/display/JIRADEV/Concepts

If any doubt remains, please let me know!

Best Regards,

Henrique Lechner

[Błażej O_]

Wow, that's a highly detailed answer! I really appreciate all the work you must have gone through to provide such precise description.

I will test it on the test instance asap, and will get back to you if it works for me too.

Update is not a concern in our instance, because we're still stuck on 5.2.5 (because of some dumb plug-ins that we were using as a free ones, and they became payed in jira 6).

[Błażej O_]

It took me some time to test your solution.

In the beginning I stumbled upon some problems with Jira not staring after change (info in logs about inability to launch certain plugins). I probably corrupted jar or zip file while unpacking/repacking (well, exactly what you've said to be careful about ;) ). Afterwards I've done it again, this time properly - used 7zip to unpack ZIP file and Total Commander to rename jar to zip and swap .less files inside. And it worked like a charm!

I'm really grateful for the excellent and detailed walkthrough you have provided :)

[quentin Castel]

as it may help someone else, I finally solved the problem of CSS I had with my custom plugin by adding a context into my web resource. See https://jirasupport.wordpress.com/2015/10/22/create-a-new-plugin-add-on-in-jira-to-set-custom-css-and-javascript-js-in-all-pages/

I added 

<context>atl.general</context>

and it works well!