Resource Stat Bar Alt Code

[yanastyboi]

OKAY MADE IT WORK! I AM SHARING NOW. So I asked in another thread a method of create a status bar, and I now know the forum has a code for it already. But I don't care for it. So I fiddled to mashup something that worked better for a profile template I'm working on. ANYWAYS this is the result. Pretty simple, but I thought I'd share.

To make adjustments to the "colored status bar" change the percentage of "width:20%;"
Sorry if this is messy, I'm not a very clean code writer! >D

[div class=maincontainer]
[div class=subcontainer]

[div class=flexcontainerstats]

CHARISMA

-------------------------------------------------------------------------------------------------------------

EMPATHY

-------------------------------------------------------------------------------------------------------------

COURAGE

-------------------------------------------------------------------------------------------------------------

INTEGRITY

-------------------------------------------------------------------------------------------------------------

PATIENCE

-------------------------------------------------------------------------------------------------------------

HUMOUR

-------------------------------------------------------------------------------------------------------------

[/div]


[/div]
[/div]

[class=maincontainer]width:100%; background-color:#D8D9D7;[/class] [class=subcontainer]width:50%; margin:auto; background-color:#fff;[/class] [class=flexcontainerstats]display: flex; flex-direction: row; justify-content: center;[/class]

[div class=maincontainer]
[div class=subcontainer]

[div class=flexcontainerstats]
[div=width:30%;]
[div=width:40%;]CHARISMA[/div][div=width:90%;max-height:90px;border:solid 1px #000;overflow: hidden;][div=width:20%;max-height:30px;background-color:#D8D9D7;overflow: hidden;color:#D8D9D7;]-------------------------------------------------------------------------------------------------------------[/div][/div]
[div=width:40%;]EMPATHY[/div][div=width:90%;max-height:90px;border:solid 1px #000;overflow: hidden;][div=width:20%;max-height:30px;background-color:#D8D9D7;overflow: hidden;color:#D8D9D7;]-------------------------------------------------------------------------------------------------------------[/div][/div]
[div=width:40%;]COURAGE[/div][div=width:90%;max-height:90px;border:solid 1px #000;overflow: hidden;][div=width:20%;max-height:30px;background-color:#D8D9D7;overflow: hidden;color:#D8D9D7;]-------------------------------------------------------------------------------------------------------------[/div][/div]
[/div]
[div=width:30%;]
[div=width:40%;]INTEGRITY[/div][div=width:90%;max-height:90px;border:solid 1px #000;overflow: hidden;][div=width:20%;max-height:30px;background-color:#D8D9D7;overflow: hidden;color:#D8D9D7;]-------------------------------------------------------------------------------------------------------------[/div][/div]
[div=width:40%;]PATIENCE[/div][div=width:90%;max-height:90px;border:solid 1px #000;overflow: hidden;][div=width:20%;max-height:30px;background-color:#D8D9D7;overflow: hidden;color:#D8D9D7;]-------------------------------------------------------------------------------------------------------------[/div][/div]
[div=width:40%;]HUMOUR[/div][div=width:90%;max-height:90px;border:solid 1px #000;overflow: hidden;][div=width:20%;max-height:30px;background-color:#D8D9D7;overflow: hidden;color:#D8D9D7;]-------------------------------------------------------------------------------------------------------------[/div][/div]
[/div]
[/div]


[/div]
[/div]

[nobr][class=maincontainer]width:100%;
background-color:#D8D9D7;[/class]

[class=subcontainer]width:50%;
margin:auto;
background-color:#fff;[/class]

[class=flexcontainerstats]display: flex;
flex-direction: row;
justify-content: center;[/class][/nobr]