Suche im Forum:
Suchen


Autor Nachricht
Beitrag01.08.2009 um 13:55 (UTC)    
Titel: Tutorial: CSS Styleswitcher

Da mich in letzter Zeit einige gefragt haben wie man verschiedene Designs auf seiner Seite anbieten kann die sich der besucher aussuchen kann, habe ich mir überlegt mal ein Tutorial zu schreiben.

Was brauchen wir?

Arrow Einen Webspace (Premium Paket plus, Kilu, Funpic oder Bplaced)
Arrow Geringe Html Kentnisse.

Schritt 1:

Als aller erstes brauchst Du mindestens 2 verschiedene Designs.
Diese müssen abgespeichert werden in Style1.css und Style2.css. Und natürlich das Standard Design dieses wird default.css genannt.

Schritt 2:
Als nächstes musst auf deinen Webspace ein kleines Javascript hochgeladen werden, dieses findest du hier:
http://www.illusion-design.eu/tutorials/styleswitch.js
Copyright: www.dynamicdrive.com

Schritt 3:

Gehe jetzt auf Design Einstellen. Wähle oben CSS Design aus. Klicke nun weiter unten auf Erweiterte Einstellungen.
Bei Text über dem Design kommt folgendes rein:

Code:

<script src="http://www.illusion-design.eu/tutorials/styleswitch.js" type="text/javascript"></script>
<form id="switchform">
<select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)">
<option value="none" selected="selected">Standard Style</option>
<option value="style1">Style 1</option>
<option value="style2">Style 2</option>
</select>


Schritt 4:

Lade deine .css Dateien auf deinen Webspace.
Füge bei CSS ohne Style Tags folgendes ein:

Code:

<link rel="stylesheet" type="text/css" href="LINK ZU DER DATEI default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="style1" href="LINK ZU DER DATEI style1.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="style2" href="LINK ZU DER DATEI style2.css" />


Hier müsst ihr noch euern Link zu der Datei ändern z.B.:

Code:

<link rel="stylesheet" type="text/css" href="http//domainname.de/default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="style1" href="http//domainname.de/style1.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="style2" href="http//domainname.de/style2.css" />



So das wars ich hoffe ich könnte einigen weiterhelfen. Und hoffe das ich es nicht all zu schwer erklärt habe^^

Vielleicht kann es ja ein Mod in Tutorials verschieben =)

Gruss, Yannick Wink
______________
WebDesign | Corporate Design | Redesign



Zuletzt bearbeitet von nuo-designs am 01.08.2009, 15:00, insgesamt 2-mal bearbeitet
Beitrag01.08.2009 um 14:24 (UTC)    
Titel:

Füge bei CSS ohne Style Tags folgendes ein:

Folgendes hast du vergessen:
Zitat:
//-->
<link rel="stylesheet" type="text/css" href="LINK ZU DER DATEI default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="style1" href="LINK ZU DER DATEI style1.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="style2" href="LINK ZU DER DATEI style2.css" />
<style type="text/css">
<!--


Zuletzt bearbeitet von nndesign am 01.08.2009, 15:24, insgesamt einmal bearbeitet
Beitrag01.08.2009 um 14:43 (UTC)    
Titel:

Die Tutorials werden zur Zeit eh ein klein wenig aufgeräumt und überarbeitet.
Aber kurze Frage.. Ist das nicht in etwa was in der Art?
http://www.homepage-baukasten.de/forum/viewtopic.php?t=67854

Wenn ich mich irre, sagt es ^^

Ich bitte niemanden auf dieses Tutorial zu antworten, außer es kann verbessert werden.
Kommentare zu dem Tutorial werden, wenn es zu den Tutorials hinzugefügt wird, entfernt, da da nurnoch das tut stehen sollte dann.
Nur bei verbesserungen kann man es hier noch Anmerken, damit es auch korrekt eingeführt wird ^^
Diese Aussage trifft natürlich ersmtal nur solange zu, bis entschieden ist, ob es aufgenommen wird oder nicht. Will nur Sachen wie "Gut gemacht" vermeiden, da ich dann zu viel entfernen müsste (Übersichtsfaktor).

Vielen Dank schonmal für die Mühe, sofort werde ich es noch nicht verschieben, ich warte Rückmeldung zu meiner Frage ab und entscheide dann heute Abend, wenn ich mich wieder an die anderen Tutorials mache.
______________


Zuletzt bearbeitet von AsgarSerran am 01.08.2009, 15:44, insgesamt einmal bearbeitet
Beitrag01.08.2009 um 15:33 (UTC)    
Titel:

Scheint wirklich so ziemlich das selbe zu sein -__-
______________
WebDesign | Corporate Design | Redesign

Beiträge der letzten Zeit anzeigen:   


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