nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Customize Jira with my own css

Joakim Norinder

I would like to customize all pages in Jira completely with my own css files. I have tried using the web resource plugin module but the css files are not placed in the bottom, thus they are overridden by Jira default css files. In some way I would like to override the default Jira css files.

What is the best way to do this? Is it even possible?

Accepted answers

kevinp

I've had pretty good success with this method,

Jira loads a version of jQuery on the page, so I utilize the announcement banner and jQuery to reload the stylesheets...

Alejandro Conde Carrillo

You can also add you CSS directly in the announcement banner like this:

<style type="text/css">
#details-profile-fragment {
display: none;
}
</style>

All comments

unknown

I don't know if this is the best way, but I use a <style> tag inside the Announcement Banner for modifications to the Jira css. I use Firebug to find which classes need to be overriden and I just simply paste the code inside the banner.

Also you can edit the css files located inside the jira installation. But I have never done that.

The "Look and Feel" section is also very useful.

Joakim Norinder

Thanks for your reply! For small changes I guess it's acceptable to use the Announcement Banner. For large changes I would say no. If you modify the Jira css-files I think you open the door to maintenance hell. Imagine merging css changes after an upgrade...

After having thought and searched a bit more the best solution I've found so far is to use the web resource plugin, add <dependency>jira.webresources:global-static</dependency> to the atlassian-plugin.xml, and to take advantage of css specificity.

Any other ideas?

kevinp

I've had pretty good success with this method,

Jira loads a version of jQuery on the page, so I utilize the announcement banner and jQuery to reload the stylesheets...

unknown

Yes, you can also simply use <LINK href="http://jiraserver/includes/my_css_files/mystyle.css" rel="stylesheet" type="text/css"> with your own *.css files

unknown

Yes, you can also simply use

<LINK href="http://jiraserver/includes/my_css_files/mystyle.css" rel="stylesheet" type="text/css">

in the Announcement Banner to link your own *.css files

Sandro Herrmann [Communardo]

I hope I'am not to late for my answer. You can use the CUTE Plugin to style your JIRA or Confluence in a clean and simple way. CSS Javascript and Template Code can be defined and bundeled into extensions with this plugin.

Some example extensions are provided here. You can import them to your system.

Alejandro Conde Carrillo

You can also add you CSS directly in the announcement banner like this:

<style type="text/css">
#details-profile-fragment {
display: none;
}
</style>

Hanae alahcen

hello Miroslav,

i'm also interested by changing the look and feel of JIRA

i inspect every element in firebug to know where can i make my changes

the question is after doing all my changes how can jira recognize that ?

do i have to redeploy JIRA ? if it's so ? how ?

i made a security copy of jira so i can loose nothing

i'll be happy to know how to do all this

thanks for your answers

Hanae alahcen

hi sandro

i would like to try the plug in to show it to my managers

is there a way to install the trial version in juste on instance and not globaly ?

Szilvia Képesi

Hi Sandro, Is it possible that this plugin only available for prod version? We have on demand cloud version and I do not see in the list of avaiable add on.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

jira

jira-development

css