moziloCMS Supportforum

moziloCMS => Layouts => Thema gestartet von: Fischi am 22. Mai 2024, 09:23:30

Titel: Benutzung Platzhalter {...} in CSS
Beitrag von: Fischi am 22. Mai 2024, 09:23:30
Hallo an alle mozilo-Helden!

Ich möchte nach der Menüwahl (Klick auf Menüpunkt) ganzen Kategorien bzw. einzelnen Seiten einen eigenen Hintergrund zuweisen. Dies aber im CSS. Dem Element body weise ich einen Hintergrund im CSS zu:
body {
    background: url(../grafiken/willkommen.jpg)
}

Kann ich das ganze variabel gestalten, indem ich in CSS die Variablen {CATEGORY_NAME} bzw. {PAGE_NAME} einbinde?
    background-image: url(../grafiken/{CATEGORY_NAME}.jpg);
    background-image: url(../grafiken/{PAGE_NAME}.jpg);

Im Grafiken-Ordner gibt es die entsprechenden Bilder - wie der Name der Kategorie / Seite.

Frage
Kann ich die Platzhalter {...} in CSS überhaupt verwenden?
Wie muß die Syntax sein?

Gruß und vielen Dank schon mal.
Titel: Antw:Benutzung Platzhalter {...} in CSS
Beitrag von: marusti am 23. Mai 2024, 11:04:09
Hallo,

ich habe keine allgemeine Lösung, möchte das aber mal anstoßen. Keine elegante Lösung aber vielleicht kann es jemand aufgreifen und kommt zu einer besseren allgemeinen Lösung.

Meine Idee ist basierend auf dem Rev 55 Standard Layout und Hintergrund soll beim Inhalt eingefügt werden.

eigener Syntax wäre zb:

background = <div class="background">[bild|{VALUE}]</div>
Dann in der css folgendes einfügen

.panel {position: relative} -> müsste bei jedem Update wieder neu eingefügt werden

.background {position: absolute; top:0}

.background img {width:100%; height:100%}

Und dann evtl bei .panel-body noch das padding entfernen und bei .content einfügen.

in der Inhaltsseite erscheint es so

[background|]

dann noch das Bild einfügen

[background|@=Willkommen:mozilo.png=@]
Titel: Antw:Benutzung Platzhalter {...} in CSS
Beitrag von: marusti am 23. Mai 2024, 11:24:40
Alternativ wenn du das Bild über den ganzen Bildschirmbereich legen willst: es gibt das Plugin jQbackstretch https://www.mozilo.de/media/Plugins%202.0/Design%20und%20Layout.html
Titel: Antw:Benutzung Platzhalter {...} in CSS
Beitrag von: stefan-wasp am 23. Mai 2024, 22:20:44
Hallo!
Grad noch etwas Zeit gefunden...
Nach der Schilderung besteht (auch) hier (wieder) ein Thema mit dem ich mich lange befasst habe:
Durch die absoluten / htaccess Pfadanweisungen in z.B. TEMPLATE oder auch verstecken "Modulseiten" (HTML oder auch andere Plgins/Syntaxelement) treten
in moziloCMS Probleme mit der Zuordnung auf (Dateipfad).

Ich habe dazu ein vorhandenes Plugin (FileDate von Arvid (HEJ!) adaptiert von black-night-Daniel Neef - leider macht er nix mehr) modifiziert und daraus "FilePath" kreiert.  ;D

Kurzum:
Die docu zum Plugin ist "quasi nicht vorhanden" (insbesondere im Plugin) - KURZ: "rein netto - wird aus der DATEIAUSWAHL im Editor jeweils die gültige URL der jeweiligen DATEI erzeugt - überall einsetzbar (richtige Syntax CSS/HTML vorausgesetzt)
-- aber ich schicke es jetzt mal hoch ... freue mich natürlich auf (gutes) feedback.

FilePath.zip
Titel: Antw:Benutzung Platzhalter {...} in CSS
Beitrag von: stefan-wasp am 23. Mai 2024, 22:53:07
Direkte Antwort an Fischi:
NEIN.  ???
Dynamisches CSS aka SCSS wird von moziloCMS nicht unterstützt.

Kann ich das ganze variabel gestalten, indem ich in CSS die Variablen {CATEGORY_NAME} bzw. {PAGE_NAME} einbinde?

NEIN, aber: inline-CSS auf der jeweligen Inhaltsseite könnte hier helfen ... ungetestet, etwas wie ein HTML-Aufruf etwa wie:

[html|<style>
    background-image: url("FILEPATH-PluginAufruf und entsprechende Dateiauswahl");
</style>]

Ggf. mit unbeliebtem !important - arbeiten .. ist aber eigentlich nicht notwendig.
Titel: Antw:Benutzung Platzhalter {...} in CSS
Beitrag von: Fischi am 27. Mai 2024, 16:45:44
Hallo und danke an alle Unterstützer.
Bin nach einer Magenverstimmung erst heute wieder online und werde mir alles anschauen.
Schon jetzt muß ich sagen, daß die Tipps meinen Kenntnisstand wohl sehr fordern werden!
Gruß
Titel: Antw:Benutzung Platzhalter {...} in CSS
Beitrag von: Fischi am 05. Juni 2024, 09:02:34
Guten Morgen an alle!
Ich habe mich für folgende Lösung entschieden:
1. Im Template gebe ich dem body eine Klasse mit dem Namen der Kategorie
<body  class="{CATEGORY_NAME}">

2. Im CSS greife ich die im Menü angeklickte Kategorie; weise einen Hintergrund zu und lasse Header + Menü verschwinden. So soll eine reine Inhaltsseite (sie ist in Kategorie Hidden versteckt) eingeblendet werden.
.Hidden  {background: url(../grafiken/bretterwand.jpg) no-repeat center center fixed;}
.Hidden header, .Hidden nav {display: none;}

Das geht mit jeder Kategorie; läßt sich so bestimmt auch auf die einzelne Seite anwenden {PAGE_NAME}.
Flexibel ist es leider nicht! Man muß eben immer wieder im CSS eingreifen, wenn sich das Menü ändert (neue Kategorien / Seiten; Seiten löschen oder umbenennen)

Danke nochmal an alle Helfer.
Gruß