Archived topic
Accordion Code is picking up color from ??
7 replies · Started by sevite on October 7, 2021
Hello,
This is a pretty basic CSS / html question I think, in figuring out what I need to do to get it to not pick up any other defaults set in Generate Press.
I created a basic accordion in W3 Schools and on their 'try it' page the colors behave as expected with the header/button background and text the same color as the accordion panel so the whole thing is very subtle. When the panel is open on the 'try it' page the header/button remains the light brown color.
However, when I put it on my website it appears the panel is picking up a default font color and I have no idea why the header/button is appearing black or nearly black when the panel is open.
I found a dark setting in Appearance > Customization called Archive Content Title hover. Is it picking that up? Where else does that show on the site? Or do we have some button default?
What do I need to do so the accordion is not picking up defaults from elsewhere?
Thanks!
Pam
Here is the page: https://parvati.world/pamsoty/
And here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #d0b99f;
color: #78583c;
cursor: pointer;
padding: 0px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 17px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #d0b99f;
color: #57391f;
}
.panel {
padding: 0 0px;
display: none;
background-color: #d0b99f;
color: #78583c !important;
overflow: hidden;
}
</style>
</head>
<body>
<button class="accordion" >Read more... </button>
“Song of the Year” is the work of the award-winning Canadian
musician Parvati, a Renaissance woman who composes, performs,
produces and mixes her own songs in addition to being an
author, educator, and the CEO of the multinational charity Parvati
Foundation. Her “Celestial Pop” sound and production quality
have been hailed by some of the best producers in the industry.
“Song of the Year” brings immediate appeal, reminiscent of Taylor
Swift, Hailee Steinfeld, and Katy Perry. It addresses our planet’s
fever with a refreshing blend of hopefulness and practicality.
But the power of the song is not just in its radio-readiness or its
capacity to lighten hearts and footprints. Nor is it just that this
song has been donated to Parvati Foundation and all its proceeds
are going to the foundation’s future humanitarian work. Beyond
these, “Song of the Year” is unique in the directness, effectiveness,
and compassion of the cause it advances: MAPS, the Marine
Arctic Peace Sanctuary.<br><br>
Few people realize today that the food, water, and safety of
every living being on Earth depends on the health of the Arctic
Ocean—which is now in grave danger. As Arctic ice disappears
at the alarming rate of 14,000 tons per second, corporations and
countries are moving in to profit off the thaw—at the cost of us all.
MAPS, the only initiative of its kind, changes international law to
establish the largest marine protected area in history. Safeguarding
the entire Arctic Ocean north of the Arctic Circle from exploitation,
it is a baseline necessity for our collective future. “Song of the
Year” has been launched to support 50 million MAPS petition
signatures leading into COP 26, the UN climate conference in
Glasgow this November. At the same time, it is being sent to every
world leader along with the MAPS Treaty for immediate signature.<br><br>
As James Gustave Speth, the American environmental lawyer
and advocate who cofounded the Natural Resources Defence
Council, said, “I used to think the top environmental problems
were biodiversity loss, ecosystem collapse and climate change...
But I was wrong. The top environmental problems are selfishness,
greed and apathy... and to deal with those we need a cultural
transformation.” Parvati Foundation is creating that transformation
through Gift the World, its global education strategy to realize
MAPS. “Song of the Year” is the beginning of something beautiful.<br><br>
The leadoff track of Parvati’s “Ocean Anthem” album dedicated to
MAPS, “Song of the Year” will launch soon to streaming platforms
and is already in radio rotation globally. Don’t wait to make your
voice heard at Parvati.org. It literally means the world </p>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</body>
</html>
Hi Pam,
I'm not sure I see the accordion. Can you add it back and let me check?
While waiting: If there's no CSS explicitly declared for it, it will likely just inherit the background color of its ancestor element.
If there aren't ancestor element to inherit colors from, It'll likely inherit the colors you've set for Body on Appearance > Customize > Colors.
Hi Elvin,
Thanks for the prompt reply. Sorry for not telling you where the accordion is. It is near the bottom under the words 'Press Release' the header is the words Read more, just above the three logos at the bottom.
I thought I had declared a colour for the header when active and the text in the panel. As noted it gives the expected result in the w3schools sandbox, but not on the site.
I think this is the code for the header when the panel is open
.active, .accordion:hover {
background-color: #d0b99f;
color: #57391f;
}
And for the text in the panel:
.panel {
padding: 0 0px;
display: none;
background-color: #d0b99f;
color: #78583c !important;
overflow: hidden;
}
Thanks, found it.
I'm not exactly sure I see what the issue is. I've checked the part and the CSS seems to work as intended.
You have this CSS:
.accordion {
background-color: #d0b99f;
color: #78583c;
cursor: pointer;
padding: 0px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 17px;
transition: 0.4s;
}and this CSS:
.active, .accordion:hover {
background-color: #d0b99f;
color: #57391f;
}Which basically does no color change because both the default version and the hover version uses the same color values.
Can you explain what's the expected behavior? Were you expecting a color change?
Hi, sorry for the late delay. I was NOT expecting a color change. On three browsers on my computer it turned solid black when active, but my colleague does not see that, which is good.
That leaves us with the text in the panel that is picking up the default grey font color, not the brown in the code
color: #78583c !important;
The container the block is in is set for color text #78583c and next container up is also set color text #78583c
What do I have to do to over-ride the default site text color?
Thanks!
Pam
Hey, my developer showed up and solved it with a more specific p defined. Thanks anyway.
Thank you!
Thanks for letting us know. Glad you got it sorted. :D
