Swiper CSS Variable überschreiben

[Kopfnuss]

Hey,

ich möchte eine Variable von Swiper überschreiben. Dabei wird die CSS-Datei von Swiper nach meiner CSS-Datei eingebunden und somit kann ich nicht die CSS-Variable überschreiben.

Ich binde mein CSS ganz normal im Seitenlayout ein. Darin definiere ich auch die Variable.

:root {
    --swiper-navigation-size: 3em;
    --swiper-navigation-top-offset: 50%;
    --swiper-navigation-sides-offset: 10px;
}

Im Inspektor wird mir auch meine CSS-Variable angezeigt, aber dann von der originalen aus der Swiper CSS überschrieben.
Wie kann ich die Ladereihenfolge ändern?

Viele Grüße

[dazzle89]

Ich würde es einfach mit !important machen.

[Kopfnuss]

Das geht natürlich.
Wenn man ein Brett vor dem Kopf hat^^

[mdoll]

Moin,

Du könntest auch das Template für den Swiper ändern:

{% 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 swiper stylesheets - declare it in your own css file #}
{% endblock %}

Dann wird die swiper.css gar nicht mehr geladen. Du müsstest dann allerdings das komplette CSS für den Swiper in Dein CSS-File schreiben.

Gruß
Mathias

[BennyBorn]

Im Inspektor wird mir auch meine CSS-Variable angezeigt, aber dann von der originalen aus der Swiper CSS überschrieben.
Wie kann ich die Ladereihenfolge ändern?

Ich würde empfehlen Dein CSS ganz klassisch in der fe_page anzugeben, dann kannst Du nach dem ganzen Kram geladen werden.

<?php

    use Contao\System;

    $rootDir = System::getContainer()->getParameter('kernel.project_dir');

?>

<?php $this->extend('fe_page'); ?>

<?php $this->block('head'); ?>

    <?php $this->parent(); ?>

    <link rel="stylesheet" href="files/theme/css/style.css?<?= filemtime($rootDir.'/files/theme/css/style.css');?>">

<?php $this->endblock(); ?>