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··· 828384

pkspsapphire's Avatarpkspsapphire
pkspsapphire's Avatar

QUOTE originally posted by Doomcard10

Sorry if this has already been answered, but how would I change the color of the sort of glow that appears around accordion boxes?
the "glow" is actually the parameter box-shadow and you can change the color by using the following:

code

[style] .panel { box-shadow: 0 0 8px #COLOR; } [/style]
for example if i wanted it to be green, i would add "green" where "#COLOR" is, to make this:

example

hello!
the "0 0 8px" in order means x-offset, y-offset, and blur. the larger the "8px" number is, the larger the blur will be. setting the x and y offset to zero means the blur stays centered with an equal amount of blur all around the panel. the ".panel" includes hideboxes, accordions, and display boxes, so they will all have the same color glow around them, like so:

example1

hello!

example2

hello!

example

hello!
hope this helps!
  • 🪪
  • 📋
  • 🔗

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

Lv. 100 — +4,377,007
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
430 eggs
Score: 0
credits

credits

Doomcard10's AvatarDoomcard10
Doomcard10's Avatar

QUOTE originally posted by pkspsapphire

QUOTE originally posted by Doomcard10

Sorry if this has already been answered, but how would I change the color of the sort of glow that appears around accordion boxes?
the "glow" is actually the parameter box-shadow and you can change the color by using the following...
Thank you very much! Would you also know how to change the color of the lines used on accordion boxes to match the box-shadow? I didn't realize they were separate, or I would have asked earlier.
pkspsapphire's Avatarpkspsapphire
pkspsapphire's Avatar

QUOTE originally posted by Doomcard10

Thank you very much! Would you also know how to change the color of the lines used on accordion boxes to match the box-shadow? I didn't realize they were separate, or I would have asked earlier.
sure! that parameter is border-color, or simply "border" if youd like to change the width or style.

code

[style] .panel { box-shadow: 0 0 8px #COLOR; border-color: #COLOR; } [/style]
changing both "#COLOR"s to "green" gets you this:

example

hello!
hope that answered your question :] if youd like to change the width or style, however, use the following:

code

[style] .panel { box-shadow: 0 0 8px #COLOR; border: #px style #COLOR; } [/style]
replacing "#px" with "5px","#COLOR" with "green", and "style" with "solid" gives you this:

example

hello!
however you probably would also want to add a border-radius if changing the thickness so that it matches the radius of the box shadow, which you would do like this:

code

[style] .panel { box-shadow: 0 0 8px #COLOR; border: #px style #COLOR; border-radius: #px; } [/style]
replacing border's "#px" with "5px","#COLOR" with "green", border-radius' "#px" with "10px", and "style" with "solid" gives you this:

example

hello!
Doomcard10's AvatarDoomcard10
Doomcard10's Avatar

QUOTE originally posted by pkspsapphire

QUOTE originally posted by Doomcard10

Thank you very much! Would you also know how to change the color of the lines used on accordion boxes to match the box-shadow? I didn't realize they were separate, or I would have asked earlier.
sure! that parameter is border-color, or simply "border" if youd like to change the width or style...
Thank you again! One final question, because I keep discovering how many parts of this are governed by different parameters, how would I change the color of the horizontal dividing line within the accordion?
pkspsapphire's Avatarpkspsapphire
pkspsapphire's Avatar

QUOTE originally posted by Doomcard10

Thank you again! One final question, because I keep discovering how many parts of this are governed by different parameters, how would I change the color of the horizontal dividing line within the accordion?
you can do that using border-bottom in the h3 part of .panel ( which targets the "header" portion of a display, or the clickable part that opens a hidebox or accordion )

code

[style] .panel > h3 { border-bottom: #px style #COLOR; } [/style]
changing "#px" to "1px", "style" to "solid", and "#COLOR" to "green", makes this:

example

hello!
combining all of the previous steps, we would get this:

code

[style] .panel { box-shadow: 0 0 8px green; border: 5px solid green; border-radius: 10px; > h3 { border-bottom: 1px solid green; } } [/style]
hope this helps!!
Doomcard10's AvatarDoomcard10
Doomcard10's Avatar

QUOTE originally posted by pkspsapphire

QUOTE originally posted by Doomcard10

Thank you again! One final question, because I keep discovering how many parts of this are governed by different parameters, how would I change the color of the horizontal dividing line within the accordion?
you can do that using border-bottom in the h3 part of .panel ( which targets the "header" portion of a display, or the clickable part that opens a hidebox or accordion )...
Thank you again so much! You've been a great help! I think that's the last of my questions for now, my about section is all formatted and color-consistent across different themes. I hope you have a wonderful day and a fantastic 2024!

Pages: 123··· 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