Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag10.07.2010 um 12:06 (UTC)    
Titel: Tutorial: CSS: Designwechsel bei Klick auf bestimmte Seite

Hallo Leute.

Dieses Tutorial schreibe ich mit freundlicher Unterstützung von badweb.de.tl, da er mir geschrieben hat, wie es funktioniert. Ich finde es eigentlich sehr schade, dass man so etwas nicht im Forum findet, bei Tutorials oder so, deshalb schreibe ich jetzt noch einmal auf, wie es funktioniert. Vielleicht kann man es ja in den Tutorial Bereich verschieben.

Tutorial: Beim Klick auf eine bestimmte Seite auf der Homepage, soll sich die Header-Grafik ändern.


Schritt 1)
Einloggen im Homepage-Baukasten.

Schritt 2)
Die Styleanweisungen für den Header müssen in einen Teil der Seite, die sich ändert. Wenn eine neue Seite aufgerufen wird, ändert sich auch der Content. Also schreiben wir die Styleanweisungen für den Header in den Content.

Schritt 3)
Man sucht sich also unter "Design einstellen" - "CSS-Design" - "CSS Code ohne Style Tags" alle Anweisungen heraus, die etwas mit dem Header zu tun haben, kopiert diese Anweisungen und löscht sie aus dem CSS Code.

Die Standardklassen, die den Header beschreiben sind im HpBk:

#header_container = Header Box
h1#header = Titelfeld im Header

Schritt 4)
Die Anweisungen, die man vorher kopiert hat, fügt man nun unter "Eigene Seiten editieren" in den Quellcode der gewünschten Seite ein.

Code:
<style type="text/css">
Hier die kopierten Anweisungen einfügen
</style>


Auf diese einfache Art und Weise kann man den Header bzw. das Design für jede Seite auf der Homepage individuell wechseln bzw. gestalten.
______________
Theos Welt und Co. verabschiedet sich nach einer wunderschönen Zeit mit euch aus dem Homepage-Baukasten mit einem dicken Dankeschön an alle, die mich während meiner Baukasten Zeit so weit gebracht haben. Warum Theos Welt und Co. sich aus dem Baukasten verabschiedet, könnt ihr in meinem Promotion-Thread und auf der Startseite von TheosWelt lesen. HpBk-TemplateWorld ist davon nicht betroffen!!


Zuletzt bearbeitet von theoswelt am 18.10.2010, 14:05, insgesamt 3-mal bearbeitet
Beitrag10.07.2010 um 14:33 (UTC)    
Titel:

Schritt 3)
Man sucht sich also unter "Design einstellen" - "CSS-Design" - "CSS Code ohne Style Tags" alle Anweisungen heraus, die etwas mit dem Header zu tun haben. Kopiert diese Anweisungen und löscht sie aus dem CSS Code.
Vielleicht zuerst das Kopieren erwähnen, dann das Löschen, sonst gibts eventuell Frust.
Die Standartklassen die den Header beschreiben sind im HpBk
#header_container = Header Box
h1#header = Titelfeld im Header

Schritt 4)
Anschließend klickt man im Seiteneditor der zubearbeitenden Seite auf "Quellcode" und fügt folgenden Code ein:
Code:
<style type="text/css">
Hier die kopierten Anweisungen einfügen
</style>

Ohne den HTML Code kann der Browser den Css Code nicht auslesen und interpretiert ihn als einfachen Text.


Rein theoretisch kannst du den Namen des Tutorials in "Designwechsel bei Klick auf bestimmte Seite" nennen, da du so pro Seite ein komplett anderes Design einfügen kannst.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.


Zuletzt bearbeitet von badweb am 10.07.2010, 17:27, insgesamt einmal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de