iceblue tema yapma

Ice Blue Tasarım Yapma
 
 Selamın Aleyküm Kardeşlerim...Size bugün Iceblue'de nasıl tasarım yapılacağını anlatmaya çalışıcam...Kusurlarım olursa affola.İlk önce katmanları belli olan ice blue tasarımının taslağını çıkaralım.Bu epey zahmetli bir iş olduğu için önceden yaptım ben...

<style type="text/css">
<!--
table {margin-left: auto;margin-right: auto}

/* Tasarımın Arka Planı */
body {
background-color:#343434;
background-image:url(Arka Plan);
}

/* Font Özellikkleri Tüm Sayfalarda */
td {
color:#000000;
font-size:14px;
text-align:left;
font-family: arial,verdana; }

/* Link Özellikleri */
a:link {
color:#000080;
font-size:14px;
font-family:arial,verdana;
text-decoration:none; }

/* Ziyaret Edilen Link Özellikleri */
a:visited {
color:#800000;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;}

/*Hover Effekti Özellikleri*/
a:hover{
color:#000080;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;}

/* Başlık Resmi */
td.edit_header_full {
background-color:#c0c0c0;
background-image:url(Başlık Resmi Url);
background-repeat:no-repeat; }

/* Header Yazısı */
td.headline {visibility:hidden;}

/* Menü Baş Kısım */
td.nav_heading {
padding-left:5px;
color:#FFFFFF;
font-size:14px;
font-family:arial,verdana;
font-weight:600;
height:27px;
background-color:#2b4f7a;
background-image:url(Sol Menü Ana Başlık Resimi);
border:1px solid #000; }

/* Menü Butonları */
td.nav {
background-color:#ccc;
background-image: url(Sol Menü Buton 1);
border:1px solid #000; }

/* Menü Buton Hover */
td.nav:hover {
background-color:#ccc;
background-image:url(Sol Menü Buton 2);
border:1px solid #000;}

/* Text Linklerin Özellikleri */
td.nav a {
color:#000000;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;
font-weight:500;
text-align:left; }

/* TextLinklerin Hover Özellikleri */
td.nav a:hover{
color:#000000;
font-weight:500;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;
text-align:left; }

/* Resim Engelle */
td.edit_below_nav {display:none;}

/* Kaydırma Çubuklarını Engelle */
td.edit_main_tr {
height: 50% !important; }

/* İçerik Ana Menü */
td.edit_navi_headbg {
height: 50%;
background-color:#XXXXXX ;
background-image: none;
border:0px solid #000000; }

/* İçerik Ana Menü 2 */
td.edit_content_top {
height:27px;
background-color:#2f4b7a;
background-image:url(İçerik Menüsü Resimi);
border:1px solid #000; }

/* Bar Metin alanı */
td.headline2 {
color:#FFFFFF;
font-size:12px;
font-family:arial,verdana;
text-align:left; }

/* Metin alanı */
td.edit_content {
width:610px;
background-color:#FFFFFF;
background-image: none;
border:1px solid #000; }

/* Orta Kısım Sol Taraf */
td.edit_content_left_spacer {
background-color:#f3f3f3;
background-image: none; }

/* Orta Kısım Sağ Taraf */
td.edit_content_right_spacer {
background-color:#f3f3f3;
background-image: none; }

/* Alt Bar */
td.edit_content_bottom {
height:29px;
background-color:#000000;
background-image: url(Alt Bar Resimi);
border:1px solid #000000; }

/* Sayaç */
td.edit_content_bottom2 {
background-color:#XXXXXX ;
background-image: none;
border:0px solid #000000; }

/* Sayaç Özellikleri */
td.edit_content_bottom2_counter {
font-family:arial,verdana;
font-size:14px;
color:#000;
background-color:#c9c9c9;
border:1px solid #000000; }

/* Metin Alanı / Büyük Kutu */
td.edit_rechts_cbg {
background-color:#XXXXXX;
background-image: none;
border:0px solid #000000; }

/* Sağ Sütün / Sağ Şerit */
td.edit_rechts_sbg {display:none;}

/* Sağ Kutu / Başlık */
td.sidebar_heading {
padding-right:5px;
color:#FFFFFF;
font-size:14px;
font-family:arial,verdana ;
text-align:center;
font-weight:600px;
height:27px;
background-color:#000000;
background-image: url(Sağ Navbar Resimi);
border:1px solid #000000; }

/* Sağ Kutu / Orta alan */
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; }

/* Sağ Kutu / Son Kısım(Footer) */
td.edit_rb_footer{display:none; }

/* Sağ Kutular / Arka Plan */
td.edit_rechts_bottom {
background-color:#XXXXXX ;
background-image: none;
border:0px solid #000000; }

-->
</style>

Gördüğünüz taslak kodumuz budur.Kodumuzun bazı yerlerinde değişiklik yaparak ice bluede çok güzel işler çıkartacaz...

Baştan başlayalım kodları inceleyemeye....


Genel Özellikler

/* Tasarımın Arka Planı */
body {
background-color:#343434; /* Arka plan rengini belirler. */
background-image:url(Arka Plan Resim Urlsi); /* Arka plan resmini belirler. */
}

Font Özellikleri

/* Font Özellikkleri Tüm Sayfalarda */
td {
color:#000000; /* Yazıların renigini belirleyebilirsiniz.(Şuan Siyah) */
font-size:14px; /* Yazıların boyutunu pixel cinsinden belirler. */
text-align:left; /* Yazıların nereye dayalı olmasını belirler.Left=Sol */
font-family: arial,verdana;  /* Yazıların türünü belirler. */
}


Link Özellikleri


/* Link Özellikleri */
a:link {  /* Link Özellikleri */
color:#000080; /* Linklerin aktif olmadan önceki rengi. */
font-size:14px; /* Linklerin boyutu. */
font-family:arial,verdana; /* Linklerin yazı fontları */
text-decoration:none; /* Linklerin dekor özellikleri(altı çizili gibi). */
}

/* Ziyaret Edilen Link Özellikleri */
a:visited { /* Ziyaret Edilen Link Özellikleri (Tıklanan) */
color:#800000; /* Linklerin ziyaret edildikten sonraki renkleri */
font-size:14px; /* Linklerin ziyaret edildikten sonraki boyutu */
font-family:arial,verdana; /* Linklerin ziyaret edildikten sonraki fontu. */
text-decoration:none; /* Linklerin ziyaret edildikten dekor özellikleri(altı çizi) */
}

/*Hover Effekti Özellikleri*/
a:hover{ /* Linklerin üzerine gelinceki durumu (Effekt) */
color:#000080; /* Linklerine üzerindeyken yazı rengi */
font-size:14px; /* Linklerin üzerindeyken font boyutu. */
font-family:arial,verdana; /* Linklerin üzerindeyken font türü. */
text-decoration:none;/* Linklerin üzerindeyken dekor özellikleri(altı çizi) */
}


Header (Başlık) Özellikleri


/* Başlık Resmi */
td.edit_header_full {
background-color:#c0c0c0; /* Başlık resmi arka plan rengi.*/
background-image:url(Başlık Resmi Url);/* Başlık resmi urlsi. */
background-repeat:no-repeat;/* Başlık resminin tekrar edip etmemesi. */
}

/* Header Yazısı */
td.headline {visibility:hidden;} /* Site titlesini yani başlık yazını kaldırmak.*/


Sol Menü Özellikleri

/* Menü Baş Kısım */
td.nav_heading {
padding-left:5px; /* Soldan ne kadar boşluk verileceği. */
color:#FFFFFF; /* Menü yazısının rengi */
font-size:14px; /* Menü yazının font büyüklüğü  */
font-family:arial,verdana; /* Menü yazının font türü */
height:27px; /* Menü arka planın boyutu */
background-color:#2b4f7a; /* Menü arka plan rengi */
background-image:url(Sol Menü Ana Başlık Resimi); /* Menü arka plan resmi */
border:1px solid #000; /* Menü border özellikleri. */
}

/* Menü Butonları */
td.nav {
background-color:#ccc; /* Menü butonlarının üstüne gelmeden önce arka plan rengi */
background-image: url(Sol Menü Buton 1); /* Menü butonlarının üstüne gelmeden önceki resimi */
border:1px solid #000; /* Border özellikleri */
}

/* Menü Buton Hover */
td.nav:hover {
background-color:#ccc; /* Menü butonlarının üstüne geldikten sonra arka plan rengi */
background-image:url(Sol Menü Buton 2);/* Menü butonlarının üstüne geldikten sonraki resimi */
border:1px solid #000;} /* Border özellikleri */

/* Text Linklerin Özellikleri */
td.nav a {
color:#000000; /* Menüdeki linklerin rengi */
font-size:14px; /* Menüdeki linklerin boyutu */
font-family:arial,verdana; /* Menüdeki linklerin font türü. */
text-decoration:none; /* Menüdeki linklerin dekor özelliği*/
text-align:left; /* Menüdeki nereye dayalı olduğu */
}

/* Text Linklerin Hover Özellikleri */
td.nav a:hover{
color:#000000; /* Menüdeki linklerin üstüne gelicenki rengi */
font-size:14px; /* Menüdeki linklerin  üstüne gelinceki boyutu */
font-family:arial,verdana; /* Menüdeki linklerin üstüne gelinceki font türü*/
text-decoration:none; /* Menüdeki linklerin üstüne gelinceki dekor özelliği */
text-align:left; /* Menüdeki linklerin üstüne gelinceki nereye dayalı olduğu.*/
}

İçerik Kısmı Özellikleri

/* İçerik Kısmı Arka Planı */
td.edit_navi_headbg {
height: 50%;
background-color:#XXXXXX ;
background-image: none;
border:0px solid #000000; }

/* İçerik Ana Menü */
td.edit_content_top {
height:27px; /* İçerik alanı menü uzunluğu */
background-color:#2f4b7a; /* İçerik alanı menü arka planı */
background-image:url(İçerik Menüsü Resimi); /* İçerik alanı menü arka plan resmi */
border:1px solid #000; /* Border özellikleri */
}
/* İçerik Ana Menü Yazı */
td.headline2 {
color:#FFFFFF; /* Menü yazı rengi */
font-size:12px; /* Menü yazısı boyutu. */
font-family:arial,verdana; /* Menü yazısı font türü */
text-align:left;  /* Menü yazısının nereye dayalı olduğu. */
}
/* Metin alanı */
td.edit_content {
width:610px; /* Metin alanı uzunluğu */
background-color:#FFFFFF; /* Metin alanı arka plan rengi */
background-image: none; /* Metin alanı arka plan resmi */
border:1px solid #000; /* Border özellikleri */
}

/* Orta Kısım Sol Taraf */
td.edit_content_left_spacer {
background-color:#f3f3f3; /* Metin alanı sol kenar rengi */
background-image: none; /* Metin alanı sol kenar resmi */
}

/* Orta Kısım Sağ Taraf */
td.edit_content_right_spacer {
background-color:#f3f3f3; /* Metin alanı sağ kenar rengi */
background-image: none; /* Metin alanı sağ kenar resmi */ }

/* Alt Bar */
td.edit_content_bottom {
height:29px; /* Alt bar yükseliği */
background-color:#000000; /* Alt bar arkaplan rengi */
background-image: url(Alt Bar Resimi); /* Alt bar arka plan resmi */
border:1px solid #000000; } 



Sayaç Alanı Özellikleri

/* Sayaç */
td.edit_content_bottom2 {
background-color:#XXXXXX ; /* Sayaç alanı arka plan rengi */
background-image: none; /* Sayaç alanı arka plan resmi */
border:0px solid #000000; /* Border özellikleri */
}

/* Sayaç Özellikleri */
td.edit_content_bottom2_counter {
font-family:arial,verdana; /* Sayaç font türü */
font-size:14px;  /* Sayaç font boyutu */
color:#000; /* Sayaç font rengi */
background-color:#c9c9c9;  /* Sayaç arka plan rengi */
border:1px solid #000000;  /* Border özellikleri */
}

Sağ Taraf Özellikleri


/* Sağ Sütün / Sağ Şerit */
td.edit_rechts_sbg {display:none;} /* Sağ tarafın en dış kısmı * /

/* Sağ Kutu / Başlık */
td.sidebar_heading {
padding-right:5px; /* Sağ kutunun menü yazsının sağa uazaklığı */
color:#FFFFFF; /* Sağ kutunun menü rengi */
font-size:14px; /* Sağ kutunun menü font boyutu */
font-family:arial,verdana ; /* Sağ kutunun font türü */
text-align:center; /* Sağ kutunun ont ortalaması */
height:27px; /* Sağ kutu menü yüksekliği */
background-color:#000000; /* Sağ kutu menü arka plan rengi */
background-image: url(Sağ Navbar Resimi); /* Saü kutu menü arka plan resmi */
border:1px solid #000000; /* Sağ kutu border özellikler */
}

/* Sağ Kutu / Orta alan */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color:#000080; / Sağ kutular yazı rengi */
font-size:14px; /* Sağ kutular font boyutu */
font-family.arial,verdana; /* Sağ kutular font türü */
text-align:left; /* Sağ kutular yazı ortalaması */
background-color:#F2F2F2; /* Sağ kutular arka plan rengi */
background-image: none; /* Sağ kutular ark plan boyutu */
border:1px solid #000000; /* Sağ kutular border özellikleri */
}

/* Sağ Kutu / Son Kısım(Footer) */
td.edit_rb_footer{display:none; /* Sağ kutuların footer özelliği (gözükmüyor) */

/* Sağ Kutular / Arka Plan */
td.edit_rechts_bottom {
background-color:#XXXXXX ; /* Sağ kutular arka plan rengi */
background-image: none; /* Sağ kutular arka plan resmi */
border:0px solid #000000;  /* Sağ kutular border özellikleri */
}


Gördüğünüz gibi nerdeyse tüm anlamları, nasıl yapıldıklaı yanlarında yazıyor...Birde resim görelim.





Görüldüğü gibi herşey açık ve net.Şimdi sorusu veya sorunu olan alt kısma belirtsin...