Single post in A Somewhat Extensive Guide to BBCodes
Forum Index > PokéFarm > Guides > A Somewhat Extensive Guide to BBCodes >
I'm not super happy with this but it seems to work? There may be a better way. The biggest thing is getting all the numbers right, which gets a little weird due to the tranform properties.
ETA: If you want the bar starting at the bottom instead, change the .expbar 90deg to -90deg and the span -90deg to 90deg. Everything else should be able to stay the same.
Code with highlighting & explanantion
- Green = height of progress bar (this is set to the width property on .expbar because of the transform)
- Blue = width of progress bar (same as above)
- Red = offset due to transform: calculate as (1/2)Green-(1/2)Blue (if Blue is larger than Green, swap the (+/-) of each Red line)
[sc=vert_bar][progress=1/5]vertical test[/progress][/sc] [sc=vert_bar][progress=2/5]40%[/progress][/sc] [sc=vert_bar][progress=3/5]words
on
multiple
lines[/progress][/sc] [sc=vert_bar][progress=4/5]words on one line[/progress][/sc]
[style]
.vert_bar {
height:
300
px;
width: 50
px;
display: inline-block;
>.expbar {
margin: 0;
height: 50
px;
width: 300
px;
box-sizing: border-box;
transform: rotate(90deg);
top: 125
px;
left: -125
px;
padding: 0;
>span {
transform: rotate(-90deg);
height: 300
px;
width: 50
px;
padding: 5px;
box-sizing: border-box;
top: -125
px;
left: 125
px;
}
}
}
[/style]
