Custom CSS

[sodper]

I'm missing the ability to specify an url to an override CSS-file. For example, I want to be able to make the build name a bit more visible (larger text, higher contrast color etc.) and it would be awesome if I could specify some CSS rules for these kinds och customization.

Is it possible to include this feature in the road map?

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/9352507-custom-css?utm_campaign=plugin&utm_content=tracker%2F580790&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F580790&utm_medium=issues&utm_source=github).

[jan-molak]

Hi @sodper, if you feel that those changes would benefit other members of the community perhaps you could submit a pull request?

[davidparsson]

Wouldn't it be better to allow input of CSS/Less right into the Jenkins UI? If given an option to specify a URL, the CSS file must be hosted somewhere else, and that introduces more complexity than needed.

[davidparsson]

I'm about to start working on a pull request for this. My idea is to provide a text box where custom CSS can be entered. I'll place this on Jenkins' Configure System page, or possibly on a separate page to be found on the Manage Jenkins page.

@jan-molak, what are your thoughts on this approach? Assuming that my future changes are acceptable, what are the chances that they will be merged and published any time soon?

[jan-molak]

Hey @davidparsson and @sodper and apologies for the slow reply!

There were loads of things that needed to happen to make the implementation of custom themes something a bit less painful (ie: better configuration handling, HTML cleanup, angular directives, introduction of Less.css to mention just a few)

To answer your question, @davidparsson: I think it would be ideal if the Build Monitor could ship with a couple of themes out of the box - I'm sure there are thousands of brilliant people with huge experience in CSS/HTML who are using Build Monitor every day and who could contribute new designs.

That's why I'm very keen on helping whoever's interested in adding new themes to the existing project and sharing them with the community. I'd rather go with that as a target solution than with local CSS overrides, which will probably break whenever the HTML is changed.

J

[davidparsson]

@jan-molak, I actually wanted to be able to change the background colors of certain jobs depending on their names, a thing that could have been done with a simple CSS snippet. More of adopting this to our workflow, rather than changing the look-and-feel. However, my situation has changed so I'm no longer in need of this feature. As you may have guessed, I'm not working on a PR either. Thanks for a great plugin though!

[JohnnyQQQQ]

Hi @jan-molak ! I'm working on a design implementation using materialdesign. I did a mockup last night and will continue the work in the next few weeks.

My focus will also be on a clean representation of build pipelines/workflows, showing step-success etc.

Perhaps you can find some time to help me with the implementation when I'm done with the design part.

Here a very alpha mock, feedback is welcome :+1:

https://cdn.rawgit.com/JohnnyQQQQ/6c71ff6b3d7e67d485e81e8c2a5d9e10/raw/5e6e50504028d07eff92d4355dc2bd7eb5fc701d/alternative.html

[ChadiEM]

If I may add, it would be interesting to consider #174 in the future designs :)

[jan-molak]

@JohnnyQQQQ - that's so cool! Thanks for offering your help! I'd be more than happy to help out with integrating more themes into the Build Monitor :-)

The tricky part is that Build Monitor needs to work across a number of different screen resolutions, so ideally the widgets should auto-magically adjust their size depending on the screen size.

[christoff-1992]

@JohnnyQQQQ - have you worked on the material theme? Id be interested in helping out it would fit in with the material theme I have applied to Jenkins.

[roc]

+1 to there being some way to customise. Perhaps the option to link to a stylesheet, as is the case with the Dooney theme https://github.com/kevinburke/doony#installation-in-jenkins

[jan-molak]

Thanks @roc - what sort of customisations do you have in mind?

[luebbe]

In order to get a modern (read flat) looking UI for our Jenkins installation I activated the "simple theme" plugin and the neo-light stylesheet (http://jenkins-contrib-themes.github.io/jenkins-neo-theme/dist/neo-light.css). This partly breaks the appearance of build monitor, because there's now dark gray text on green or red background, which is hardly readable. "Back in the green", "n builds have failed", "last build" time.

I have never looked into Jenkins or build monitor styling, but I'd expect there to be a lot of common ground. Would it be possible to use "the same" css classes as jenkins + simple theme in build monitor, so that e.g. a theme like neo-light or any other theme would already style 80%-90% of build in the same way as the main jenkins pages? If build monitor needs extra classes, those could/should be added to the external style sheets and customized there.

[jan-molak]

Hey @luebbe - Would you mind filing it as a separate ticket? Using neo-light should not break the Build Monitor, if it does it means that we need some more "defensive CSS" somewhere. A screenshot would be much appreciated too.

Regarding the common ground - there isn't much because the design philosophy of Build Monitor has been historically slightly different to that of Jenkins: while Jenkins was using fixed-size fonts and HTML tables, Build Monitor focused on high readability and responsive design. Also, Build Monitor supports a wide range of Jenkins versions, starting from Jenkins 1.609. Using Jenkins CSS instead of an isolated stylesheet would mean having to work around different bugs in different versions of Jenkins depending on where Build Monitor ends up getting installed.

Having said that, there's no reason why Build Monitor shouldn't ship with more themes people could choose from! If you'd like to propose a flat design theme for Jenkins I'd be more than happy to help you get started?

[luebbe]

Thanks for your reply. Submitted as #282 I'd try to make build monitor fit with neo-light in my first attempt and make a neo-light and neo-dark theme for build monitor :) @JohnnyQQQQ's suggestion looks really good as a starting point

[jan-molak]

I agree! I think @JohnnyQQQQ did some great work on the prototype, I'd love to see that become a part of Build Monitor :-)

[Doug-Bowen]

@JohnnyQQQQ you ever come back to this? We love Build Monitor at our office for tracking the status of our automated tests. It's pratically become the "UI" of our automation. I'd love to be able to skin it to make it appear differently that it does. Executives panic when they see red :)

[chridmeister]

I would love a way to configure the colours used in the bars. We are displaying it on a big screen in the office, and the green colour is distracting. We'd love to be able to switch it to a soothing blue :)

[juanbrena]

@JohnnyQQQQ did you ever get your Jenkins Build Monitor looking like your design? I'm in need of a design just like that and would like to implement it too.