Designcode
Das Bild mit BeschriftungCSS Anweisung
Unsichtbare Elemente
Grafik austauschen
Grafikaustausch mit Höhenangabe
Grafik-Farbe austausch
Beispiel Rechtebox
Navigation
Navigations Link
Rechtebox oben
Rechtebox
Design in der Mitte
Design verbreitern
Die CSS-Anweisungen:
kommen zusammen immer in diesen Code :
| <style type="text/css"> <!-- Hier die Anweisungen --> </style> |
------------------------------------------------------------------------------------------------------------------------------------------
Ein Element unsichtbar machen:
| td.Hier die Klasse{visibility:hidden;} |
| td.Hier die Klasse{background-image: none; background-color:transparent;} |
------------------------------------------------------------------------------------------------------------------------------------------
Grafik austauschen im Design:
| td.Hier die Klasse{background-image:url(http://hier Eure Bild-URL); background-color:#XXXXXX;} |
Grafik austauschen im Design mit Höhen-Angabe:
| td.Hier die Klasse{background-image:url(http://hier Eure Bild-URL); background-color:#XXXXXX;height:XXpx;} |
------------------------------------------------------------------------------------------------------------------------------------------
Grafik-Farbe austauschen im Design:
| td.Hier die Klasse{background-image: none; background-color:#XXXXXX;} |
---------------------------------------------------------------------------------------------------------------------------------------------------
Ein Beispiel / Rechte Boxen 1-5:
Wir möchten Boxen mit schwarzem Hintergrund. Die Boxen bekamen die "Klassen" shouty bis shouty5
| td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {background-image: none;background-color: #000000;color: #FFFFFF;font-weight: bold;} |
Die rechten Boxen mit einem Hintergrund-Bild:
| td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {background-image:url(Hier Bild-Adresse);background-color: #xxxxxx;color: #FFFFFF;font-weight: bold;} |
color: #FFFFFF = weisse Textfarbe
font-weight: bold; = Fettschrift
Die Navigation:
Titel der Navigation
Schrift im Navi-Titel:
| td.nav_heading{color: #xxxxxx;} |
Schrift und Hintergrund im Navi-Titel:
| td.nav_heading{color: #xxxxxx;background-image: url(URL);background-color: #xxxxxx;} |
Mit Rand im Navi-Titel:
| td.nav_heading{color: #000000;background-image: url(URL);background-color: #xxxxxx;border: 1px solid #xxxxxx;} |
Mit Hintergrundbild und Rand im Navi-Titel:
| td.nav_heading{color: #xxxxxx;background-image: url(http://Adresse zum Bild);} |
------------------------------------------------------------------------------------------------------------------------------------
Schrift Navigationslinks:
| td.nav a{color: #xxxxxx;} |
Schrift und Hintergrund Navigation:
| td.nav{background-image: url(URL);background-color: #xxxxxx;} td.nav a{color: #xxxxxx;} |
Mit Rand in der Navigation:
| td.nav{background-image: url(URL);background-color: #xxxxxx;border: 1px solid #xxxxxx;} td.nav a{color: #xxxxxx;} |
Mit Hintergrundbild und Rand in Navigation
| td.nav{background-image: url(http://Adresse zum Bild);border: 1px solid #xxxxxx;} |
----------------------------------------------------------------------------------------------------------------------------------
Rechte Boxen:
Titel der rechten Boxen
Schrift im Titel
| td.sidebar_heading{color: #FF0000;} |
Schrift und Hintergrund im Titel
| td.sidebar_heading{color: #xxxxxx;background-color: #xxxxxx;background-image: url(URL);} |
Mit Rand im Titel:
| td.sidebar_heading{color: #xxxxxx;background-color: #00FF00;background-image: url(URL);border: 1px solid #xxxxxx;} |
Mit Hintergrundbild und Rand im Titel
| td.sidebar_heading{color: #xxxxxx;background-image: url(http://Adresse zum Bild);border: 1px solid #000000;} |
-------------------------------------------------------------------------------------------------------------------------------------------
Inhalt der rechten Boxen
nur Schriftfarbe in 5 Boxen:
| td.shouty{color:#xxxxxx;} td.shouty2{color:#xxxxxx;} td.shouty3{color:#xxxxxx;} td.shouty4{color:#xxxxxx;} td.shouty5{color:#xxxxxx;} |
Schrift und Hintergrund in 5 Boxen
| td.shouty{color:#xxxxxx;background-image: url(URL);background-color: #xxxxxx;} td.shouty2{color:#xxxxxx;background-image: url(URL);background-color: #xxxxxx;} td.shouty3{color:#xxxxxx;background-image: url(URL);background-color: #xxxxxx;} td.shouty4{color:#xxxxxx;background-image: url(URL);background-color: #xxxxxx;} td.shouty5{color:#xxxxxx;background-image: url(URL);background-color: #xxxxxx;} |
Mit Rand und Hintergrund:
| td.shouty{color:#xxxxxx;background-image: url(URL);background-color: #xxxxxx;border: 1px solid #xxxxxx;} td.shouty2{color:#xxxxxx;background-image: url(URL);background-color: #xxxxxx;border: 1px solid #xxxxxx;} td.shouty3{color:#xxxxxx;background-image: url(URL);background-color: #xxxxxx;border: 1px solid #xxxxxx;} td.shouty4{color:#xxxxxx;background-image: url(URL);background-color: #xxxxxx;border: 1px solid #xxxxxx;} td.shouty5{color:#xxxxxx;background-image: url(URL);background-color: #xxxxxx;border: 1px solid #xxxxxx;} |
Mit Hintergrundbild und Rand:
| td.shouty{color:#xxxxxx;background-image: url(http://Adresse zu dem Bild);border: 2px solid #xxxxxx;} td.shouty2{color:#xxxxxx;background-image: url(http://Adresse zu dem Bild);border: 2px solid #xxxxxx;} td.shouty3{color:#xxxxxx;background-image: url(http://Adresse zu dem Bild);border: 2px solid #xxxxxx;} td.shouty4{color:#xxxxxx;background-image: url(http://Adresse zu dem Bild);border: 2px solid #xxxxxx;} td.shouty5{color:#xxxxxx;background-image: url(http://Adresse zu dem Bild);border: 2px solid #xxxxxx;} |
Das Design zentrieren
Wir gehen im -> Login auf Design einstellen dann auf --> Erweiterte Einstellungen --> dann bei Text über dem Design geben wir folgenden Code ein:
| <div align="center"> <table border="0" width="70%" id="table1"> <tr> <td> |
dann bei Text unter dem Design diesen Code:
| </td> </tr> </table> </div> |
Jetzt ist euer zentriert.
Design verbreitern
Und hier wie es am Ende aussehen könnte:Wir gehen im -> Login auf Design einstellen dann auf --> Erweiterte Einstellungen --> dann bei Text über dem Design geben wir folgenden Code ein:
| <style type="text/css"> <!-- 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%;} --> </style> |
<style type="text/css">
<!--
/* Hintergrund hinter Design */
body {
background-color:#343434;
background-image:url(https://img.webme.com/pic/i/iceblue-test/hintergrundbild.gif);
background-repeat: repeat;
text-align:center; }
/* Schriftfarbe + Größe auf allen Seiten */
td {
color:#000000;
font-size:14px;
text-align:left;
font-family: arial,verdana; }
/* Linkfarben + Größen auf Seiten */
a:link {
color:#000080;
font-size:14px;
font-family:arial,verdana;
text-decoration:none; }
/* besuchte Links */
a:visited {
color:#800000;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;}
/*Hover-Effekt bei Links*/
a:hover{
color:#000080;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;}
/* Header oben */
td.edit_header_full {
background-color:#FFFFFF;
background-image:url(https://img.webme.com/pic/i/iceblue-test/header.jpg);
background-repeat:no-repeat;
border:1px solid #000000; }
/* Titel im Header entfernen */
td.headline {visibility:hidden;}
/* Titel über Navigation */
td.nav_heading {
color:#FFFFFF;
font-size:14px;
font-family:arial,verdana;
text-align:center;
height:29px;
background-color:#000000;
background-image:url(https://img.webme.com/pic/i/iceblue-test/balken_schwarz.jpg);
border:1px solid #000000; }
/* Navigation Buttons */
td.nav {
background-color:#E2E2E2;
background-image: none;
border:1px solid #000000; }
/* Hover-Effekt Navigation Buttons */
td.nav:hover {
background-color:#800000;
background-image: none;
border:1px solid #000000; }
/* Textlinks in Navigation */
td.nav a {
color:#000000;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;
text-align:left; }
/* Hover-Effekt Textlinks */
td.nav a:hover{
color:#FFFFFF;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;
text-align:left; }
/* Bild unter Navigation entfernt */
td.edit_below_nav {display:none;}
/* Feld hinter Navigation / Kein Scrollbalken mehr bei Seiten mit wenig Inhalt */
td.edit_main_tr {
height: 50% !important; }
/* Hintergrund Navigation */
td.edit_navi_headbg {
height: 50%;
background-color:#XXXXXX ;
background-image: none;
border:0px solid #000000; }
/* Balken über Textfeld */
td.edit_content_top {
height:29px;
background-color:#000000;
background-image:url(https://img.webme.com/pic/i/iceblue-test/balken_schwarz.jpg);
border:1px solid #000000; }
/* Seitentitel über Textfeld */
td.headline2 {
color:#FFFFFF;
font-size:12px;
font-family:arial,verdana;
text-align:left; }
/* Textfeld */
td.edit_content {
padding-top:15px;
padding-bottom:15px;
background-color:#FFFFFF;
background-image: none;
border:1px solid #000000; }
/* Linke Spalte im Textfeld */
td.edit_content_left_spacer {
background-color:#F2F2F2;
background-image: none; }
/* Rechte Spalte im Textfeld */
td.edit_content_right_spacer {
background-color:#F2F2F2;
background-image: none; }
/* Erste Balken unter Textfeld */
td.edit_content_bottom {
height:29px;
background-color:#000000;
background-image: url(https://img.webme.com/pic/i/iceblue-test/balken_schwarz.jpg);
border:1px solid #000000; }
/* Zweiter Balken unter Textfeld (mit Counter) */
td.edit_content_bottom2 {
background-color:#XXXXXX ;
background-image: none;
border:0px solid #000000; }
/* Counter / Besucherzähler */
td.edit_content_bottom2_counter {
font-family:arial,verdana;
font-size:12px;
background-color:#c9c9c9;
border:1px solid #000000; }
/* große Feld unter Textfeld */
td.edit_rechts_cbg {
background-color:#XXXXXX;
background-image: none;
border:0px solid #000000; }
/* Streifen rechts vom Design entfernt mit */
td.edit_rechts_sbg {display:none;}
/* Titel über rechter Box */
td.sidebar_heading {
color:#FFFFFF;
font-size:14px;
font-family:arial,verdana ;
text-align:center;
height:29px;
background-color:#000000;
background-image: url(https://img.webme.com/pic/i/iceblue-test/balken_schwarz.jpg);
border:1px solid #000000; }
/* rechte Boxen 1 bis 5 */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color:#000080;
font-size:14px;
font-family.arial,verdana;
text-align:left;
background-color:#F2F2F2;
background-image: none;
border:1px solid #000000; }
/* Abschluß unter Boxen 1 bis 5 entfernt mit */
td.edit_rb_footer{display:none; }
/* Hintergrund unter rechten Boxen */
td.edit_rechts_bottom {
background-color:#XXXXXX ;
background-image: none;
border:0px solid #000000; }
-->
</style>
Erklärung:
Die "Klassen" sind rot markiert.
Bild-Adressen sind blau markiert