Im Artikel vergebene Klassen werden im Frontend nicht ausgegeben

[kgollmer]

Hallo,

seit kurzem habe ich auf meiner Live-Seite folgendes Problem:
Beispiel hier https://www.ljrbw.de/ehrenamt
Unter Mitarbeit sollte der Link-Text "Jetzt mitmachen!" eigentlich als Button dargestellt werden, dafür habe ich folgendes CSS-Code hinterlegt:

.ljr-button	a {
		background-color: #f39212;
		border: none;
		color: #ffffff;
		padding: .5em 1em;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 1.1rem;
		margin: 2em .1em;
		cursor: pointer;
		-webkit-transition-duration: 0.4s; /* Safari */
		transition-duration: 0.4s;
		box-shadow: 0 5px 7px 0 rgba(0,0,0,0.24),0 8px 10px 0 rgba(0,0,0,0.19);
	}

Aber wie man sieht, interessiert das die Frontend-Ausgabe wenig.
Noch kurioser: meine Klasse wird im Inspektor im umgebenden div-Element sogar angezeigt, nur beim Link selbst wird sie dann ignoriert als wäre keine Klasse vergeben.

Das Problem besteht auch, wenn ich inline Klassen vergebe, bei *fast* allen Contentelementen (also <a href="" class="">).

Auf meiner lokalen Test-Installation, die im Grunde nur eine Spiegelung meiner Live-Seite ist, besteht das Problem nicht

Kann mir jemand sagen, was das verursachen könnte? Ich bin mit meinem Standard-Latein am Ende.

[Kahmoon]

Klingt nach Cache nicht gelöscht. Verschachtelung und Schreibweise sind korrekt. Lösche mal den produktiven Cache über den Contao Manager -> Systemwartung bitte.

[kgollmer]

Hi, danke, den hatte ich tatsächlich schon mehrere Male gelöscht, kein Effekt (habe es jetzt aber spaßeshalber nochmal getan, kein Effekt).

[Kahmoon]

Wie bindest du das css ein? Denn es ist im Quellcode gar nicht vorhanden (also deine Anweisungen). Deshalb wird der Button auch nicht formatiert.

[kgollmer]

Guter Punkt, das war mir dann auch aufgefallen, aber ich kenne nur den Standard-Weg, Änderungen dort, inkl. im Head-Bereich: <link rel="stylesheet/less" href="files/css/basic.less" type="text/css" charset="utf-8" /> haben nix gebracht.
screenshot.323.jpg

[kgollmer]

Also, ich glaube fast es ist ein Server-Problem... oder so. Habe jetzt mal den Haken bei "Scripte zusammenfassen" wieder gesetzt und die Berechtigungen auf rwxr-xr-x gesetzt, jetzt zeigt's das css bedingt an - also, mein Toplink-Button rechts ist wieder da, aber der .ljr-button tut immer noch nicht. Dafür sind jetzt wieder alle Symlinks raus bis auf der, der auf files/css zeigt...

[07alex07]

Also dein Button wird schon richtig angezeigt. Die Eigenschaft ist nur bis zu einer Größe von 64em definiert.

[tab]

Zudem sind da auch einige Fehler im Validator angezeigt bei dem aus dem less-File erzeugten CSS. Keine Ahnung was phpscss dann da draus macht.

[kgollmer]

Also dein Button wird schon richtig angezeigt. Die Eigenschaft ist nur bis zu einer Größe von 64em definiert.

Jein - auch, einige Styles aus meinem CSS sind jetzt wieder aufgetaucht, aber nicht alle Ich habe zwar verschiedene Viewports festgelegt, aber der Button ist da nicht von betroffen, der müsste global so wie beim Handy-Viewport angezeigt werden.

[mlweb]

Der CSS-Code sagt aber etwas anderes. Eindeutig wird der Button nur für Breiten bis 64em gestylt.
Verarbeitet Contao eigentlich Less-Dateien? Bin mir da nicht sicher. Sass wird verarbeitet aber less?

[tab]

Steht zumindest im Seitenlayout so drin, dass man auch less-Dateien hinzufügen kann. Entweder ist der Fehler also schon in der lLESS-Datei oder die Datei wurde nicht korrekt in CSS umgewandelt. Auch der CSS-Validator meckert an der CSS-Datei rum. Eventuell die LESS-Datei mal von einem anderen Programm umwandeln lassen und dann die resultierende CSS-Datei mal einfügen. Oder auch loal mit einer kleinen HTML-Datei testen, ob da alles so funktioniert wie gedacht. Falls ja -> Fehler bei der Umwamdlung seitens Contao. Falls nein -> Wahrscheinlich Fehler in der LESS-Datei.

[kgollmer]

Ich wäre die erste, die den Fehler im eigenen Script sucht, aber es hat ja bis vor etwa zwei Wochen anstandlos getan. Es ist mir nur aufgefallen, weil der Button auf einmal nicht mehr ausgegeben wurde, da glaubte ich noch an einen Update-Fehler. Aber die lokale Testinstallation tut ja auch mit Updates anstandlos.

Aber ich werd morgen nochmal die Tipps abarbeiten, danke schon mal!

[kgollmer]

Es lag defintiv an der .less-Datei, ich habe jetzt mal die aus dem Livesystem gegen die vom Testserver ausgetauscht, jetzt geht es wieder. Danke euch allen!