Accordion header

  • Hi,
    I want to change some of the attributes of the accordion header title by adding a user specified class. But adding it to either accordion or pane doesn’t work.

    I can only manage this by specifying in my custom css: .kt-accordion-id_29e692-eb .kt-blocks-accordion-header { font-size:2em;} But this spec is only valid for the specific id. Using .kt-block-accordion-header alone works only for those attributes not used by .kt-accordion-id_29e692-eb. (e.g. background-color)

    I would, of course, prefer the most flexible solution in chapter 1.
    Thanks for help,
    Walter

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hey,
    The custom classes will output in the pane wrapper or if you add to the accordion in the accordion wrapper. That would allow you to target either a specific panes title or the titles of an entire accordion.

    For example: .your_custom_class .kt-block-accordion-header

    An example for a pane :

    .wp-block-kadence-pane.your_custom_class .kt-blocks-accordion-header {
    background: green;
}

    Unless I am misunderstanding this should work for you. Can you give me more information about what you are wanting so I can test the use case to see?

    Ben

    Thread Starter amay66

    (@amay66)

    By using .wp-block-kadence-accordion.your_custom_class instead of .wp-block-kadence-pane.your_custom_class I will achieve what I want. Thank you very much.

    IMHO it would be easier for the user (non html-expert like me) by splitting up the specification for accordion into e.g. accordion (as a wole), header, content, etc., to be able to assign custom_classes to each item separately.

    BTW I like your block library more than any other. Good job so far. ??
    Best wishes,
    Walter

    Thanks!

    I can see what you mean about it being easier, Gutenberg doesn’t have that kind of control built in and it hasn’t been a request that I’ve seen so not really been on my radar.

    Ben

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Accordion header’ is closed to new replies.