Support » Plugin: Lightweight Accordion » Different Stylings on one page

  • Resolved dirkliesenfeld

    (@dirkliesenfeld)


    Is it possible to use different stylings for accordions, that are on the same page? Like one accordion with red background and another one with a blue one?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Andy Feliciotti

    (@someguy9)

    @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!

    Thread Starter dirkliesenfeld

    (@dirkliesenfeld)

    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?

    Plugin Author Andy Feliciotti

    (@someguy9)

    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.

    Thread Starter dirkliesenfeld

    (@dirkliesenfeld)

    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?

    Plugin Author Andy Feliciotti

    (@someguy9)

    @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

    Thread Starter dirkliesenfeld

    (@dirkliesenfeld)

    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>
    Thread Starter dirkliesenfeld

    (@dirkliesenfeld)

    Plugin Author Andy Feliciotti

    (@someguy9)

    Looking good!

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.