MyBB Community Forums

MyBB Community Forums > Resources > MyCodes > "progress" bar with multiple sections -- need help with this
Full Version: "progress" bar with multiple sections -- need help with this
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

Nebulon Ranger

2014-11-06, 01:21 AM
Well, I run a roleplaying forum, and I find myself in need of help with a specific type of progress bar. Allow me to explain.

On ZEJ, we have two popular types of roleplays--classic freeform play-by-post and statistical (HP, Mana, you know the drill). However, in the latter type, a common concept is the X-Gauge, which is a meter, consisting of three sections, defining the player character's progress to being able to use their strongest ability, aptly named the X-Ability. This would be the primary use of this code, however, there's also obviously health and mana bars, which I'd like to add some degree of customisability to, so we'd need some way to define the number of individual sections the bar has (probably by code nesting, which isn't really ideal), their widths and their colors, all independently, while being layered on top of the background bar.

I've tried some of it myself already, but I can't get the bars to display in live posts. Ideally I'd implement the CSS through a stylesheet attached to all pages of a theme, but I'm  not sure if MyCode allows for that.
Hopefully legal bump.

I've managed to put together a nested code set, with customisable section width/color, but color seems to break on my live site. Looking into page source on live vs test, this happens:

Testing (localhost):

<div class="progress">
<div class="progress-bar progress-bar-info" style="background-image: linear-gradient(to bottom, #9b59b6 0%, #8e44ad 100%); width: 100%;">
    <span class="sr-only">PURPLE%</span><br>
  </div>
</div>

Live (http://www.zejroleplaying.org )

		<div class="progress">
<div class="progress-bar progress-bar-info color=#5C5C5C,#5d5d5d" style="width: 33.33%">
    <span class="sr-only" style="vertical-align: center;">0/5</span><br>
  </div><div class="progress-bar progress-bar-info color=#5C5C5C,#5d5d5d" style="width: 33.33%">
    <span class="sr-only" style="vertical-align: center;">0/5</span><br>
  </div><div class="progress-bar progress-bar-info color=#5C5C5C,#5d5d5d" style="width: 33.33%">
    <span class="sr-only" style="vertical-align: center;">0/5</span><br>
  </div>

And the BBCodes/CSS:

Bar container:
\[bar\](.*?)\[/bar\]

<div class="progress">
$1
</div>

CSS presets for sections:
\[section type=(.*?) width=(.*?)\](.*?)\[/section\]

<div class="progress-bar progress-bar-$1" style="width: $2%">
    <span style="vertical-align: center;">$3</span>
  </div>

Gradient color override:
\[section type=(.*?) width=(.*?) color=(.*?),(.*?)\](.*?)\[/section\]

<style type="text/css">
.progress-bar-info, .progress-bar-warning, .progress-bar-success, .progress-bar-danger {
background-image: linear-gradient(to bottom, $3 0%, $4 100%);
}
</style>
<div class="progress-bar progress-bar-$1"" style="width: $2 %;">
    <span class="sr-only">$5</span>
</div>

CSS, copied from Bootstrap:
.progress {
  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
  background-image:      -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5));
  background-image:         linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
  background-repeat: repeat-x;
  border: 1px solid #7f8c8d;
  z-index: 10;
  width: 500px;
  max-width: 500px;
  height: 10px;
  max-height: 10px;
  display: inline-block;
}

.progress-bar {
	background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	z-index: -1;
	max-width: 500px;
	max-height: 10px;
	float: left;
	text-align: center;
	
	font-family: Source Sans Pro;
	font-size: 8px;
}

.progress-bar-success {
	background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
	background-image: -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44));
	background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
	background-repeat: repeat-x;
	z-index: -1;
	max-width: 500px;
	max-height: 10px;
	float: left;
	text-align: center;
	
	font-size: 8px;
}

.progress-bar-info {
	background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
	background-image: -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5));
	background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
	background-repeat: repeat-x;
	z-index: -1;
	max-width: 500px;
	max-height: 10px;
	float: left;
	text-align: center;
	
	font-size: 8px;
}

.progress-bar-warning {
	background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
	background-image: -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f));
	background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
	background-repeat: repeat-x;
	z-index: -1;
	max-width: 500px;
	max-height: 10px;
	float: left;
	text-align: center;
	
	font-size: 8px;
}

.progress-bar-danger {
  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
  background-image:      -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c));
  background-image:         linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
  background-repeat: repeat-x;
  z-index: -1;
    max-width: 500px;
    max-height: 10px;
      float: left;
  text-align: center;
}

.progress-bar-striped {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  z-index: -1;
    max-width: 500px;
    max-height: 10px;
      float: left;
  text-align: center;
}

For some reason my live board looks like it's sticking bits of BBCode into the replacement when it shouldn't be.
MyBB Community Forums > Resources > MyCodes > "progress" bar with multiple sections -- need help with this