Moin,
dass Du das mit !important machen musst, liegt an der Reihenfolge, in der die CSS-Dateien geladen werden. Deine CSS-Anweisungen werden zuerst geladen, und dann erst das CSS vom Akkordion.
Das ist auch bei anderen Inhaltselementen so, die mit eigenem CSS ausgeliefert werden (Content-Slider und Code).
Meiner Meinung ist das ein Bug. Das CSS der Inhaltselemente sollte zuerst im Quelltext eingebunden werden und erst dann die eigenen CSS bzw. die CSS-Dateien des Themes. Denn nur so kann man das CSS einfach per custom.css (und ohne !important) überschreiben.
Alternativ kann man auch das Template für das Akkordion ändern und das mitgelieferte CSS gar nicht laden:
Code:
{% extends "@Contao/content_element/accordion.html.twig" %}
{#
** Add changes to the base template here. **
Hint: Try adjusting blocks and attributes instead of
overwriting the whole template. This way your version
can remain compatible with future changes to the base
template as well as adjustments made by extensions.
Currently available blocks:
"stylesheet_component", "content", "element",
"element_header", "element_content", "script",
"init_options", "style", "headline_component",
"headline_attributes", "headline_inner",
"wrapper", "wrapper_tag", "attributes", "inner",
"metadata"
Example:
{% block stylesheet_component %}
{{ parent() }}
My additional content for 'stylesheet_component'…
{% endblock %}
#}
{% block style %}
{# do not load any accordion stylesheets - declare it in your own css file #}
{% endblock %}
Dann muss man allerdings das komplette CSS für das Akkordion selber schreiben. Oder man kopiert sich das Akkordion CSS von github, schreibt nur die Teile um, die man anders haben möchte und bindet das in sein CSS ein:
https://github.com/contao-components.../handorgel.css
Gruß
Mathias
Lesezeichen