POSTED IM AUFTRAG VON CHRISTOPH K., ABOUT-PC.DE(.TL)
FRAGEN UND CO AN IHN
Du willst deinen Usern 2 Designs bieten ?
Sie sollen selbst entscheiden und wechseln können ?
Dann nutze den about-pc.de-CSS-Design-Changer.
Kurze Erklärung:
Alles muss bei Text über dem Design eingefügt werden.
Designcodes angeben
Zitat:
<script type="text/javascript">
<!--
var design1 = 'DESIGN1';
var design2 = 'DESIGN2';
-->
</script>
DESIGN1 und DESIGN2 stehen für die 2 verschiedenen CSS Codes der Designs.
Diese Codes müssen in einer Zeile stehn, dass heißt:
Zitat:
<style type="text/css">
body {
background-color:red;
}
</style>
ist falsch.
Richtig:
Zitat: <style type="text/css">body {background-color:red;}</style>
Auch die <!-- und --> müssen weggelassen werden.
Hier gibt es ein kleines Tool, dass euch diese Arbeit abnimmt:
http://www.about-pc.de/js/cssdesignchanger.php
Das Script einbinden
Zitat: <script type="text/javascript" src="http://www.about-pc.de/js/cssdesignchanger.js"></script>
Einfach so einfügen, verlinkt auch meine Seite, aufs Script.
Startdesign angeben
Zitat:
<div id="design">
DESIGN1
</div>
Hier wieder den ersten CSS Code (von oben) einfügen.
Ausführcode angeben
Zitat: <a href="#" onclick="wechsel()">klick</a>
Dieser Code ist optional.
Es ist ein Link, der beim Klicken das Script aktiviert.
Wenn ihr den rot markierten Teil in ein Bild oder etwas anderes verschiebt, klappt das auch 
Fertiges Scriptbeispiel
Der fertige Code kann z.B. so aussehen:
Zitat:
<script type="text/javascript">
<!--
var design1 = ' <style type="text/css"> /*DESIGN BY PALM.DE.TL*/ /*HINWEIS NICHT ENTFERNEN!*/td.nav{height:30px;background-image:url(http://palm.pytalhost.de/Designs/white_stripes/button1.png);} td.nav:hover{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/button2.png);} td.nav_heading{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/nav_side.png); width:185px;height:38px;} td#nav_Hauptseiten{height: 20px;visibility: hidden;} td#nav_lcke{height: 20px;visibility: hidden;} td#nav_lol{height: 20px;visibility: hidden;} td#nav_lol2{height: 20px;visibility: hidden;} td#nav_lol3{height: 20px;visibility: hidden;} td.nav a{color: #000000 !important;text-decoration: none;font-size: 11px;} td.nav a:hover{color: #000000;text-decoration: underline;font-size: 11px;} td.nav a:visited{color: #000000;font-size: 11px;font-weight: bold;} td.edit_below_nav {visibility:hidden;} td.edit_navi_headbg{background-image:url();background-color:transparent;} td.headline{visibility:hidden;} td.edit_content_top{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/nav_side.png);} td.edit_content_bottom2{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/nav_side.png);} td.edit_content_bottom{background-image:url();background-color:transparent;} td.edit_content{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/bg_site.png);} td.sidebar_heading{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/nav_side.png);width:168px;height:38px;} td.edit_rb_footer {visibility:hidden;} td.edit_rechts_sbg{visibility:hidden;} td.edit_rechts_cbg{background-image:url();background-color:transparent;} td.edit_rechts_bottom{background-image:url();background-color:transparent;} body{background-color:#FFFFFF;} table.edit_main_table{width: 100% !important;} td.edit_main_tr{width: 100% !important;} table.edit_second_table{width: 100% !important;} td.edit_header_full{width: 100% !important;background-position:center;background-repeat:no-repeat; } td.edit_header_full table{width: 100% !important;} table.edit_third_table{width: 100% !important;} td.edit_navi_headbg{width: 15% !important;} table.edit_rechts_tabelle{width: 100% !important;} td.edit_rechts_bottom{width: 15% !important;} td.edit_rechts_cbg{width:100%;} /* LINKS */ a { color: #383838; text-decoration: none; font-size:11px; font-weight: bold;} a:hover { color: #262626; text-decoration: underline; font-size:11px font-weight: bold;} </style>';
var design2 = ' <style type="text/css"> /* DESIGN BY PALM.DE.TL! */ /* HINWEIS NICHT ENTFERNEN */ td.nav{background-image:url(http://palm.pytalhost.de/Designs/waterblue/button1.jpg);} td.nav:hover{background-image:url(http://palm.pytalhost.de/Designs/waterblue/button2.jpg);} td.nav_heading{background-image:url(http://palm.pytalhost.de/Designs/waterblue/top.jpg); width:185px;height:38px;} tr.checked_menu td{background-image:url(http://palm.pytalhost.de/Designs/waterblue/buttonc1.jpg);} tr.checked_menu td:hover{background-image:url(http://palm.pytalhost.de/Designs/waterblue/buttonc2.jpg);} td.edit_below_nav {visibility:hidden;} td.edit_navi_headbg{background-image:url();background-color:transparent;} td.headline{visibility:hidden;} td.edit_content_top{background-image:url(http://palm.pytalhost.de/Designs/waterblue/top.jpg);} td.edit_content_bottom2{background-image:url(http://palm.pytalhost.de/Designs/waterblue/top.jpg);} td.edit_content_bottom{background-image:url();background-color:transparent;} td.edit_content{background-image:url(http://palm.pytalhost.de/Designs/waterblue/bg_inhalt.jpg);} td.sidebar_heading{background-image:url(http://palm.pytalhost.de/Designs/waterblue/top.jpg);width:168px;height:38px;} td.edit_rb_footer {visibility:hidden;} td.edit_rechts_sbg{visibility:hidden;} td.edit_rechts_cbg{background-image:url();background-color:transparent;} td.edit_rechts_bottom{background-image:url();background-color:transparent;} body{background-image:url(http://palm.pytalhost.de/Designs/waterblue/bg_design.jpg);background-attachment:fixed;} td.shouty{background-image:url(http://palm.pytalhost.de/Designs/waterblue/shouty.jpg);background-color:;} td.shouty2{background-image:url(http://palm.pytalhost.de/Designs/waterblue/shouty.jpg);background-color:;} td.shouty3{background-image:url(http://palm.pytalhost.de/Designs/waterblue/shouty.jpg);background-color:;} td.shouty4{background-image:url(http://palm.pytalhost.de/Designs/waterblue/shouty.jpg);background-color:;} td.shouty5{background-image:url(http://palm.pytalhost.de/Designs/waterblue/shouty.jpg);background-color:;} a { color: #FF7F00; text-decoration: none; font-size:11px} a:hover { color: #171717; text-decoration: underline; font-size:11px} </style> ';
-->
</script>
<script type="text/javascript" src="http://www.about-pc.de/js/cssdesignchanger.js"></script>
<div id="design">
<style type="text/css">
/*DESIGN BY PALM.DE.TL*/ /*HINWEIS NICHT ENTFERNEN!*/
td.nav{height:30px;background-image:url(http://palm.pytalhost.de/Designs/white_stripes/button1.png);} td.nav:hover{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/button2.png);} td.nav_heading{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/nav_side.png); width:185px;height:38px;} td#nav_Hauptseiten{height: 20px;visibility: hidden;} td#nav_lcke{height: 20px;visibility: hidden;} td#nav_lol{height: 20px;visibility: hidden;} td#nav_lol2{height: 20px;visibility: hidden;} td#nav_lol3{height: 20px;visibility: hidden;} td.nav a{color: #000000 !important;text-decoration: none;font-size: 11px;} td.nav a:hover{color: #000000;text-decoration: underline;font-size: 11px;} td.nav a:visited{color: #000000;font-size: 11px;font-weight: bold;} td.edit_below_nav {visibility:hidden;} td.edit_navi_headbg{background-image:url();background-color:transparent;} td.headline{visibility:hidden;} td.edit_content_top{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/nav_side.png);} td.edit_content_bottom2{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/nav_side.png);} td.edit_content_bottom{background-image:url();background-color:transparent;} td.edit_content{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/bg_site.png);} td.sidebar_heading{background-image:url(http://palm.pytalhost.de/Designs/white_stripes/nav_side.png);width:168px;height:38px;} td.edit_rb_footer {visibility:hidden;} td.edit_rechts_sbg{visibility:hidden;} td.edit_rechts_cbg{background-image:url();background-color:transparent;} td.edit_rechts_bottom{background-image:url();background-color:transparent;} body{background-color:#FFFFFF;} table.edit_main_table{width: 100% !important;} td.edit_main_tr{width: 100% !important;} table.edit_second_table{width: 100% !important;} td.edit_header_full{width: 100% !important;background-position:center;background-repeat:no-repeat; } td.edit_header_full table{width: 100% !important;} table.edit_third_table{width: 100% !important;} td.edit_navi_headbg{width: 15% !important;} table.edit_rechts_tabelle{width: 100% !important;} td.edit_rechts_bottom{width: 15% !important;} td.edit_rechts_cbg{width:100%;} a { color: #383838; text-decoration: none; font-size:11px; font-weight: bold;} a:hover { color: #262626; text-decoration: underline; font-size:11px font-weight: bold;} </style>
</div>
<a href="#" onclick="wechsel()">klick</a>
Beispielseite
Zu bestaunen unter:
http://about-pc-tests.de.tl/CSS-Design-Changer.htm
Kommentar:
So, meine erste Großbeschreibung.
Hoffe, es hilft euch.
Meinung, Bitten, Fragen, egal was, an mich 
MfG
Christoph
POSTED IM AUFTRAG VON CHRISTOPH K., ABOUT-PC.DE(.TL)
FRAGEN UND CO AN IHN______________ LG André
GMMTS.de
Zuletzt bearbeitet von andybabe27 am 06.03.2010, 15:00, insgesamt 4-mal bearbeitet
|
