0 votes
by (2k points)
/* 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;
}

 

1 Answer

+1 vote
by (44.1k points)
selected by
 
Best answer
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!  :-)
by (2k points)
Understood, didn't know that thing existed. Thank you very much.
by (2k points)

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;
}

 

by (44.1k points)

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

by (2k points)
Ohhh, ok, thanks, will do.
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...