Your browser was unable to load all of the resources. They may have been blocked by your firewall, proxy or browser configuration.
Press Ctrl+F5 or Ctrl+Shift+R to have your browser try again.

Color scheme of QB10 web interface for builds preferred for QB 11 and later #4424

tomz ·

Most of our teams' build users prefer the QB10 color scheme for build step display. The new scheme does make it harder to see which step is the deepest at-fault step inside nested composite steps. Would it be possible to get the old color scheme back? Would it be difficult to add a feature to be able to configure the color scheme?

thanks,
tomz

  • replies 18
  • views 1641
  • stars 0
steveluo ADMIN ·

Hi tomz,

Before QB11, the steps graph looked like below:

old-ui.png

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

current-ui.png

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:

future-ui.png

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

tomz ·

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

sebastien.floch ·

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
QB12_original_style.png

QB10 like style
QB12_custom_style.png

drdt ·

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

sebastien.floch ·

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.

Custom_header_QB10_colors.png
drdt ·

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.
drdt ·

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

sebastien.floch ·
steveluo ADMIN ·

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.

drdt ·

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?

robinshen ADMIN ·

@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.

drdt ·

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?

robinshen ADMIN ·

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

steveluo ADMIN ·

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:

steps.png

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:

step-light.png
tomz ·

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.

steveluo ADMIN ·

@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.

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?

trigger-link.png

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.

tomz ·

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

steveluo ADMIN ·

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

light-steps.png

dark mode

dark-steps.png