Single post in A Somewhat Extensive Guide to BBCodes
Forum Index > PokéFarm > Guides > A Somewhat Extensive Guide to BBCodes >
[introduction tba]
To start off, you need a styleclass 'counters' which contains your various counters. You also need a style tag which contains information about how counters are laid out - That's what the squashed block at the bottom does, so you don't have to worry about it.
Result:
.
.
.
.
.
.
.
[sc=counters]
[/sc]
[style]
.fillcounter(@collecting,@image,@progress,@goal){.icon:after{content:url(@image)}.icon:before{height:calc(100% - 100*@progress/@goal)}.quantity:before{content:"" + @progress}h3:before{float:left;content:url(@image);padding:4px;background:@col-bg3;border:1px solid @col-border1;border-radius:4px;margin-right:0.5rem}h3{display:block;flex-flow:row wrap;text-align:left;margin-bottom:.8rem}h3:after{font-weight:400;font-size:1rem;display:block;content:@progress + "/" + @goal + "\A " + @collecting}}.counters{position:relative;margin:-2px;display:flex;flex-flow:row wrap;align-items:flex-end;span.bbcode_tooltip{border-bottom:none}.tooltip_content{left:0;bottom:0;transform:translate3d(0,100%,0)}}.counter{position:static !important;text-align:center;margin:0 2px}.counter .icon{position:relative;overflow:hidden;display:inline-block;&:before{position:absolute;content:"";top:0;left:0;width:100%;background:rgba(0,0,0,0.75)}}.counter > .quantity{display:block}
[/style]
Now everything is set up - Let's add a counter!
This is what you add between the [sc=counters][/sc] tags, the important bits are highlighted.
umbreon
- is a unique name for that specific counter.
Dark Gems ★
- is the headline for that counter. You'll see it when you hover over the counter. If you compare it to the staff counters in the header, it would correspond to the staff's name. You can also make it a link.
I love dark types and dark gems!
- Is the flavour text you see when you hover over the counter. Comparing it to the staff counters, this corresponds to each staff member's little message.
[sc=counters]
[sc=counter umbreon][pit="[sc=icon][/sc][sc=quantity][/sc]"][h3]Dark Gems ★[/h3]I love dark types and dark gems![/pit][/sc]
[/sc]
If you try and run this now, you won't see anything. You need to update the css in the style tags to pass 4 pieces of information to the counter.- The thing you're collecting/counting
- The image URL for the counter
- The current progress, e.g. an inventory code
- The goal
[style]
.umbreon {
.fillcounter(
"Dark Gems",
"https://pfq-static.com/img/pkmn/o/d/t.png",
[math][inventory=Dark Gem]+10*[inventory=Medium Dark Gem][/math],
100
)
}
/*The long block from above goes here*/
[/style]
What we did is declare a new block for our counter. We use . plus the unique name of our counter from above. Inside the block, we pass the 4 pieces of information to the .fillcounter mixin, and it'll style our code for us.
Now this may seem cumbersome at first, but the huge advantage of this approach is that it's super easy to add more counters. They can be of different sizes as well and will align in a straight line at the bottom.
Let's add two more counters and view the result:
Code
[sc=counters]
[sc=counter umbreon][pit="[sc=icon][/sc][sc=quantity][/sc]"][h3][url=/index]Dark Gems ★[/url][/h3]I love dark types and dark gems![/pit][/sc]
[sc=counter eevee][pit="[sc=icon][/sc][sc=quantity][/sc]"][h3]Shiny Eevee[/h3]Look at those adorable silver cuties![/pit][/sc]
[sc=counter lanturn][pit="[sc=icon][/sc][sc=quantity][/sc]"][h3]Fising[/h3]Blub.. Blub.. Blub.. You really need a lot of patience for this.[/pit][/sc]
[/sc]
.
.
.
.
.
.
.
[style]
.umbreon {
.fillcounter(
"Dark Gems",
"https://pfq-static.com/img/pkmn/o/d/t.png",
[math][inventory=Dark Gem]+10*[inventory=Medium Dark Gem][/math],
100
)
}
.eevee {
.fillcounter(
"Shiny Eevee",
"https://pfq-static.com/img/pkmn/n/0/m.png",
3,
8
)
}
.lanturn {
.fillcounter(
"Fish hooked",
"https://pfq-static.com/img/pkmn/4/z/f.png",
700,
1500
)
}
.fillcounter(@collecting,@image,@progress,@goal){.icon:after{content:url(@image)}.icon:before{height:calc(100% - 100*@progress/@goal)}.quantity:before{content:"" + @progress}h3:before{float:left;content:url(@image);padding:4px;background:@col-bg3;border:1px solid @col-border1;border-radius:4px;margin-right:0.5rem}h3{display:block;flex-flow:row wrap;text-align:left;margin-bottom:.8rem}h3:after{font-weight:400;font-size:1rem;display:block;content:@progress + "/" + @goal + "\A " + @collecting}}.counters{position:relative;margin:-2px;display:flex;flex-flow:row wrap;align-items:flex-end;span.bbcode_tooltip{border-bottom:none}.tooltip_content{left:0;bottom:0;transform:translate3d(0,100%,0)}}.counter{position:static !important;text-align:center;margin:0 2px}.counter .icon{position:relative;overflow:hidden;display:inline-block;&:before{position:absolute;content:"";top:0;left:0;width:100%;background:rgba(0,0,0,0.75)}}.counter > .quantity{display:block}
[/style]
Dark Gems ★
I love dark types and dark gems!Shiny Eevee
Look at those adorable silver cuties!Fising
Blub.. Blub.. Blub.. You really need a lot of patience for this.Avatar by Kaelwolfur.
Sent from my PokéNav