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; } } }

JIRA CSS - font family, font color in Activity Stream and dashboard gadgets

Sean Diggins

Windows Server 2008R2, JIRA 5 standalone.

I'm not a java developer, so I dont fully grok all of JIRAs internal dependencies (but I do know how to edit the contents of runtime jar archives). For the last year I've really wanted to change the font properties for the text content within the Activity Stream gadget, the Projects gadget and the Favourite Filters gadget.

I know where the main css files are located and I've been successful in editing css in all the other sections of JIRA - I'm reasonably adept at using Firebug and identifying what needs editing, but of course this is made harder when css files are generated at runtime.

Our company uses "Trebuchet MS" with specific branding colors. So I've managed to get most of JIRA to conform to our style guide, except for text content within the three bundled gadgets I've listed. No matter what I do, the font family is stuck at "Arial, Sans Serif" and the font colors are stuck at JIRA defaults.

I've GREP'd and S&R'd to no avail, including editing plugin css with the bundled plugins archive (I've followed correct procedure for this)

In my opinion, the Activity Stream is pretty much unreadable when Arial is the font, so I dont only want to change the font to suit our branding - I want the Activity Stream to be easy to read.

I was hoping this would be easier with JIRA 5, but it seems this aspect of JIRA's css hasnt been improved......

Anyone know how?

Thanks!

Sean

Accepted answers

Sean Curtis

Hi Sean,

I believe those styles are being inserted via the actual Gadgets framework (Shindig) which you (and us) can't change. If you're already changing styles by modifying CSS files directly in the JIRA source code is add this line to com.atlassian.jira.gadgets:common.css

body,td,div,span,p,blockquote{font-family:"Trebuchet MS", arial,FreeSans,Helvetica,sans-serif;}

The problem is that Shindig adds a style block to the top of the <head> which sets fonts for more than just the body. You need to ensure you match their selector exactly, rather than just adding the fonts to body.

Hope this helps

P.S. I added the blockquote selector in because I noticed Activity Streams has styles for those too.

All comments

Sean Diggins

I should add - if there a way to do this via the announcement banner, please suggest! Nothing I've tried in the announcement banner works in the specifc sections I've identified in my post above

David at David Simpson Apps

Try something like this in the Announcement Banner:

&lt;script&gt;
// change these selectors if not specific enough
selectors = ['body','td','div','p','span','div.gadget'];


// N.B. ensure that the document and iframes have fully loaded first

AJS.toInit(function(){

  // fetch the iframes once only
  $iframes = AJS.$("iframe");

  AJS.$.each(selectors, function(i,j){
    $iframes.contents().find(j).css({  
      'background': 'hotpink',  
      'font-family': 'courier',
      'font-size': '20px'
    });
  });
});
&lt;/script&gt;

It works nicely in Firebug, but is untested elsewhere.

Sean Diggins

Thanks David, but I might need a bit of extra guidance - I'm not a developer. Inserting the script you provided does nothing, as far as I can tell. Presumably you are suggesting I edit the script to suit, but I dont understand the syntax.

It continues to astonish me that JIRA is so limited with regard to CSS. Confluence is far superior. I just dont get it...

The "arial, sans-serif" font family seems to be inherited from:

/plugins/servlet/gadgets/ifr?container=atlassian&mid=10030&country=AU&lang=en&view=default&view-params=%7B%22writable%22%3A%22false%22%7D&st=atlassian%3AqGzV6n4JBx5il708MKXJ2e9Pr4Q2xqs15Zz%2FJYOsEBW9KrKtvEm768H%2BOVvHJEb%2BSlwLehMo9qaFl0DUbIqeWVLp%2FrFkDhMC8sZH1M6aARfq5TxeMO8hJuac%2FgjOzkefVUbBOQoRG5Uw1o%2FEbTfTmT5ueZ2IR4DAtjTeszYn%2FE%2BZUmUebgy%2F9jILmZYL6jsLjWa%2BdeAyT%2F3%2B15dW%2B%2FbXBsqm%2FWLK28SnkvrMFGFzUcTEoauVZ7XxUMpkKASWxw7x7wMl4pSMG7Ag8433UROt3GBgjyE%3D&up_isConfigured=true&up_refresh=15&up_projectsOrCategories=allprojects&up_viewType=collapsed&up_cols=three-col&url=http%3A%2F%2F10.0.0.5%3A8080%2Frest%2Fgadgets%2F1.0%2Fg%2Fcom.atlassian.jira.gadgets%3Aproject-gadget%2Fgadgets%2Fproject-gadget.xml&libs=auth-refresh#rpctoken=442242

Beats me where that servlet (?) derives the font family....

Sean

Sean Curtis

Hi Sean,

body,td,div,span,p,blockquote{font-family:"Trebuchet MS", arial,FreeSans,Helvetica,sans-serif;}

Hope this helps

P.S. I added the blockquote selector in because I noticed Activity Streams has styles for those too.

Sean Diggins

Hi David,

That worked! Thanks

Now I have to convince Atlassian to make this easier....

Sean Diggins

I should add - David was indirectly referring to the common.css file located within jira-gadgets-plugin-5.0\style. The jira-gadgets-plugin is packaged within atlassian-bundled-plugins.zip

JIRA\atlassian-jira\WEB-INF\classes\atlassian-bundled-plugins.zip

Changes to contents of the bundled files require restart of JIRA and re-doing the edit after each JIRA upgrade.

moxin

I am trying JIRA6, the System dashboard's gadget titles are too big, anybody know a workaround to make them smaller again.

unknown

I'm with Diggo, i can't figure out how to make this work.

Welcome!

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

Quick Links

Find more posts tagged with

jira

css

gadget

font