How to change color of this health bar? Sugar Cube 2.2.1

Question

I've taken the deep dive into getting this working on my game using some existing code a helpful guy made.

https://qjzhvmqlzvoo5lqnrvuhmg-on.drv.tw/UInv/Sample_Code.html#Health%20Bar

So far so good except when it comes to changing the color of the vertical health bar.

I've tried messing about with the Javascript settings from:

/* Vertical Health Bar - Start */
#verticalhealthbarbkg {
	--bkg-top: 133px;  /* set top here */
	position: absolute;
	top: 133px;  /* IE workaround */
	top: var(--bkg-top);
	left: 262px;
	width: 15px;
	height: calc(100vh - 155px);  /* IE workaround */
	height: calc(100vh - 22px - var(--bkg-top));
	background-color: #111;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 5px), linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 5px), linear-gradient(to left, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 5px), linear-gradient(to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 5px);
	border-radius: 10px;
	z-index: 10;
	visibility: visible;
}
#verticalhealthbar {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 15px;
	height: 100%;
	background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 5px), linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 5px), linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 5px), linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 5px), radial-gradient( circle at bottom right, #c00, #c00 60% );
	border-radius: 10px;
	z-index: 20;
	transition: height 1s;
}
/* Vertical Health Bar - End */

To this:

#verticalintegritybarbkg {
	--bkg-top: 133px;  /* set top here */
	position: absolute;
	top: 133px;  /* IE workaround */
	top: var(--bkg-top);
	left: 262px;
	width: 15px;
	height: calc(100vh - 155px);  /* IE workaround */
	height: calc(100vh - 22px - var(--bkg-top));
	background-color:  #7000d4;
	background-image: linear-gradient(to right, rgba(112, 0, 212, 0.5), rgba(112, 0, 212, 0) 5px), linear-gradient(to bottom, rgba(112, 0, 212, 0.5), rgba(112, 0, 212, 0) 5px), linear-gradient(to left, rgba(112, 0, 212, 0.5), rgba(112, 0, 212, 0) 5px), linear-gradient(to top, rgba(112, 0, 212, 0.5), rgba(112, 0, 212, 0) 5px);
	border-radius: 10px;
	z-index: 10;
	visibility: visible;
}
#verticalintegritybar {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 15px;
	height: 100%;
	background-image: linear-gradient(to left, rgba(112, 0, 212, 0.5), rgba(112, 0, 212, 0) 5px), linear-gradient(to top, rgba(112, 0, 212, 0.5), rgba(112, 0, 212, 0) 5px), linear-gradient(to right, rgba(112, 0, 212, 0.5), rgba(112, 0, 212, 0) 5px), linear-gradient(to bottom, rgba(112, 0, 212, 0.5), rgba(112, 0, 212, 0) 5px), radial-gradient( circle at bottom right, #c00, #c00 60% );
	border-radius: 10px;
	z-index: 20;
	transition: height 1s;
}

When I run the code in the game the color doesn't change (aside from a slight darkening of it).

Anyone else run into this problem? I'd normally not be too bothered but the side and upper health bars are clashing with the green color font I'm using for the main passage text etc.

Answer 1

You're changing the wrong part of the CSS.  It's the "radial-gradient( circle at bottom right, #c00, #c00 60% )" part that controls the color of the bar.  Put the rest back the way it was, change the "#c00" in both those spots to the color that you want on the foreground bar, and you should be good.

Have fun!  :-)

P.S. I updated that sample code to note where to change the color of the bars.