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

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

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

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

I would be interested in this as well

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!

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



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.

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

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:

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

Scott

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

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

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

"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"

Jonathan Poh Atlassian Team Jan 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.

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

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.

1 vote
Jonathan Poh Atlassian Team Oct 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.

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.

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

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
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Posted Jun 06, 2018 in Bitbucket

Do you use Bitbucket Cloud and Jira Cloud? If so, let us know!

Hi Community, I'm Julia and I'm on the Jira Software Cloud marketing team!  We're looking for companies or teams using Bitbucket Cloud and Jira Software Cloud. If your team fits the t...

143 views 6 3
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you