pearse-danker
I'm new here

CSS von FS_Button mit style = "firstspirit" für ContentCreator überschreiben

Hallo Community,

Vielleicht konnt ihr mir helfen. Ich will meine FS_Buttons im ContentCreator ein anderes Styling verpassen.

Und Ich habe es bisher nicht geschafft, da das FirstSpirit inject.css meine Styles immer überschreibt.

Mein Beispiel-CSS:

span.fs-button-firstspirit.fs-button-firstspirit-hover{

     color:green !important;

}

FirstSpirit CSS:

.fs-button-firstspirit *{

c     color: #000000 !important;

}

Danke für jede Hilfe.

Grüsse

Sebastian

0 Kudos
5 Replies
rednoss
I'm new here

Hallo Sebastian,

um die CSS Eigenschaften zu überschreiben musst du dich nach dem inject.css einklicken und dann diese überschreiben.

Viele Grüße

Rene

0 Kudos

Kannst Du ein paar mehr Details dazu mitteilen, wie das Ganze funktioniert? Die gleiche Anfrage habe ich gerade vorliegen.

0 Kudos

Hallo Sven,

um das CSS zu überschreiben musst Du Deine CSS Eigenschaften später als die der inject.css ausführen. Da die inject.css im DOM aber später geladen wird, benötigst du ein Skript, dass Deine CSS Datei nachlädt.

In der CSS Datei kannst du dann entweder den CSS Selektor genauer spezifizieren oder den gleichen CSS Selektor verwenden unter der Prämisse, dass du auch ein !important Statement verwendest.

Viele Grüße

Rene

Hallo Rene,

könntest du bitte die Skriptlösung noch spezifizieren.

Sitze an dieser Herausforderung nun schon eine zeitlang und bekomme meine css Datei im DOM nicht hinter die inject.css geladen.

Sehe ich das richtig, dass ich mit javascript in den Templates nicht weiterkomme?

Die inject.css wird ja in den DOM geladen, wenn sämtlicher Code der Templates schon ausgeführt wurde und in einem iframe sitzt.

Danke.

Viele Grüße

Michael

0 Kudos

Hallo Michael,

ich habe in meinem <body> folgendes <div> implementiert:

<div class="fs-changemask-solid">

          <h1>Test Ueberschrift</h1>

</div>

Der class-Name stimmt mit einem aus der inject.css angesprochenen überein. Mit jQuery lade ich dann eine css-Datei nach, in der ich den gleichen class-Namen anspreche. Zusätzlich habe in meine Ausdruck mit !important priorisiert.

Script:

<script type="text/javascript" src="$CMS_REF(media:"jquery_211min")$"></script>

<script type="text/javascript">

          $( document ).ready(function() {

                        $('head').append('<link rel="stylesheet" href="$CMS_REF(media:"style2")$" type="text/css" />');

          });

</script>

CSS:

.fs-changemask-solid {

          opacity:0.5 !important;

}

Viele Grüße

Rene

0 Kudos