How to add your own CSS for customizing JIRA look and feel

Submitted by ravisagar on Tue, 10/07/2014 - 21:02

JIRA comes with an in built feature to change the colors of various elements, you can also upload your own logo on top and use the colors that are standard in your organization. Though sometimes changing the colors might not be sufficient. You may want to change the size of regions, or giving extra padding at certain locations. How would you do that. There are certain add-ons that you can use to install various theme that can change the look and feel completely but I prefer to have my own style.

It is possible to insert your own CSS file and override the default look and feel.

1. Just go to your Announcement Banner section and insert the following code.



2. Basically we are inserting JIRA to insert our own custom CSS file that will be applied across the instance. The CSS file must be store at the following location.


Atlassian\JIRA\atlassian-jira\includes\my_css_files\mystyle.css

Now whatever you write in this css file will be applied to the JIRA instance. You can change the background color, add padding on left and right side. You now have the full control over the look and feel and may be try to make JIRA look like a website. I never tried but may be it is possible to have media queries inside the file and make your JIRA responsive.

The only catch is that the moment you upgrade your JIRA just make sure that you keep track of this file and verify whether it still exists or not.

Hope this little trick will help you.