Is there any way to change the design of stash and bamboo?

Scott Molinari January 15, 2014

I'd like to carry over the few small changes (like favicon, logo and simple header color changes) so our corporate identity is consitent across our development system.

Is there a way to make these small changes to stash and bamboo?

Scott

5 answers

1 accepted

0 votes
Answer accepted
Scott Molinari January 18, 2014

I've gotten this solved. As suggested by Charles, I installed the SDKs for Bamboo and Stash and basically created a plug-in which injects an "additionalheader.css" file into Bamboo and Stash using "atl.general" and "atl.admin". I had to use "!important" throughout the CSS code to get the different CSS to change the design. It isn't pretty, but it works and now we have our CI nicely placed across the whole development system. It actually looks pretty damn good with the standard UI design.;-)

One quirk is happening though. The add-on management section of Bamboo is still the old style and won't change. That isn't too bad, since only admins will be seeing it, but still, is there possibly a different "atl." for this area of the admin section or is this maybe a bug with the atl.admin override?

Scott

Jimmy P February 24, 2014

Scott, mind to share how you get the plug-in working to add additional CSS? Thanks!

Dana Cleveland
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.
February 27, 2014

I would be interested in this as well

Jimmy Petrus February 28, 2014

Thanks, I got it working!

If you are not familiar with Java -- like me -- it might took a while for you to learn and familiarize with the Java development system. But, Atlassian SDK makes it pretty easy.

You can easily create a plugin skeleton using a command line where it provides you an empty CSS and JS. You can then simply edit the CSS to include your own styles. Then edit the plugin.xml definition by including the two additional contexts as Scott explained above. Finally, with a command line (atlas-package), it will compile everything and produce a JAR file that you can install to your Bamboo instance.

Hope this helps!

Scott Molinari February 28, 2014

Hi,

It is a pita, but it is possible to change the L&F in Bamboo and Stash. You'll need to create a plug-in for each with the docus Charles listed two posts below. Sorry, but I don't remember the exact steps any more. It was basically install the SDK, create the plug-in to call the additionalheader.css file with the atl.general and alt.admin contexts. In the css file, everything must use the !important css overide. Then install the plug-in in bamboo. Wash, rinse, repeat for Stash. I think to get the favicon working I just replace them, wherever I found one in the package and restarted the two applications.

Here are some images, to show the plug-in works nicely too.

Bamboo

Stash

Scott



HEnri January 2, 2015

The universal plugin manager runs under it's own context, upm. So besides atl.general and atl.admin, also use context upm. Thiss will also make the plugin admin page use your branding.

X August 17, 2015

Here HEnri gave the detailed step-by-step method from getting the sdk to uploading your plugin into bamboo : https://answers.atlassian.com/questions/251649/answers/11968518

1 vote
HEnri January 2, 2015

To create your own style plugin on Ubuntu:

1) install atlassian bamboo SDK:

sudo sh -c 'echo "deb https://sdkrepo.atlassian.com/debian/ stable contrib" >>/etc/apt/sources.list'
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys B07804338C015B73
sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install atlassian-plugin-sdk

2) create a folder for your plugin

3) switch to that folder:

atlas-create-bamboo-plugin 

as groupId use com.atlassian.bamboo.plugins, as artifactId your plugin name ie myplugin. as package use com.atlassian.bamboo.plugins.myplugin. When it asks  'Y' enter y. 

4) the above will have created a directory 'myplugin'. edit the myplugin/src/main/resources/atlassian-plugin.xml file. Copy/paste the already present web resource two times, and change the context for the resulting three web resources to atl.general, atl.admin and upm respectively. Also change their key attributes to be unique. You can remove the 'component' section.

5) edit the myplugin/src/main/resources/myplugin.properties file and change the plugin name to your liking

6) edit the myplugin/pom.xml file and change the Organization data to your liking

Now after you have done this, the basics are there. All you need to do now is to edit the myplugin/src/main/resources/css/myplugin.css file and insert your css there. Use "!important" for everything.

Also you can insert javascript in myplugin/src/main/resources/js/myplugin.js.

Once your satisfied with css and js, switch to the myplugin folder and do

atlas-clean;atlas-package

this will create a 'target' folder, containing a .jar file for your plugin. You can upload this to your bamboo instance. After installing, it might be necessary to clear browser cache end re-login to see changes.

X August 17, 2015

Thanks a bunch @HEnri for this step-by-step ;) ! time-saver ! I'll give you Atlassian Gold if I could !

Brian P. Hinz October 1, 2018

I know this thread is pretty old, but does anyone know if this method still works with current releases (ie: 6.6.x) of Bamboo? I've been chasing my tail for several days now and simply can't get my custom js/css added to the header section of any pages within Bamboo.

1 vote
jpoh
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
October 20, 2014

Hi Scott,

It looks like you've already have a custom plugin doing what you need, but just to let you know, the Stash Look and Feel plugin has been released and can be downloaded from the Atlassian Marketplace, which lets you upload your own company logo that replaces the Stash logo in the header, and allows customisation of the header and 'accent' colours. It doesn't support changing the favicon just yet but there's an open feature request for it.

1 vote
cofarrell
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.
January 15, 2014

Hi Scott,

There isn't an official way of doing this.

You can definitely create a plugin that injects your own CSS/JS into each page and overrides the defaults. The only thing to keep in mind is that we don't consider the HTML or CSS that you would need to hijack as official APIs and so they may change in any release without warning. I'm sorry there isn't much more we can do about that.

Charles

PS. The Bamboo feature request for custom L&F is here, although as James says it's not going to be implemented:

And the related Stash feature request:

Scott Molinari January 16, 2014

Are there some directions on how to create a plug-in?

Scott

cofarrell
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.
January 16, 2014

Hi Scott,

The official documentation is here:

https://developer.atlassian.com/display/DOCS/Plugin+Framework

And a simple Stash plugin using some of the different decorators

https://bitbucket.org/atlassian/stash-example-plugin

You really just need a single <web-resource> in your atlassian-plugin.xml with the atl.general and atl.admin <context>'s which will mean any child <resource> elements will be injected in to every page. You can then add a css resource that does what it needs to do to customise the skin of the product.

Charles

Scott Molinari January 16, 2014

Thanks.

I understand the atl.general and alt.admin within the plug-in xml file stuff, but going through what seems a bit of a hassle to install the SDK's is a bit much just to be able to add some styling to the program, isn't it?

I am, I guess, just a bit frustrated on this one simple issue, where I could go "Wow, this Atlassian stuff is really great", however the modest standardization between the different products from a UI standpoint is holding me back from saying it.

We've installed Jira, Confluence, Bamboo and Stash. The former two were nicely and easily styled to our liking. The latter two are looking like red-headed step children now. I'd really like to avoid the impression of us doing things half-heartedly and the situation with missing L&F functions makes it very difficult to do.

Standardization, especially in a major software development process platform is critically important and we can't even standardize our own CI within that platform? That is simply a terribly poor message to be giving my team and basically unacceptable. Atlassian should think twice about L&F standardization, while we go and wade through installing SDKs and making plug-ins, which might even break at any upgrade.

Scott

Scott Molinari January 16, 2014

Ok, css is clear. I've installed the SDK and am getting my first plug-in working.

But open in my mind is how to change the favicon. Is there also a way to inject

<link rel="shortcut icon" href="path to icon/favicon.ico">

into the header of the HTML code?

Or any other way to change the favicon?

Scott

Jarrod Overson January 23, 2015

"I'm sorry there isn't much more we can do about that." There is plenty you can do about it, what you meant to say is "I'm sorry there isn't much more we •will* do about that"

jpoh
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
January 23, 2015

@Jarrod Overson That answer from Charles was over a year ago, and since then we've released a plugin (https://marketplace.atlassian.com/plugins/com.atlassian.stash.plugin.stash-look-and-feel-plugin) that lets you customise the look and feel of your Stash instance with alternative colours for the header, links and even replacing the logo on the top bar with your own.

Jarrod Overson January 23, 2015

Great, i'll look into it. I appreciate the response, especially given the tone of my original comment.

Scott Molinari January 24, 2015

Still though, common look and feel and the ability to standardize it, shouldn't be in a plug-in. Scott p.s. This commenting system is the pits. I had no idea where to find these comments coming from the first email.

0 votes
Scott Molinari October 20, 2014

Thanks Jonathan.

It is great the community can come through on this. It is terrible Atlassian doesn't. I just don't understand the "piecemeal attitude" within so much of the products Atlassian offers.

I tell you what, when a competitor comes out and does the same things as Atlassian offers, but can do it with a lot more cross application standardization, I'll be moving to that vendor. 

Scott

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events