Adding a CSS class to a web item

[Christian Selbrede]

I'm adding a section of links to the top navigation bar (system.top.navigation.bar)

Is there any way I can assign to my <web-item>s a class, so I can style them with CSS?

How would I add the CSS file, so that it will work on the navbar everywhere it's requested?

[Joe Clark · Accepted solution]

In your web-item's definition in the atlassian-plugin.xml, you can specify an additional XML attribute, styleClass, to inject additional CSS classes to the web-item when it is rendered.

For example:

<web-item key="my-web-item" section="system.admin/configuration" styleClass="my-css-class" weight="10">
  <label key="com.example.plugin.link.title"/>
</web-item>

I'm not 100% certain, but I'm pretty sure this is only available in JIRA 5.0+ onwards.

[Joe Clark]

Ah, whoops! Sorry about that :-) Nice work working your way to the answer despite my bad instructions.

I'm not sure why it's not documented - possibly because it's not available in all situations (ie. the WebItemRenderer may choose to omit the styleClass in some circumstances). However, even with that in mind, it still would be beneficial to at least have it listed in the docs as an option... I'll chase this up with the docs team.

[Christian Selbrede]

Hurray!! Thank you very much! Only thing is, it's a <styleClass>my-css-class</styleClass> element of <web-item>, not an attribute. It worked great though!

Any idea why this is not documented?

[Joe Clark]

styleClass now added to the documentation here - https://developer.atlassian.com/display/CONFDEV/Web+Item+Plugin+Module