@dirkliesenfeld Are you using the shortcode or gutenberg? Either way you can set colors for those elements using the documentation. Granted custom css may be overwriting it, let me know if that is the case!
Yes, I used (as described in my former post) a custom css. Is there a way to target different css-values from different accordions on the same page? Probably not, right?
Are you using the block or shortcode? Either way you can use the custom class option to add a custom class and target specific styles. Let me know if a video tutorial is needed.
I added it using the block. In the header, I put this code:
<style>
.lightweight-accordion .lightweight-accordion-title {background: #E6D7C3 !important;border-radius:10px 10px 0 0;}
.lightweight-accordion-title span{margin-left:5px;}
.lightweight-accordion-body {background-image: linear-gradient(#E6D7C3, #FFF7E9);}
.lightweight-accordion details[open] summary ~ * {animation: lwopen 1s ease-in-out !important;}
.has-small-font-size {font-size: unset !important;}
.lightweight-accordion-title::marker{content:"➕";font-size: 1.1em;float: left;clear:both;}
details[open] .lightweight-accordion-title::marker{content:"➖";font-size: 1.1em;float: left;clear:both;}
.wp-block-image img {margin-left: 5px;}
ul {margin-top: -5px !important;list-style-type: "• " !important;}
.lighter{background: #E6D700 !important;}
</style>
When I now add the class “lighter” to the block, only the background of the block is affected and not the lightweight-accordion-title.
So – is there a way to target e.g. .lightweight-accordion-title for different accordions on the same page?
@dirkliesenfeld Yeah with your current code you can target stuff with a specific class. Instead of just setting the BG since the title and body have a background set you’ll want to unset those like below.
.lighter .lightweight-accordion-title {background:none!important}
.lighter .lightweight-accordion-body {background:none!important}
.lighter{background:#E6D700!important;}
Let me know if this helps
Ahhh – silly me. Should brush up my css-basics 😉
Changed the code as follows and assigned .lighter to the accordions with the different look. Looks perfect, as you can see:
Thank you so much for your help.
<style>
.lightweight-accordion .lightweight-accordion-title {background: #abc1a1 !important;border-radius:10px 10px 0 0;}
.lightweight-accordion-body {background-image: linear-gradient(#abc1a1, #FFF7E9);}
.lightweight-accordion details[open] summary ~ * {animation: lwopen 1s ease-in-out !important;}
.has-small-font-size {font-size: unset !important;}
.lightweight-accordion-title::marker{content:"➕";font-size: 1.1em;float: left;clear:both;}
details[open] .lightweight-accordion-title::marker{content:"➖";font-size: 1.1em;float: left;clear:both;}
.wp-block-image img {margin-left: 5px;}
ul {margin-top: -5px !important;list-style-type: "• " !important;}
.lighter .lightweight-accordion-title {background:#E6D7C3!important;border-radius:10px 10px 0 0;}
.lighter .lightweight-accordion-body {background-image: linear-gradient(#E6D7C3, #FFF7E9);}
</style>
