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

Sean Diggins February 27, 2012

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

5 answers

1 accepted

1 vote
Answer accepted
Sean Curtis
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
March 6, 2012

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.

Sean Diggins March 7, 2012

Hi David,

That worked! Thanks :)

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

Sean Diggins March 7, 2012

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.

1 vote
Sean Diggins February 28, 2012

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

1 vote
David at David Simpson Apps
Marketplace Partner
Marketplace Partners provide apps and integrations available on the Atlassian Marketplace that extend the power of Atlassian products.
February 27, 2012

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.

JeffJ August 18, 2014

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

0 votes
moxin
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 3, 2013

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

0 votes
Sean Diggins February 27, 2012

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

Suggest an answer

Log in or Sign up to answer