Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

Benutzung Platzhalter {...} in CSS

Begonnen von Fischi, 22. Mai 2024, 09:23:30

« vorheriges - nächstes »
Drucken
Nach unten Seiten1
Benutzer-Aktionen

Fischi

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.

marusti

#1
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:

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

Code Auswählen
.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=@]

marusti

#2
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

stefan-wasp

#3
23. Mai 2024, 22:20:44 Letzte Bearbeitung: 23. Mai 2024, 22:30:42 von stefan-wasp
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
Use: UTF-8 w/o BOM

stefan-wasp

#4
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:

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

Ggf. mit unbeliebtem !important - arbeiten .. ist aber eigentlich nicht notwendig.
Use: UTF-8 w/o BOM

Fischi

#5
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ß

Fischi

#6
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ß
Drucken
Nach oben Seiten1
Benutzer-Aktionen