Suche im Forum:
Suchen


Autor Nachricht
Beitrag28.07.2009 um 00:48 (UTC)    
Titel: Design Iceblue / Alle Klassen

Die "Klassen" im Design Iceblue



Alle Felder im Design haben einen Namen bekommen (diese werden auch "Klassen" genannt).
Wenn wir ein Feld ändern möchten, müssen wir zuerst schauen, welchen Namen das Feld bekommen hat.


Das Feld kann dann mit CSS-Eigenschaften gestaltet werden. Der CSS-Code muss mit dem Klassennamen beginnen

Beispiel: Titel im Header entfernen

- der Titel oben im Header hat die Klasse headline
- Klassennamen müssen (!) im CSS-Code mit einem Punkt beginnen
- korrekt dann .headline
- und die CSS-Eigenschaft für "nicht anzeigen" lautet: display: none;
- fertiger Code dann :


Zitat:

<style type="text/css">
<!--

.headline {
display: none; }
-->
</style>


Den style-tag vor und nach dem Code müssen wir nur einmal einfügen.
Der ist wichtig, damit der Browser erkennt, das es sich um CSS-Code handelt.
Alle weiteren CSS-Codes kämen nun immer vor --></style> mit hinein.



Einem Feld eine eigene Hintergrundfarbe geben:
- CSS Code beginnt mit Klassenname des Feldes
- background-color: bekommt die gewünschte Farbe
- background-image: url(); = hier lassen wir die Klammer leer . Die Originalgrafik wird dann nicht mehr angezeigt

Zitat:

.Klassenname {
background-color: #FFFFFF;
background-image: url() ; }




Einem Feld eine eigene Hintergrundgrafik geben:
- CSS Code beginnt mit Klassenname des Feldes
- background-color: können wir leer lassen, oder entfernen
- background-image: url(); = in die Klammer die Grafikadresse einfügen

Zitat:

.Klassenname {
background-color: ;
background-image: url(Grafikadresse) ; }


Eine Klasse kann beliebig viele CSS-Eigenschaften bekommen

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Neu : Der Design-Generator
Ohne CSS-Kentnisse das Design anpassen . Banner anklicken :



--------------------------------------------------------------------------------------------------------------------------------------------------


Gruss Wolle
______________


Zuletzt bearbeitet von iceblue-test am 23.02.2015, 13:02, insgesamt 11-mal bearbeitet
Beitrag05.08.2009 um 02:47 (UTC)    
Titel: Design Iceblue : Alle Klassen / Beispiel-Code

Design Iceblue frei bearbeiten:

Diesen Code könnte Ihr als "Grundgerüst verwenden. Er enthält ALLE Klassen des Designs.
Nach dem Einfügen sieht das Design so aus, Ihr könnt es natürlich frei anpassen Very Happy




Zitat:

<style type="text/css">
<!--


/* Hintergrund hinter Design */
body {
background-color: #FFFFFF;
background-image: url(Grafikadresse);
background-repeat: repeat-x;
background-attachment: fixed;
color: #000000;
font-family: arial;
font-size: 14px; }

/* Nullformatierung für alle Browser */
*{padding: 0px; margin: 0px; }

/* Werbung mittig */
table[height="102"] {margin: auto;}

/* Design mittig */
table.edit_main_table {width: 980px!important; margin: 0px auto; }

/* zweite Tabelle um Iceblue */
table.edit_second_table {width: 980px !important;}

/* dritte Tabelle um Iceblue */
table.edit_third_table {width: 980px !important;}

/* erste Tabellenspalte um Iceblue herum */
td.edit_main_tr { height: 50%!important; }

/* Headerfeld 980 x 104 */
td.edit_header_full {
background-color: #FFFFFF;
background-image: url(Grafikadresse);
background-repeat: no-repeat;
border: 1px solid #c9c9c9; }

/* Feld hinter Navi */
td.edit_navi_headbg {
height: 50%!important;
background-image: url(); }

/* Tabelle um Navigation */
td.edit_navi_headbg table {
margin-top: 10px;
border-left: 1px solid #c9c9c9;
border-top: 1px solid #c9c9c9;
border-right: 1px solid #c9c9c9; }

/* Titelfeld über Navi 183 x 30 */
td.nav_heading {
color: #000000;
height:30px;
background-image: url(Grafikadresse);
background-color: #E0E0E0;
border-bottom: 1px solid #c9c9c9; }

/* Navi-Button 183 x 33 */
td.nav {
background-color: #FFFFFF;
background-image: url(Grafikadresse);
border-bottom: 1px solid #c9c9c9;}

/* HOVER Button 183 x 33 */
td.nav:hover {
background-color: #454545;
background-image: url(Grafikadresse); }

/* Navi-Links */
td.nav a {
display: block;
line-height: 33px;
font-size: 15px;
color: #000000;
text-decoration: none; }

/* HOVER Navi-Link */
td.nav a:hover {
color: #FFFFFF;
text-decoration: none; }

/* Abschluss unter der Navigation */
td.edit_below_nav img {display:none;}
td.edit_below_nav {background-image: url();}

/* Feld hinter Seiteninhalt */
td.edit_rechts_cbg {
height: 50%!important;
background-image: url(); }

/* Tabelle um Seiteninhalt */
table.edit_rechts_tabelle {
width: 600px;
margin-left: 10px;
margin-top: 10px ;
background-color: #FFFFFF;
border: 1px solid #c9c9c9; }

/* Textgroesse und Schriftart überall */
div, td {font-size: 14px; font-family: arial;}

/* Linkgroesse + Schriftart + Linkfarben */
a {
color: #000080;
text-decoration: underline; }

/* Linkfarben HOVER */
a:hover {
color: #800000;
text-decoration: underline; }

/* Titelfeld über Seiteninhalt */
td.edit_content_top {
height:30px;
background-color: #E0E0E0;
background-image: url(Grafikadresse);
border-bottom: 1px solid #c9c9c9; }

/* Titeltext über Seiteninhalt */
td.headline2 {
color: #000000;
font-size: 12px;
font-family: araial; }

/* Seiteninhalt */
td.edit_content {
padding: 15px 10px 15px 0px;
background-image: url(); }

/* Streifen links + rechts im Seiteninhalt */
td.edit_content_left_spacer , td.edit_content_right_spacer {
background-image: url(); }

/* Abschluss im Seitenihalt */
td.edit_content_bottom {
background-image: url(); }

/* Tabelle um den Counter */
td.edit_content_bottom2 table {
margin:9px;
background-color: #E0E0E0;
width:97%;
border:1px solid #c9c9c9;}

/* Counter unter Seiteninhalt */
td.edit_content_bottom2_counter {
padding: 8px;
text-align: center;
color: #000000!important; }

td.edit_content_bottom2{
background-image: url(); }


/* Tabellen der 5 Boxen */
#sidebar_heading_1, #sidebar_heading_2, #sidebar_heading_3, #sidebar_heading_4, #sidebar_heading_5 {
margin-top: 10px;
border: 1px solid #c9c9c9;
background-color: #FFFFFF; }

/* Tabelle der WERBUNG IN BOX 2 */
#sidebar_heading_sky {
margin-top: 10px;
border: 1px solid #c9c9c9;
background-color: #FFFFFF; }


/* Titelfeld über Boxen */
td.sidebar_heading {
height: 30px;
color: #000000;
background-color: #E0E0E0;
background-image: url(Grafikadresse);
border-bottom: 1px solid #c9c9c9;}

/* Inhalt rechte Boxen */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
font-size: 13px;
background-image: url(); }

/* Inhalt WERBUNG BOX 2 */
td.shoutysky { background-image: url(); }

/* Abschluss unter den 5 Boxen und Werbebox */
td.edit_rb_footer, .edit_rb_footer_sky {display:none;}

/* Feld hinter den Boxen */
td.edit_rechts_bottom {
background-image: url();}

/* Streifen rechts von den Boxen */
td.edit_rechts_sbg {display:none;}

/* Feld um die Werbung unten mittig setzen */
div[style="width:920px;"] {
width: 550px !important;
margin: auto;
overflow: hidden; }

/* WERBE-TEXT UNTER DESIGN */
#webme_footer_textlink_dont_hide {
background: none !important;
color: #000000; }

-->
</style>



Erklärung:

Die "Klassen" sind rot markiert.
Grafikadressen sind blau markiert, hier lassen sich Hintergrundbilder einfügen
background-color: = hier könnt ihr Hintergrundfarben angeben

background-color: = Hier kann eine Hintergrundfarbe angegeben werden
background-image: url(); = hier kann eine Grafikadresse in die Klammer () eingefügt werden
color = bekommt einen Farbcode für Textfarbe
font-size = bekommt einen Wert für Textgröße
border: = Rahmen

Tipp:
Man kann natürlich auch das Baukasten-Design "CSS" so aussehen lassen, wie das Design Iceblue
Beschreibung hier: http://www.homepage-baukasten.de/forum/viewtopic.php?t=133273


Gruss Wolle
______________


Zuletzt bearbeitet von 24939 am 05.02.2013, 16:19, insgesamt 13-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


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