Single post in The Goatshed

Forum Index > PokéFarm > Journals > The Goatshed >

Goatlady

👍 1

Posted 30/Jun/2021 05:14:44 (2 years ago)

QUOTE originally posted by DrWho

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.

[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]

QUOTE originally posted by DrWho

Replacing images with CSS

QUOTE originally posted by Spewpa

Just curious, is there a way to replace the images on the counters?

Spewpa asked for a way to replace counter images. That gave me the idea to make a post about replacing images with CSS. There's two type of images:

1. As a CSS property

The image is loaded as a CSS property, so you can just set a new property. For example, select all fields with the 'normal2.png' background and set a new custom background. .field[style*='normal2.png'] { background-image: url("https://placekitten.com/g/600/345") !important }

2. As the src of an img tag

The more interesting case is when the image is loaded as the HTML <img> element. There's no way to tell CSS "select all images and replace the value of src with something else". CSS cannot modify existing attributes. But there's one trick we can use, the object-position property. For an img tag, object-position describes where the graphic is positioned relative to the box of the img element. To make this clear, here's a cat loaded with the img tag. We give the img a red border and padding to highlight the box of the element.

img { box-sizing: border-box; border: 3px solid red; padding: 3px; } Now, we use object-position to move the position of the cat pixels relative to the box.

img { box-sizing: border-box; border: 3px solid red; padding: 3px; object-position: 25px 10px; } So, the trick is to move the old sprite way off the visible screen with object-position. Then we can set a background-image to fill the now empty img element. If your new background-image has a different size than the original, use the CSS width and height properties to resize the img element.

img { box-sizing: border-box; border: 3px solid red; padding: 3px; height: 90px; width: 90px; object-position: 9999px; background-image: url("https://placekitten.com/90/90"); }

Link: object-position on Mozilla Developer Network.

Shop
Typerace
My Special Monz
Links

TUBG are an efficient and enthusiastic Team, offering these services: Ditto Speed Dating, Custom Breeding Pairs including Exclusives, Shelter Hunting, Exclusives Hatching, Charm Rental and selling our Special hatches, + items. Don't be shy, come drop by!

Nothing has more points than sharpened Steel!

Startermon	First Melanmon
Ninchu in his ultimate glory Lv. 100 — +1,345,887 Aspear Berry Aspear Berry (SOUR) Cheri Berry Cheri Berry (SPICY) Chesto Berry Chesto Berry (DRY) Pecha Berry Pecha Berry (SWEET) Rawst Berry Rawst Berry (BITTER) Likes: Bitter food 27% Sassy nature	Reaper Cloth Evolution Item (: 0) A fabric imbued with evil energies. Sells for 1,750 Dryskull, first of his name. Lv. 100 — +1,783,860 Aspear Berry Aspear Berry (SOUR) Cheri Berry Cheri Berry (SPICY) Chesto Berry Chesto Berry (DRY) Pecha Berry Pecha Berry (SWEET) Rawst Berry Rawst Berry (BITTER) Likes: Dry food 27% Rash nature