Hi tomz,

Before QB11, the steps graph looked like below:

Since QB11, we highlight the failed steps only like below:

The new design gives more focus on those failed steps instead of composite steps and successful steps. It's easier to know which steps cause the build fail. While from our old design, it was easier to know which steps were successful, not the failed steps. They, the failed steps, have the same background color as the master step. From my point, the new design should be easier to find the failures. So, I think maybe you have already been used to the old design.

Anyway, supporting color scheme is now one of our the highest priority tasks. And we'll add it in next big release. So, please just give us a little patience. We're now working hard on this. It do have more work to do than we thought, we almost need rewrite the whole UI system (especially for CSS part and HTML part). Below shows a possible future steps graph in dark mode:

Let me know what do you think, especially for color scheme support.

I'm really liking the dark mode. I think The major issue with the current color schema is that it's too white, and you can't really use browser themes to set it darker. Thanks for letting me know that the color scheme is a work-in-progress. To me, the ideal would probably be a combination of the old one and the new one (light-fill for all steps, but a dark solid-red fill for only the error steps). Looking forward to this feature, thanks again!

tz

We faced the same remarks from our main users after migrating our server from v10 to v12.
We managed to retrieve a similar color scheme using the option "Custom Header" from the "Administration" Tab > System Setting

We added this custom style :

<style type="text/css">
	td.step.successful > .step-head 
	{
		background-color: #c8ffc8 !important;
	}
	td.step.failed.composite 
	{
		background-color: #ffd9d9;
	}
	td.step.successful.composite 
	{
		background-color: #ecffef;
	}
	td.step.running.composite 
	{
		background-color: #fcffbd;
	}
	td.step.running> .step-head 
	{
		background-color: #fbff9e;
	}  
</style>

QB12 original style

QB10 like style

Sebastian, can you give more details on this? I tried just pasting in your code, but it doesn't have the desired effect.

Hi, this code should works as it is. We only have that in our server custom header. At this moment we use Quickbuild server version 12.0.12. Not tested with another Quickbuild server version.

I finally got this to work, I had problems with the copy/paste of your code; formatting matters.

I was able to do this alongside my own custom header:

<h2 style="background-color:blue; padding:8px; color:white; margin-bottom:-8px;">Development Instance</h2>
<style type="text/css">td.step.successful > .step-head 
    { background-color: #c8ffc8 !important; }
    td.step.failed.composite { background-color: #ffd9d9; }
    etc.

Alas, it looks like this no longer works in v13. Is there a way to do this using the new CSS functionality in v13?

Hi, we didn't test or move to QB13 yet so I can't help.
But regarding the release note it seems that they made the css customization as a feature now.
Try to put your css in here https://www.pmease.com/quickbuild/whats-new#css-customization

Hi@drdt

As@sebastien.floch mentioned, since QB 13, you needn't hack "Custom Header" to do the customization, instead, you are encouraged to use "CSS Customization" which is dedicated for this.

Thanks, I have been trying this, but the instructions are very sparse. I see one example on the whats-new page, but I can't find any list of what the available options are. Am I missing something?

@drdt custom css will be the last to be applied in the page, and you may check page css rules with browser page inspection tools and override them as necessary. Please try it and let us know what we can improve here.

Thanks, I am trying to do this, but when I open up the page inspection tools, what I see there looks like messages from the stars. Can you give an example perhaps? I also tried the document linked off the what's new page, but as a non-web-develoer, it may take some weeks of study to understand it.

Can you give an example of where to find a setting that I might override, and how to change it?

I recorded a demo and sent you an email. Please check it.

Hi, I added a simple guide on how to do CSS customization in our wiki and I hope it can help:

I also notice that some of you are interested in using the old step graph. So, below I'll show you some code on adding color to the step graph:

.dark .step-graph.step-runtime .step.successful {
	--step-head-bg: var(--qb-color-green-900);
	--step-head-bg-opacity: 1;
	--step-body-bg: var(--qb-color-green-900);
	--step-body-bg-opacity: 1;
	--step-icon-color: var(--qb-color-green-200);
}

.dark .step-graph.step-runtime .step.timeout {
    --step-head-bg: var(--qb-color-orange-900);
    --step-head-bg-opacity: 1;
    --step-body-bg: var(--qb-color-orange-900);
    --step-body-bg-opacity: 1;
    --step-icon-color: var(--qb-color-orange-200);
}

/* ... custom your other step status colors */

.dark .step-graph.step-runtime .step.composite.failed {
	--step-body-bg-opacity: 1;
	--step-body-bg: var(--qb-color-red-900);
	--step-icon-color: var(--qb-color-red-200);
}

after doing so, you will see the step body colors like below in dark theme:

If you also want to show them in light mode, then just add your light mode css:

.light .step-graph.step-runtime .step.successful {
	--step-head-bg: var(--qb-color-green-100);
	--step-head-bg-opacity: 1;
	--step-body-bg: var(--qb-color-green-100);
	--step-body-bg-opacity: 1;
	--step-icon-color: var(--qb-color-green-600);
}

.light .step-graph.step-runtime .step.timeout {
    --step-head-bg: var(--qb-color-orange-100);
    --step-head-bg-opacity: 1;
    --step-body-bg: var(--qb-color-orange-100);
    --step-body-bg-opacity: 1;
    --step-icon-color: var(--qb-color-orange-600);
}

/* ... custom your other step status colors */

.light .step-graph.step-runtime .step.composite.failed {
	--step-body-bg-opacity: 1;
	--step-body-bg: var(--qb-color-red-200);
	--step-icon-color: var(--qb-color-red-600);
}

and it looks like below:

Hate to keep bringing this up but ideally, the CSS options should be an actual color customization web UI. It would be incredibly useful to have a page that just provides "success step header color, success step text color", etc. CSS is extremely difficult to use in terms of understanding the various hardcoded pre-defined states and classes in quickbuild. Though the documentation says there is a way to get this from browsing the source of the webpage, I don't believe that is true, even if you're a seasoned web developer. You would improve your documentation immensely if you had an image of a quickbuild step status page that effectively showed a mapping of all the font and background colors shown, and what the CSS class headers should be for them.

Aside from airing my grievances, I do have one question that might have a CSS answer that isn't described above. I would like all web links of triggered steps to have the default web link blue, instead of color coded by the status text. One major complaint from our users is that they are unable to get the full log from a failure, but it's mostly because they have to click the triggered build link from the parent build configuration. However, when the triggered build link is green/red etc. it is not obvious that it is a web link to a child build process. Can this be configured in CSS?

Thanks,
Tom Z.

@tomz

tomz

It would be incredibly useful to have a page that just provides "success step header color, success step text color"

Good suggestion, you can file a ticket on our issue tracker. For QuickBuild, it would be some difficult to do this as there are hundreds of components. Actually, use CSS variables is the most convenient way to do the customization.

tomz

CSS is extremely difficult to use in terms of understanding ...

I agree. To customize the UI for QuickBuild, CSS knowledge, especially CSS variables, is a must. But, you don't be worried about this, just let me know what do you want and I'll try my best to help you to do the customization.

So, back to your question, do you want below link be blue?

If yes, please go to Administration -> CSS Customization and use below snippet:

.step-runtime .build-status {
    color: blue !important;
}

You can use any color you want here instead of blue.

Thanks so much for the tip on the triggered build link, it works and looks perfect!!

Regarding a customization UI, I really only think you need one for the step status page, (in particular how the build looks). I doubt I am alone in thinking it is weird that this ever changes at all, and yet in the last three versions of QB it had huge overhauls twice. The other pages basically never change, and for a lot of users, change is bad. In these instances, what you change is really all you need to have options for, and it's probably just the background color of step components. No need to give options for the things that quietly look exactly as they had since Quickbuild 5.

Thanks again for your help!

Tom Z

If you do love our old style steps page, I have simulated it by using below CSS:

.step-graph.step-runtime .step > .step-head {
  background: rgb(var(--step-bg) / 1);
}

.step-graph.step-runtime .step > .step-body {
  border-top: 0;
  background: rgb(var(--step-bg) / 1);
}

.step-graph.step-runtime .step > .step-head .step-name,
.step-graph.step-runtime .step > .step-head a.node-link {
  color: rgb(var(--qb-link-color) / 1);
}

.step-graph.step-runtime .step.failed {
  --step-bg: var(--qb-step-failed-bg);
}

.step-graph.step-runtime .step.successful {
  --step-bg: var(--qb-step-successful-bg);
}

.step-graph.step-runtime .step.timeout {
  --step-bg: var(--qb-step-timeout-bg);
}

.step-graph.step-runtime .step.running {
  --step-bg: var(--qb-step-running-bg);
}

.step-graph.step-runtime .step.idle {
  --step-bg: var(--qb-step-idle-bg);
}

.step-graph.step-runtime .step.cancelled {
  --step-bg: var(--qb-step-cancelled-bg);
}

.step-graph.step-runtime .step.failed:not(.composite) {
  --step-head-fg: var(--qb-color-text-default);
  --step-icon-color: var(--step-status-color);
}

.step-graph.step-runtime a.build-status {
  color: rgb(var(--qb-link-color) / 1);
}

:root {
    --qb-step-text-opacity: 0.8;
	
    --qb-step-successful-bg: var(--qb-color-green-100);
    --qb-step-failed-bg: var(--qb-color-red-100);
    --qb-step-running-bg: var(--qb-color-yellow-100);
    --qb-step-waiting-bg: var(--qb-color-gray-100);
    --qb-step-cancelled-bg: var(--qb-color-purple-100);
    --qb-step-timeout-bg: var(--qb-color-orange-100);
    --qb-step-idle-bg: var(--qb-color-gray-100);
}

.dark {
    --qb-step-successful-bg: var(--qb-color-green-900);
    --qb-step-failed-bg: var(--qb-color-red-900);
    --qb-step-running-bg: var(--qb-color-yellow-900);
    --qb-step-waiting-bg: var(--qb-color-gray-900);
    --qb-step-cancelled-bg: var(--qb-color-purple-900);
    --qb-step-timeout-bg: var(--qb-color-orange-900);
    --qb-step-idle-bg: var(--qb-color-gray-900);
}

below is what it looks like:

light mode

dark mode