Trying to make Stat Bars Wider

Game Development ChoiceScript Help
1

I’m having trouble with making the StatBars wider!

image|684x424
I need them to match, so I want to make them longer (instead of maybe wider?) so that they’re all the same.

The error I’m getting is that instead of this:
(screenshot from Choicescript Wiki Style.CSS page)
image|690x207

My code looks like this:

.statBar {
  background-color: #949291;
  height: 2rem;
  line-height: 2rem;
  margin: 0.5ch 0;
  width: 20rem;
  *comment (was originally 20rem)
  max-width: 100%;
  color: #f7f4f1;
  position: relative; /* to allow absolute positioned value */
  z-index: 0;
}
.opposed {
  background-color: #6D6DFC;
}

I just need them to matchhhhhh. Help please?

2 
.statBar {
  background-color: #949291;
  height: 2rem;
  line-height: 2rem;
  margin: 0.5ch 0;
  width: 30rem; /* Adjust this value to make the StatBars wider */
  max-width: 100%;
  color: #f7f4f1;
  position: relative; /* to allow absolute positioned value */
  z-index: 0;
}

By setting the width to 30rem, the StatBars should become wider, and all three should match in width, assuming they are placed in a container of sufficient width. Feel free to adjust the value as needed to achieve the desired width for the StatBars.

Keep in mind that you may need to consider the overall layout and space available to ensure the StatBars fit within the design of your game interface. If the StatBars’ parent container is narrower than the combined width of the StatBars, they might not fit as intended, and you may need to adjust other layout elements accordingly.

1 Like
3

Thank you for the kind tips. Unfortunately, I’m still running into an issue:
image|690x391

It didn’t change the width of the bars at all.
image|684x424
I even tried changing the colors of the stats to see if I could make ANY changes to the Style.CSS file? And none of the changes have happened. (yes, I’ve saved)

I don’t know what I’m doing wrong.

.statBar {
  background-color: #949291;
  height: 2rem;
  line-height: 2rem;
  margin: 0.5ch 0;
  width: 33rem;
  max-width: 100%;
  color: #f7f4f1;
  position: relative; /* to allow absolute positioned value */
  z-index: 0;
}
.opposed {
  background-color: #900da7;
}

table {
  margin-bottom: 1.5em;
}

.statText {
  margin-left: 2ex;
  text-indent: -1ex;
}

.statBar > span, .statLine > span {
  position: relative;
  z-index: 1; /* visible over stat value */
  white-space: nowrap; /* remain on single line so we can resize font based on width */
}
.statValue {
  background-color: #c9b81b;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: -1;
  /* width will be determined at runtime, 0-100% */
}```

(also, since when are we not allowed to embed images any more?!?!?!)
4

Make sure you check these thinks

Make sure that the .statBar class is correctly applied to the elements you want to modify. Ensure there are no typos or conflicting CSS rules affecting the StatBars.

Make sure there are no other CSS rules in your project that could be overriding the .statBar styles. Use browser developer tools to inspect the elements and see which CSS rules are being applied.

Sometimes, browsers cache CSS files, which might prevent the changes from being immediately visible. Try clearing your browser cache and reloading the page to see if the updated styles take effect.

In the browser’s developer tools, inspect the .statBar elements to see if the width property is being correctly applied and not overridden by other styles.