N-for-S - Iceblue Design

Iceblue Design

Alles was es hier gibt:

Das Bild mit Beschriftung
CSS 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 :

------------------------------------------------------------------------------------------------------------------------------------------
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:

dann bei Text unter dem Design diesen Code:

</td>
</tr>
</table>
</div>

dann speichern - fertig!

Jetzt ist euer zentriert.

Design verbreitern

Wir gehen im -> Login auf Design einstellen dann auf --> Erweiterte Einstellungen --> dann bei Text über dem Design geben wir folgenden Code ein: