Loading...

Top
PFQ Banner

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

Already a user? New to PFQ?

Guide to CSS (Beginner & Intermediate) [In Progress]

Forum Index > PokéFarm > Guides >

Pages: 123··· 6364656667··· 828384

x Arlecchinø's Avatarx Arlecchinø
x Arlecchinø's Avatar
master.pngd.png
siiiiigh what is the code for the tooltip underline? i think its tooltip_span.
cy/fev. he/they pronouns. find me at @scorkaji on discord if you need me
King's Shield

King's Shield

Forme-Change Item

(item.png: 0)

A mysterious shield that enervates attackers. Aegislash could make good use of this.

Sells for 500

Lv. 100 — +9,871,977
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:
Bitter food
ElectricDark
Happiness 27%
Calm nature
Lv. 100 — +11,327,799
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
DarkFlying
Happiness 27%
Rash nature
Lv. 100 — +5,708,564
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
Fairy
Happiness 27%
Impish nature

avatar from Hazbin Hotel s1e8 pkmnpanel code
Mirzam's Avatarhypermode-12.pngMirzam
Mirzam's Avatar
helpinghand.pnghypermode.pngarceus.pnga.png
The element type is "span". The classes applied in user posts are: bbcode_tooltip tooltip_trigger Classes use the "." for CSS, so demo code might be something like: .bbcode_tooltip { /* code here */ } Which class you pick is really only going to matter for skins, they should be interchangeable for posts. (ex: item tooltips in your inventory are tooltip_trigger but not bbcode_tooltip) Have you ever tried using a browser's dev tools before? If you want to do a lot of CSS work it will help you a lot to be able to find out the names and types of elements so you can target them effectively with CSS :) [some edits for clarity]
carinae's Avatarcarinae
carinae's Avatar
grandmaster.pnga.png
Hi- What's the code for hidebox border colors?
carinae • they/them quit
Emberlynn's AvatarEmberlynn
Emberlynn's Avatar
master.pngd+.png
You can change the borders of a hide box with just a border code. You can either put it in the &>h3 section to change the top portion that you click or in the &>div part to change the text box pportion.i bolded that portion in the code below for you. this is just a code pulled from one of my post templates, your coding doesn't have to be so fancy, just what I had on hand

code used

testing .panel { border: 0px; &>h3 {height:10 1px; text-align:left; letter-spacing:3px; line-height:5px; background: #A2A1A2; font-weight: bold; font-size: 11px; color:#4E4D4E; border-bottom:hidden;} &>div { line-height: 11px; border:1px dotted #696969; font-weight: normal; text-align: left; font-size:11px; background: url('https://imageshack.com/a/img921/8740/X6nhbe.png'); color: #3E403E; }}
"There's not a cup of tea big enough or a book long enough to suit me." - C.S. Lewis | Avatar credits | ©
signature by emberlynn; official 1D fragrance commercial gifs
Gallevoir's Avatarhypermode-12.pngGallevoir
Gallevoir's Avatar
hypermode.pngarceus.pngb.png
Sorry, what's the code for changing text color in a hidebox header? I thought I'd covered it with "color:black" in the h3 portion of .panel, but for some reason that doesn't seem to be doing the trick. I know it's the right place because text-align: center does work.

Self-demonstrating example of code

.panel { &>h3 {background:#70dea5; border:1px solid #2dac6a; color:black; text-align: center;} &>div {background:#c0ecd5; border:1px solid #2dac6a; color:black;} }
  • Shops
  • Best Melans
  • A Christmas Bee, for Melan Luck
j.pngg.pngo.pngd.png6.png6.png1.pngn.pngx.pngp.png
They/them, for simplicity. Beathan sprite; egg sprites from Bulbapedia; avatar; Acacia sprite by me; Bee from Pokefarm Advent
Mirzam's Avatarhypermode-12.pngMirzam
Mirzam's Avatar
helpinghand.pnghypermode.pngarceus.pnga.png
The clickable area in a hidebox is a link/anchor so you need to set the color on "&>h3 a" as well. That code also affects quotes and other panel types, so keep both the link and non-link colors set, don't just switch to changing to the link only. I've chosen white for the "a" color to try to demo what I'm talking about.

QUOTE originally posted by sojussimblr

Demo quote

Basic panel

Demo content

Demo hide, + code

.panel { &>h3 {background:#70dea5; border:1px solid #2dac6a; color:black; text-align: center;} &>h3 a { color: white; } &>div {background:#c0ecd5; border:1px solid #2dac6a; color:black;} }
Gallevoir's Avatarhypermode-12.pngGallevoir
Gallevoir's Avatar
hypermode.pngarceus.pngb.png

QUOTE originally posted by Tarashia

The clickable area in a hidebox is a link/anchor so you need to set the color on "&>h3 a" as well. That code also affects quotes and other panel types, so keep both the link and non-link colors set, don't just switch to changing to the link only.
Ohhhh, that's interesting that they're separated out like that! You learn something new every day. Thanks much!
pantherra's Avatarpantherra
pantherra's Avatar
elite.png
I'm going insane, I've been trying to make certain pokemon/eggs in the shelter have a colored background so I can find them more easily, but I don't get css AT ALL, please help I've been trying for 4 days T.T
veliona's Avatarveliona
veliona's Avatar
ultra.pngd.png
this thread has a shelter spotting css you can add to your site skin. hope this helps c:
Übercharm

Übercharm

Account Upgrade

(item.png: 0)

An overpowered charm that, when activated, massively increases your chances of hatching Melanistic Pokémon for 28 days.

Sells for 2,000

Lv. 100 — Locked
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
SteelPsychic
Happiness 27%
Rash nature
ic: official hi3 art
Riaxxu's Avatarhypermode-12.pngRiaxxu
Riaxxu's Avatar
hypermode.pngarceus.pngd+.png
I don't know if this is the right place to put this so if not please let me know. But anytime I try to produce the mini phione melan sprite it comes out looking like the regular mini phione sprite. Is there a way I can fix this?

Example

n.png

code

[pkmn = phione (M)]
Will take any and all unwanted Celebi's My Shop
GS Balls
68/1000
Code help: Tarashia || Journal || Icon Artsu by Cøbaltøad

Pages: 123··· 6364656667··· 828384

Cannot post: Please log in to post

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