A Somewhat Extensive Guide to BBCodes
Forum Index > PokéFarm > Guides >
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.
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.
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
Code
[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: 48
TR Credit: Hakano Riku/Guide
Breakneck Blitz 04/24 3rd Place trophy by spidrenam (sprite usage)
What is the inventory tag for the egg accessories? Or can we not track them in that way?
Always looking for quirky pokemon!
- Typerace
- Shop
Current Type
Current Points 1610
Clicklist
Next month=
My shop! I offer shelter hunts, free fields, shiny/albino, variants/exclusives and more. Please post in shop rather than send a pm.
Buying
Spectral Leiomano
for anywhere between 20 - 40zc depending on market price - send pm to see if i have enough money ^.^I was just wondering if It may be possible to add columns? like if i wanted to put 2 tables side by side, how would i do that with BBcode?
Avatar is my actual cat when he was a baby,
QUOTE originally posted by ve3oml
I was just wondering if It may be possible to add columns? like if i wanted to put 2 tables side by side, how would i do that with BBcode?
- 🪪
- 📋
- 🔗
sapphire/they/23
Tournament Token (Ruby)
Event Item
(: 0)
[LEGACY] A token earned from Weekly Tournaments Season 10 but it is too old to be valid.
Legacy items are old items that no longer serve a purpose and are only good for collecting.
Sells for 10,000
Likes:
Dry food
MAX
Quiet nature
225 eggs
Score: 2276
credits
credits
- Code @Neonyan
- Pkmnpanel @Mirzam+modified by @Neonyan
- Background+Tab Icons @Pokemon
- Pagedoll @pkspsapphire
- TR code LycanKai+Hakano Riku
does anybody know how to edit a pkmnpanel to have a custom sprite like this.
This WAS a Caimaw.
EDIT: For clarification, that is an image.
Type Race Score: 791
TR Credit: Hakano Riku/Guide
Would there be a way to stack images?
Koi | Rockruff Hoarder | Minor
Tired Infinitely; What's sleep?
QUOTE originally posted by MelanUmbreon4
does anybody know how to edit a pkmnpanel to have a custom sprite like this.
This WAS a Caimaw.
EDIT: For clarification, that is an image.
code
[style]
.cs > .party > div > .pkmn > .pokemon { background-image:url('IMG URL') !important; }
[/style]
QUOTE originally posted by AnonymousEspeon
Would there be a way to stack images?
image
code
[style]
.container {
position: relative;
min-height: 250px;
img {
position: absolute;
}}
.imageOne {
z-index: 1;
margin-left:15px;
margin-bottom:15px;
}
.imageTwo {
z-index: 2;
}
[/style]
Ok thanks!
Would there be a way to stack them directly on top though?
QUOTE originally posted by AnonymousEspeon
Ok thanks!
Would there be a way to stack them directly on top though?
Oh ok lol
Thanks!
Cannot post: Please log in to post