Loading...

Top
PFQ Banner

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

Already a user? New to PFQ?

changing text color within accordion

Forum Index > Core > Help >

Piffposh's AvatarPiffposh
Piffposh's Avatar
ok, i know this is the second time i've posted about accordions on this forum, but my last thread that got answered has been deleted, so here i am lol. i want to change the text within an accordion, not of the header. here's what my code looks like right now: .panel.accordion{ a{color:#CCCCCC;} h3{background-color: #64493E;} background-color: #E2FFCD; color: #004000; } background-color is working for the accordion sections but color is not for some reason.
avatar is official art from the JJBA anime | journal | shop | やれやれだぜ…
Tarashia's AvatarTarashia
Tarashia's Avatar
If you're changing the h3's background color, you need to change its text color too in case a user's skin clashes with you color choices. Just add the color (text color) property to your h3 block, and set it differently than the main color. Edit: ok so I actually tested that and I'm a dummy and it didn't work. Unfortunately I'm also on mobile so I can't look closer. Have you used your browser dev tools before? You can inspect your accordion header and body to see what code is setting its text color, then use that as a guide to make sure your code overwrites it. I suspect someone will answer before I get home today, but if not I'll come back and do this right. I'm sorry.
Piffposh's AvatarPiffposh
Piffposh's Avatar
edit: sorry, i posted that before i saw that you had edited your post ^^; yeah i have been using inspect element and all that good stuff, but haven't found any clues. i'll keep looking in the meantime, thank you for your reply :)
Tarashia's AvatarTarashia
Tarashia's Avatar
Oh, ok, that gives me a clue to what happened. In my test, the body color wasn't changing either which threw me. You just need an "h3 a" section for the header, and then a >div to make sure the body text changes too. The > makes it so that code only affects direct children of the accordion class, and not other div elements you might add as content.

Example 1

Content 1 Google

Example 2

Content 2

Example 3

Content 3

Code

[accordion=1] [a-section=Example 1]Content 1 [url=https://google.com]Google [/url][/a-section] [a-section=Example 2]Content 2[/a-section] [a-section=Example 3]Content 3[/a-section] [/accordion] [style] .panel.accordion{ a{color: yellow;} h3{background-color: white;} h3 a{color:green;} >div{background-color: black; color: red;} }[/style]
Piffposh's AvatarPiffposh
Piffposh's Avatar
wow, this worked perfectly! i can't thank you enough! i appreciate your explanation as i had no idea about the properties of > in css :)

Cannot post: Please log in to post

© PokéFarm 2009-2019 (Full details)Contact | Rules | Privacy | WikiGet shortlink for this page