yanastyboi
Member
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
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]
Code:
[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]
Last edited: