A Somewhat Extensive Guide to BBCodes
Forum Index > PokéFarm > Guides >
QUOTE originally posted by EstreIIa
Another question: how do you make progress bars go beside each other?
[sc=sidebyside][progress=3/10]A progress bar[/progress][progress=1/10]More progress bars[/progress][progress=8/10]And a third[/progress][/sc]
[style]
.sidebyside {
display: flex;
.expbar {
flex: 1 1 0;
}
}
[/style]
If you want to put space between the progress bars you can give .sidebyside a negative horizontal margin and .expbar a positive margin like so
[style]
.sidebyside {
display: flex;
margin: 0 -3px;
.expbar {
flex: 1 1 0;
margin: 0 3px;
}
}
[/style]
Avatar by Kaelwolfur.
Sent from my PokéNav
I'm going to sneak into that conversation and give a counter question, if using a other kind of code for progress bars- how can the space be added to that? Because I tried to add some space for the two in my signature but I got it all messed up ;.;
A pretty code in a box
[progress="[inventory=Diamond Tiara]/300"][inventory=Diamond Tiara]/300 [item=Diamond Tiara][/progress]
[style].expbar {
display: inline-block;
width: 40%;
margin: 0px auto;
background: white;
border: 1px solid purple;
&>div {
background: #F7B3DA;
border-right: 1px solid purple;
}
&>span {
font-size: 10px;
font-weight: 400;
color: purple;
}
}[/style]
This post contains one or more BBCode Errors and cannot be displayed properly.
Error: Item "Wishing Stone" not found on line 6
If this is your post, please edit it to correct these errors. For now, the post will be shown raw, with no BBCode processing.
[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.
QUOTE originally posted by Calypso
Is there any way to make a picture smaller without making it blurry? (The little sprite on my about me is really blurry because of its size)
Avatar created by quinn for my use only
Trying to sell my stuff. Feel free to PM if anything interests you in my fields
QUOTE originally posted by DrWho
You have the declaration "margin: 0px auto" which gives a vertical margin of 0 and a horizontal margin of auto. However a horizontal margin of auto has no effect on an inline-block element.
Change it to margin: 0 1em; to give your progress bars a horizontal margin of 1em (or any other value you want)
QUOTE originally posted by Calypso
Is there any way to make a picture smaller without making it blurry? (The little sprite on my about me is really blurry because of its size)
auto: 
How do you accomplish a pit with a pokemon sprite? Where you hover over the sprite and it gives you the message? IDK how two put the two codes together...
Credits & Dragon Cave
QUOTE originally posted by WinterShine
How do you accomplish a pit with a pokemon sprite? Where you hover over the sprite and it gives you the message? IDK how two put the two codes together...
Like this?
[tip=TIP MESSAGE][pkmn=POKEMON][/tip]Cannot post: Please log in to post