Is it possible to move HiEv's health bar a little bit higher and to the right side? Sugarcube

Question

/* Horizontal Health Bar - Start */
#horizontalhealthbarbkg {
	position: relative;
	height: 25px;
	width: 25%;
	background-color: #111;
	background-image: linear-gradient(to right, rgba(68, 68, 68, 0.5), rgba(34, 34, 34, 0.5) 5px), linear-gradient(to bottom, rgba(68, 68, 68, 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;
}
#horizontalhealthbar {
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 25px;
	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, #0c0, #0c0 60% );
	border-radius: 10px;
	z-index: 20;
	transition: width 1s;
}

 

Answer 1

Just change the CSS for the position of the health bar background element. Since it contains the health bar, that means that moving the background will move them both.

Generally, for things like this, I play the game and navigate to the passage that has the element I want to modify.  Once there I right-click it, select "Inspect Element", and then play around with the CSS until it looks the way I want.  Then I just copy the changes I made to the CSS into the story's Stylesheet section or the element's "style" attribute, and that usually does the trick.

Hope that helps!  :-)

Comments

Understood, didn't know that thing existed. Thank you very much.

---

Hey, I put it like this and it behaves almost like I wanted to, but the bar changes it's size when I change the size of the screen.

/* Horizontal Health Bar - Start */
#horizontalhealthbarbkg {
	position: fixed;
  right: 0.25em;
	left: 18em;
  	top: 0.25em;
	height: 25px;
	width: 25%;
	background-color: #111;
	background-image: linear-gradient(to right, rgba(68, 68, 68, 0.5), rgba(34, 34, 34, 0.5) 5px), linear-gradient(to bottom, rgba(68, 68, 68, 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;
}

 

---

That's because you set the width as a percentage of the size of its container (25%, in this case), instead of as a fixed size.  If you want a fixed size, use something like "px" (for "pixels") instead of "%" (for "percentage").

See:

MDN - CSS values and units

W3Schools - CSS Units

---

Ohhh, ok, thanks, will do.