Loading...

Top
PFQ Banner

This is PokéFarm Q, a free online Pokémon collectables game.

Already a user? New to PFQ?

A Somewhat Extensive Guide to BBCodes

Forum Index > PokéFarm > Guides >

Pages: 123··· 758759760761762763

TempestsGuard's AvatarTempestsGuard
TempestsGuard's Avatar
👍 0
Posted 25/Mar/2024 21:31:06 (1 month ago)

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.
It would work of you put them in a table like this:
183/250
36/40
7/250
26/40
0/100
16/40
21/40
20/40
24/250
31/40
34/40
4/100
28/40
15/40
12/40
10/40
9/40
10/40

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.

Demo

183/250
36/40
7/250
26/40
0/100
16/40
21/40
20/40
24/250
31/40
34/40
4/100
28/40
15/40
12/40
10/40
9/40
10/40

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

Code

.gembars { display: flex; flex-wrap: wrap; align-content: space-between; } .gembars .expbar { flex-basis: 31%; box-sizing: border-box; }
Thank you both so much, these are exactly what I was looking to do!
Type Race Score: 1750
TR Credit: Hakano Riku/Guide
Breakneck Blitz 04/24 3rd Place trophy by spidrenam (sprite usage)
Jana Kennedy's AvatarJana Kennedy
Jana Kennedy's Avatar
👍 0
Posted 29/Mar/2024 11:06:25 (29 days ago)
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 1060 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 ^.^
Avatar is from Unus Annus, free to use image from the 'pick a side' part
ve3oml's Avatarve3oml
ve3oml's Avatar
👍 0
Posted 04/Apr/2024 23:14:15 (23 days ago)
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,
pkspsapphire's Avatarpkspsapphire
pkspsapphire's Avatar
👍 0
Posted 05/Apr/2024 00:09:19 (23 days ago)

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?
unfortunately you cant make columns with bbcode, but aemilia has a guide on how to make columns with css if you wanna check that out!
  • 🪪
  • 📋
  • 🔗

sapphire/they/23

Tournament Token (Ruby)

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

Chamo
Lv. 100 — +4,361,337
Aspear BerryAspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry
Cheri Berry (SPICY)
Chesto BerryChesto Berry
Chesto Berry (DRY)
Pecha BerryPecha Berry
Pecha Berry (SWEET)
Rawst BerryRawst Berry
Rawst Berry (BITTER)
Likes:
Dry food
FireFighting
Happiness MAX
Quiet nature
290 eggs
Score: 2154
journal shop️ bait
credits

credits

MelanUmbreon4's AvatarMelanUmbreon4
MelanUmbreon4's Avatar
👍 0
Posted 05/Apr/2024 13:04:56 (22 days ago)
Edited 05/Apr/2024 13:05:28 (22 days ago)
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: 1039
TR Credit: Hakano Riku/Guide
Chiro's AvatarChiro
Chiro's Avatar
👍 0
Posted 05/Apr/2024 18:11:58 (22 days ago)
Would there be a way to stack images?

Koi | Rockruff Hoarder | Minor

Tired Infinitely; What's sleep?
Pokeheroes Scratch.credits

credits

Code @RAINB0W Forum Icon @Silver Raven!! Signature Pagedoll @Lilieth! Rockruff sprite (pfq sprite, recolored by Sedona!! Permission to edit/recolor sprite+embed two sprites in one image:here.
pkspsapphire's Avatarpkspsapphire
pkspsapphire's Avatar
👍 0
Posted 05/Apr/2024 19:34:27 (22 days ago)

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.
you can do this with css!

code

[style] .cs > .party > div > .pkmn > .pokemon { background-image:url('IMG URL') !important; } [/style]
the .cs is the thing that defines the specific pokemon panel you're using, so it doesn't apply it to every pokepanel in your post you would use it like this: [sc=cs][pkmnpanel=(code)][/sc] for example, if i used [sc=cs][pkmnpanel=TcvMH][/sc] after replacing the IMG URL section of the css to https://i.postimg.cc/GtPqk3c7/rosesprite.png, we get this:
Turtwig
Lv. 87 — 5,085 / 25,038
Aspear BerryAspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry
Cheri Berry (SPICY)
Chesto BerryChesto Berry
Chesto Berry (DRY)
Pecha BerryPecha Berry
Pecha Berry (SWEET)
Rawst BerryRawst Berry
Rawst Berry (BITTER)
Likes:
Sour food
Grass
Happiness MAX
Lax nature
hope that's what you were looking for!!

QUOTE originally posted by AnonymousEspeon

Would there be a way to stack images?
if you mean like this,

image

then you need to use css to set the z-index and margins of each image as well as define a container for it to sit in

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]
using that css and the following bbcode: [sc=container] [sc=imageOne][img]https://i.postimg.cc/SxDm9zBJ/joanicon.png[/img][/sc][sc=imageTwo][img]https://i.postimg.cc/RCK9R8rr/roseicon.png[/img][/sc][ ][/sc] we get this ( images are my art ):
there may very well possibly be an easier / more intuitive way to accomplish this but this is what i got to work so i hope it helps! *as a sidenote, if your images are bigger, you're going to need to edit the "min-height" property in the ".container" section to accomodate for the sizes. make sure to add some extra room!
Chiro's AvatarChiro
Chiro's Avatar
👍 0
Posted 05/Apr/2024 19:37:14 (22 days ago)
Ok thanks! Would there be a way to stack them directly on top though?
pkspsapphire's Avatarpkspsapphire
pkspsapphire's Avatar
👍 0
Posted 05/Apr/2024 19:43:27 (22 days ago)

QUOTE originally posted by AnonymousEspeon

Ok thanks! Would there be a way to stack them directly on top though?
oh yeah, just remove the "margin" properties haha
Chiro's AvatarChiro
Chiro's Avatar
👍 0
Posted 05/Apr/2024 19:47:23 (22 days ago)
Oh ok lol Thanks!

Pages: 123··· 758759760761762763

Cannot post: Please log in to post

© PokéFarm 2009-2024 (Full details)Contact | Rules | Privacy | Reviews 4.6★Get shortlink for this page