Dynamische CSS definierte Header!?

[planetsuhl]

Moin moin Folks,

bin relativ neu auf dieser Plattform - und suche hilfe:

Ich habe schon gesucht, aber noch nichts passendes gefunden - oder ich habe es nicht verstanden.

Ich habe ein Projekt, welches erfordert, das ich für alle Navigationshauptpunkte ein eigenes Headerbild anzeige.

z.B:

Navigation:
Punkt 1 -> (Header Bild 1)
- Unterpunkt 1-1 -> (Header Bild 1)
- Unterpunkt 1-2 -> (Header Bild 1)

Punkt 2 -> (Header Bild 2)
- Unterpunkt 2-1 -> (Header Bild 2)
- Unterpunkt 2-2 -> (Header Bild 2)
- Unterpunkt 2-3 -> (Header Bild 2)

Punkt 3 -> (Header Bild 3)
- Unterpunkt 3-1 -> (Header Bild 3)
- Unterpunkt 3-2 -> (Header Bild 3)
- Unterpunkt 3-3 -> (Header Bild 3)


Im Moment habe ich 1 CSS Definition, mit einem Bild für alle 8 Navigationspunkte. Ich würde nun gerne die "Seitentitel" abfragen, und aus den "Seitentiteln" und und dem Namensstamm (xxx_back.jpg) Dynamisch auf die entsprechenden Bilder zugreifen.

Seht Ihr a eine Chance?!

Mein Header Bild ist im Moment im CSS über folgenden Code integriert:

Code: Select all

.kopfzeile {
   width: 1024px;
   \width: 1024px;
   w\idth: 1024px;
   height: 269px;
   margin-left: auto;
   margin-right: auto;
   background: url(../../picture/hintergrund/home_back_01.jpg) repeat-y;
}

[swisscheese]

Hallo Planetsuhl

Siehe diesen Post.

Gruss swisscheese

[EnticeAngel]

Hallo Planetsuhl,

das einfachste wäre doch für den Anfang einfach die Vorlage zu kopieren, zu verändern
und dann den entsprechenden Ebenen (Struktur) zu zuordnen.

So kann man schnell ohne große Kenntnis und Übung für jede Seite ein anderes Layout (Bild) verwenden

[planetsuhl]

Hallo Planetsuhl,

das einfachste wäre doch für den Anfang einfach die Vorlage zu kopieren, zu verändern
und dann den entsprechenden Ebenen (Struktur) zu zuordnen.

So kann man schnell ohne große Kenntnis und Übung für jede Seite ein anderes Layout (Bild) verwenden

Hallo EnticeAngel,

genau das wollte ich vermeiden. Mit 8 verschiedenen Vorlagen, muss mann auch bei jeder Umstellung im Layout 8 mal nachbessern...

Nicht so Ideal! Aber danke!

[planetsuhl]

Hallo Planetsuhl

Siehe diesen Post.

Gruss swisscheese

Hallo Swisscheese,...

ich habe diesen Thread schon gelesen. Aber irgendwie werde ich da nicht so richtig schlau draus.

Wie wird das dann in der CSS eingebunden, und in der Vorlage?!
planetsuhl -> a bit stupid!

[Cipolla]

wenn du es dynamisch haben möchtest geht das auch:

Schreib das in deine Vorlage (Template) in den Head-bereich:

Code: Select all

<style type="text/css" media="screen">
.kopfzeile {
background-image: url(../../picture/hintergrund/[PHP]echo $GLOBALS['content']['cat'];[/PHP]_back.jpg) repeat-y;
}
</style>

Wenn deine Kategorie also "Home" lautet heißt dein Header-Bild "Home_back.jpg" (Achtung Groß / Kleinschreibung beachten!)

GGfs. in der CSS die background-formatierung in der klasse "Kopfzeile" rausnehmen.

[Jensensen]

schon reichlich dazu, jüngst:
http://forum.phpwcms.org/viewtopic.php? ... ndom+image

[planetsuhl]

schon reichlich dazu, jüngst:
http://forum.phpwcms.org/viewtopic.php? ... ndom+image

das ist auch ne gute Idee - aber wenn ich den ganzen Thread durchlese, habe ich eher den Eindruck dass dies eine Lösung ist, die man in die Vorlage einbauen kann, aber nicht im CSS verewigen! ;(

[Jensensen]

Vorlagen (incl. PHP, FE renderer...) sind für die Ewigkeit - CSS für den Augenblick

[planetsuhl]

Vorlagen (incl. PHP, FE renderer...) sind für die Ewigkeit - CSS für den Augenblick

Da hast natürlich recht! Nichts desto trotz würde ich gerne etwas haben, was mir den Hintergrund aus ner CSS ausliest. Da ich innerhalb der Vorlage nur noch Elemente über den Hintergrund positionieren will, und nicht den Hintergrund selber auch noch!

Also - noch einer ne Idee?

wenn du es dynamisch haben möchtest geht das auch:

Schreib das in deine Vorlage (Template) in den Head-bereich:

Code: Select all

<style type="text/css" media="screen">
.kopfzeile {
background-image: url(../../picture/hintergrund/[PHP]echo $GLOBALS['content']['cat'];[/PHP]_back.jpg) repeat-y;
}
</style>

Wenn deine Kategorie also "Home" lautet heißt dein Header-Bild "Home_back.jpg" (Achtung Groß / Kleinschreibung beachten!)

GGfs. in der CSS die background-formatierung in der klasse "Kopfzeile" rausnehmen.

Danke für den Tipp... ich habe das probiert - aber es passiert gar nix! ;-(

[update]

Ich hatte mal vor Urzeiten das in Verwendung: http://forum.phpwcms.org/viewtopic.php? ... lit=random - ein Frontend render scriptchen...
Funktioniert hervorragend!
Nur noch ftp und paff!
Drawbacks: sollte man von alias auf id umfummeln und einen defaultwert angeben - dann wäre das optimal

PS: ich glaube, ich werde mir das noch mal zur Brust nehmen und mit dem body id / classes thread vermixen

[Jensensen]

[x]

[Cipolla]

..viele Wege führen nach rom. Ich mag die Body_id Thematik auch, aber das geht auch mit nur einem RT:

Irgendwo auf der Seite steht ja sowas in der art:

Code: Select all

<div class="kopfzeile">....</div>

jetzt nutzen wir den schönen {PAGETITLE} RT von flip-flop:

Code: Select all

<?php
// PAGETITLE replacement
if( ! (strpos($content["all"],'{PAGETITLE}')===false)) {
   $content["all"] = str_replace('{PAGETITLE}', $content["struct"][$content["cat_id"]]
["acat_name"], $content["all"]);
} ?>

speichern diesen code z.b. als reptag_pagetitle.php in das verzeichnis template/inc_script/frontend_render

Siehe auch -> http://forum.phpwcms.org/viewtopic.php?p=80987

Jetzt die zeile im template wie folgt ändern:

Code: Select all

<div class="kopfzeile" style="background: url(../../picture/hintergrund/{PAGETITLE}_back.jpg) repeat-y;">
....
</div>

und dann in deiner css:

Code: Select all

.kopfzeile {
   width: 1024px;
   \width: 1024px;
   w\idth: 1024px;
   height: 269px;
   margin-left: auto;
   margin-right: auto;
}

Heißt deine Seite/Kategorie z.B. --> Home ergibt das im quelltext:

Code: Select all

<div class="kopfzeile" style="background: url(../../picture/hintergrund/Home_back.jpg) repeat-y;">
....
</div>

Jetzt nur noch die Hintergründe hochladen im Format (Seitentitel)_back.jpg und fertig. Wie gesagt, auf Groß-/Kleinschreibung achten!

Noch einfacher geht es mit der aktuellen 1.3.9. Hier ist der RT bereits eingebaut und lautet {CATEGORY}

Code: Select all

<div class="kopfzeile" style="background: url(../../picture/hintergrund/{CATEGORY}_back.jpg) repeat-y;">
....
</div>

Dann brauchst du den Pagetitle-RT nicht erstellen / Hochladen!

[flip-flop]

Grundsätzliches zu RTs:

Immer immer diesen Code im RT vorschalten:

Code: Select all

// ----------------------------------------------------------------
// obligate check for phpwcms constants
if (!defined('PHPWCMS_ROOT')) {
   die("You Cannot Access This Script Directly, Have a Nice Day.");
}
// ----------------------------------------------------------------

(Ich weiß dass das im Originalposting noch nicht geändert ist).

[EDIT] Jetzt aber [/EDIT]

Knut

[planetsuhl]

..viele Wege führen nach rom. Ich mag die Body_id Thematik auch, aber das geht auch mit nur einem RT:

Irgendwo auf der Seite steht ja sowas in der art:

Code: Select all

<div class="kopfzeile">....</div>

jetzt nutzen wir den schönen {PAGETITLE} RT von flip-flop:

Code: Select all

<?php
// PAGETITLE replacement
if( ! (strpos($content["all"],'{PAGETITLE}')===false)) {
   $content["all"] = str_replace('{PAGETITLE}', $content["struct"][$content["cat_id"]]
["acat_name"], $content["all"]);
} ?>

speichern diesen code z.b. als reptag_pagetitle.php in das verzeichnis template/inc_script/frontend_render

Siehe auch -> http://forum.phpwcms.org/viewtopic.php?p=80987

Jetzt die zeile im template wie folgt ändern:

Code: Select all

<div class="kopfzeile" style="background: url(../../picture/hintergrund/{PAGETITLE}_back.jpg) repeat-y;">
....
</div>

und dann in deiner css:

Code: Select all

.kopfzeile {
   width: 1024px;
   \width: 1024px;
   w\idth: 1024px;
   height: 269px;
   margin-left: auto;
   margin-right: auto;
}

Heißt deine Seite/Kategorie z.B. --> Home ergibt das im quelltext:

Code: Select all

<div class="kopfzeile" style="background: url(../../picture/hintergrund/Home_back.jpg) repeat-y;">
....
</div>

Jetzt nur noch die Hintergründe hochladen im Format (Seitentitel)_back.jpg und fertig. Wie gesagt, auf Groß-/Kleinschreibung achten!

Noch einfacher geht es mit der aktuellen 1.3.9. Hier ist der RT bereits eingebaut und lautet {CATEGORY}

Code: Select all

<div class="kopfzeile" style="background: url(../../picture/hintergrund/{CATEGORY}_back.jpg) repeat-y;">
....
</div>

Dann brauchst du den Pagetitle-RT nicht erstellen / Hochladen!

Das ist ne Super Anleitung! Selbst Idioten wie ich schnallen das damit! Danke!...

Funktiniert auch fast alles perfekt. Als {PAGETITLE} wird allerdings nicht der "Seitentitel" sondern die "Seitenebene Überschrift": ausgegeben... habe ich was übersehen? LG