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 Sign up to answer
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Julia Dillon
Posted Tuesday in Jira

Tell us how your team runs on Jira!

Hey Atlassian Community! Today we are launching a bunch of customer stories about the amazing work teams, like Dropbox and Twilio, are doing with Jira. You can check out the stories here. The thi...

202 views 1 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