Single post in A Somewhat Extensive Guide to BBCodes
Forum Index > PokéFarm > Guides > A Somewhat Extensive Guide to BBCodes >
QUOTE originally posted by louiserace
QUOTE originally posted by TempestsGuard
Hey there, is there any way to make progress bars smaller horizontally at all, ie squish them down a little? If so, is there also a way to show them side by side once they've been squished down? I'm trying to make a section that has trackers for my gemwish badges but having them all together is too long for the "about me" section.
 183/250 |  38/40 |
 7/250 |  26/40 |
 0/100 |  17/40 |
 21/40 |  20/40 |
 139/250 |  31/40 |
 34/40 |  4/100 |
 99/40 |  15/40 |
 12/40 |  10/40 |
 9/40 |  12/40 |
Code
[table][
][tr][
][td][progress="[inventory=Normal Gem]/250"][item=Normal Gem][inventory=Normal Gem]/250[/progress][/td][
][td][progress="[inventory=Fire Gem]/40"][item=Fire Gem][inventory=Fire Gem]/40[/progress][/td][
][/tr][
][tr][
][td][progress="[inventory=Water Gem]/250"][item=Water Gem][inventory=Water Gem]/250[/progress][/td][
][td][progress="[inventory=Electric Gem]/40"][item=Electric Gem][inventory=Electric Gem]/40[/progress][/td][
][/tr][
][tr][
][td][progress="[inventory=Grass Gem]/100"][item=Grass Gem][inventory=Grass Gem]/100[/progress][/td][
][td][progress="[inventory=Ice Gem]/40"][item=Ice Gem][inventory=Ice Gem]/40[/progress][/td][
][/tr][
][tr][
][td][progress="[inventory=Fighting Gem]/40"][item=Fighting Gem][inventory=Fighting Gem]/40[/progress][/td][
][td][progress="[inventory=Poison Gem]/40"][item=Poison Gem][inventory=Poison Gem]/40[/progress][/td][
][/tr][
][tr][
][td][progress="[inventory=Ground Gem]/250"][item=Ground Gem][inventory=Ground Gem]/250[/progress][/td][
][td][progress="[inventory=Flying Gem]/40"][item=Flying Gem][inventory=Flying Gem]/40[/progress][/td][
][/tr][
][tr][
][td][progress="[inventory=Psychic Gem]/40"][item=Psychic Gem][inventory=Psychic Gem]/40[/progress][/td][
][td][progress="[inventory=Bug Gem]/100"][item=Bug Gem][inventory=Bug Gem]/100[/progress][/td][
][/tr][
][tr][
][td][progress="[inventory=Rock Gem]/40"][item=Rock Gem][inventory=Rock Gem]/40[/progress][/td][
][td][progress="[inventory=Ghost Gem]/40"][item=Ghost Gem][inventory=Ghost Gem]/40[/progress][/td][
][/tr][
][tr][
][td][progress="[inventory=Dragon Gem]/40"][item=Dragon Gem][inventory=Dragon Gem]/40[/progress][/td][
][td][progress="[inventory=Dark Gem]/40"][item=Dark Gem][inventory=Dark Gem]/40[/progress][/td][
][/tr][
][tr][
][td][progress="[inventory=Steel Gem]/40"][item=Steel Gem][inventory=Steel Gem]/40[/progress][/td][
][td][progress="[inventory=Fairy Gem]/40"][item=Fairy Gem][inventory=Fairy Gem]/40[/progress][/td][
][/tr][
][/table]
[style]
Table {margin: 0 auto; border: 0px}
td {border: 0px; padding: 0px; width: 140px;}
.expbar{margin:0;}
[/style]
QUOTE originally posted by Mirzam
There are several ways to do this. The least CSS intensive way is to put them in a table. You could change or hide the table borders with CSS if you like.
You can also use width, with a display setting to let them share a line. The box-sizing here prevents any padding and borders from making the bars larger than they really are.
183/25038/407/25026/400/10017/4021/4020/40139/25031/4034/404/10099/4015/4012/4010/409/4012/40
A third option would be flex, but I think it's overkill here since you don't really need some of the features, and all the options can be a bit overwhelming. But for completeness, this is more or less what I'd use for flex:
Demo
183/25038/407/25026/400/10017/4021/4020/40139/25031/4034/404/10099/4015/4012/4010/409/4012/40Code
[sc=gembars][progress="[inventory=Normal Gem]/250"][item=Normal Gem][inventory=Normal Gem]/250[/progress][progress="[inventory=Fire Gem]/40"][item=Fire Gem][inventory=Fire Gem]/40[/progress][progress="[inventory=Water Gem]/250"][item=Water Gem][inventory=Water Gem]/250[/progress][progress="[inventory=Electric Gem]/40"][item=Electric Gem][inventory=Electric Gem]/40[/progress][progress="[inventory=Grass Gem]/100"][item=Grass Gem][inventory=Grass Gem]/100[/progress][progress="[inventory=Ice Gem]/40"][item=Ice Gem][inventory=Ice Gem]/40[/progress][progress="[inventory=Fighting Gem]/40"][item=Fighting Gem][inventory=Fighting Gem]/40[/progress][progress="[inventory=Poison Gem]/40"][item=Poison Gem][inventory=Poison Gem]/40[/progress][progress="[inventory=Ground Gem]/250"][item=Ground Gem][inventory=Ground Gem]/250[/progress][progress="[inventory=Flying Gem]/40"][item=Flying Gem][inventory=Flying Gem]/40[/progress][progress="[inventory=Psychic Gem]/40"][item=Psychic Gem][inventory=Psychic Gem]/40[/progress][progress="[inventory=Bug Gem]/100"][item=Bug Gem][inventory=Bug Gem]/100[/progress][progress="[inventory=Rock Gem]/40"][item=Rock Gem][inventory=Rock Gem]/40[/progress][progress="[inventory=Ghost Gem]/40"][item=Ghost Gem][inventory=Ghost Gem]/40[/progress][progress="[inventory=Dragon Gem]/40"][item=Dragon Gem][inventory=Dragon Gem]/40[/progress][progress="[inventory=Dark Gem]/40"][item=Dark Gem][inventory=Dark Gem]/40[/progress][progress="[inventory=Steel Gem]/40"][item=Steel Gem][inventory=Steel Gem]/40[/progress][progress="[inventory=Fairy Gem]/40"][item=Fairy Gem][inventory=Fairy Gem]/40[/progress][/sc]
[style]
.gembars .expbar {
display: inline-block;
width: 31%;
box-sizing: border-box;
margin-left: 1%;
margin-right: 1%;
}
[/style]
Code
.gembars {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.gembars .expbar {
flex-basis: 31%;
box-sizing: border-box;
}
Type Race Score: 0
TR Credit: Hakano Riku/Guide
Breakneck Blitz 04/24 3rd Place trophy by spidrenam (sprite usage)