Styling CKEditor Accordion via a subtheme

Created on 26 December 2020, almost 4 years ago
Updated 31 January 2024, 10 months ago

Problem/Motivation

I am having trouble overriding the ckeditor accordion cascading style sheet in a subtheme.

This is really a request for sub-theming assistance, I suppose

Steps to reproduce

Here is the latest attempt in mytheme.info.yml file:

libraries-override:
  modules/contrib/ckeditor_accordion/accordion_style:
      css:
        component:
          /modules/contrib/ckeditor_accordion/css/ckeditor-accordion.css: assets/css/ckeditor-accordion.css

In mytheme.libraries.yml

ckeditor-accordion:
  css:
    theme:
      assets/css/ckeditor-accordion.css: {}

Proposed resolution

Since these haven't worked, I am just asking for the appropriate code to override (or extend) the stylesheet for this module

Remaining tasks

User interface changes

API changes

Data model changes

πŸ’¬ Support request
Status

Closed: works as designed

Version

1.3

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States bas123

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡¦πŸ‡ΊAustralia Ryanm81

    I am having the same issue for Drupal 10.1.

    I can remove both the JS and CSS by using the following in my custom theme's .info file fine:

    libraries-override:
    ckeditor_accordion/accordion.frontend: false

    However I don't want to remove the JS, only the CSS, and have tried many combinations to get this to work without success. From my knowledge this below should work but it doesn't:

    libraries-override:
    ckeditor_accordion/accordion.frontend:
    css:
    theme:
    css/accordion.frontend.css: false

    The fact the first option removes both the JS and CSS suggests it is not a problem with base url or path, am I missing some syntax or something?

  • πŸ‡ΊπŸ‡ΈUnited States srdtwc Skokie, IL

    In your theme.info file you want something like this

    libraries-override:
      ckeditor_accordion/accordion.frontend:
        css:
          theme:
            css/accordion.frontend.css: false
    
  • πŸ‡ΊπŸ‡ΈUnited States coupertrouper

    Just commenting here to let others know that @srdtwc's solution worked for me. With YML files, from my understanding, syntax is really important otherwise they won't work correctly.

    In @Ryanm81's code, everything under "theme" needs to be indented one more time so that it matches @srdtwc's example.

    After implementing the 'libraries-override' bit in my theme's mytheme.libraries.yml file, all styling was basically removed that comes with CKEditor Accordion and I was able to add my own styles, bit by bit.

    I'm not sure if this is sustainable longterm because if the module changes, my CSS will probably break. But until then... this will have to do in my case.

    @Ryanm81, hopefully you were able to override it successfully!

Production build 0.71.5 2024