Custom CSS inside gadget on the dashboard

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?

2 answers

1 accepted

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

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).

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 :)

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!

Suggest an answer

Log in or Join to answer
Community showcase
Sarah Schuster
Posted Jan 29, 2018 in Jira

What are common themes you've seen across successful & failed Jira Software implementations?

Hey everyone! My name is Sarah Schuster, and I'm a Customer Success Manager in Atlassian specializing in Jira Software Cloud. Over the next few weeks I will be posting discussion topics (8 total) to ...

2,864 views 12 18
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you
Atlassian Team Tour

Join us on the Team Tour

We're bringing product updates and pro tips on teamwork to ten cities around the world.

Save your spot