Page 1 of 2

Dynamische CSS definierte Header!?

Posted: Mon 19. May 2008, 14:39
by 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;
}

Re: Dynamische CSS definierte Header!?

Posted: Mon 19. May 2008, 15:09
by swisscheese
Hallo Planetsuhl

Siehe diesen Post.

Gruss swisscheese

Re: Dynamische CSS definierte Header!?

Posted: Mon 19. May 2008, 15:57
by 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 :D

Re: Dynamische CSS definierte Header!?

Posted: Mon 19. May 2008, 16:44
by planetsuhl
EnticeAngel wrote: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 :D
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!

Re: Dynamische CSS definierte Header!?

Posted: Mon 19. May 2008, 16:50
by planetsuhl
swisscheese wrote: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! ;-)

Re: Dynamische CSS definierte Header!?

Posted: Mon 19. May 2008, 17:02
by 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.

Re: Dynamische CSS definierte Header!?

Posted: Mon 19. May 2008, 17:54
by Jensensen

Re: Dynamische CSS definierte Header!?

Posted: Mon 19. May 2008, 20:46
by planetsuhl
Jensensen wrote: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! ;(

Re: Dynamische CSS definierte Header!?

Posted: Mon 19. May 2008, 21:13
by Jensensen
Vorlagen (incl. PHP, FE renderer...) sind für die Ewigkeit - CSS für den Augenblick :wink:

Re: Dynamische CSS definierte Header!?

Posted: Mon 19. May 2008, 21:50
by planetsuhl
Jensensen wrote:Vorlagen (incl. PHP, FE renderer...) sind für die Ewigkeit - CSS für den Augenblick :wink:
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?
Cipolla wrote: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! ;-(

Re: Dynamische CSS definierte Header!?

Posted: Mon 19. May 2008, 22:25
by 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 :mrgreen: :lol:

Re: Dynamische CSS definierte Header!?

Posted: Mon 19. May 2008, 22:33
by Jensensen
[x]

Re: Dynamische CSS definierte Header!?

Posted: Tue 20. May 2008, 10:02
by 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!

Re: Dynamische CSS definierte Header!?

Posted: Tue 20. May 2008, 10:07
by 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 :D [/EDIT]

Knut

Re: Dynamische CSS definierte Header!?

Posted: Tue 20. May 2008, 11:05
by planetsuhl
Cipolla wrote:..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