Single post in Free CSS, Userscripts, etc
Forum Index > Other > Other Art > Free CSS, Userscripts, etc >
Another post! This one is about making counters, like the special counters at the top of the page.
We start off with this boilerplate, it won't show any counters yet but it sets up the necessary CSS.
Dark Gems ★
Mytrhil soon :'DShiny Eevee
Eevee is the most common shiny on site, and not without good reason!Fising
Blub.. Blub.. Blub.. You really need a lot of patience for this.[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{background: linear-gradient(to bottom, #77c7d7, #d7ffbf); 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]
Let's add a counter! Add this to the BBCode between the [sc=counters][/sc] tags
[sc=counters]
[sc=counter umbreon][pit="[sc=icon][/sc][sc=quantity][/sc]"][h3]Dark Gems ★[/h3]Mytrhil soon :'D[/pit][/sc]
[/sc]
umbreon
- is a unique name for the counter
Dark Gems ★
- is the headline for that counter.
Mytrhil soon :'D
- Is the description
Now add this to the CSS. We're passing 4 piece of information between the round brackets ( ) separated by commas
- A name for what you're collecting, this appears as the 3rd line in the popup
- The image URL for the counter
- Your current count, e.g. an inventory code
- Your 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]
You can add as many counters as you like, just repeat the 2 steps we did for the dark gem counter. Here's the full example you see at the top of this page:
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{background: linear-gradient(to bottom, #77c7d7, #d7ffbf); 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]
Avatar by Kaelwolfur.
Sent from my PokéNav