THB - Ücretsiz Hizmetler - Iceblue yapimi

Iceblue yapimi

İceblue tasarımı yapımı

İceblue yapımı basit bir tasarımdır fakat bilinmesi gerekenler tasarımın stil kodunda hangi resmin nereye geleceğidir..

Resim üzerinde kodları incelemek için;

Bunun için hyperend arkadaşımızın ayırdığı kodları inceleyebiliriz;

<style type="text/css">

</style>

Kodu incelediğimizde biraz olsun tasarım kolay geldi.. Aslında yıllardır karışık olarak sitenize eklediğiniz iceblue kodu bu şekilde bölüm bölüm ayrılmış bir koddu.. Sadece bu kod işi kolaylaştırıyor.. İceblue dediğimizde aklımıza tablo'nun biçimlenmesi gibi bir şey..

Bu kodu açıp incelediğimizde ise;

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 */
}
[/FONT] [FONT=Arial][FONT=Tahoma]/* İç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 [COLOR=#FF0000](gözükmüyor) */[/COLOR]

/* 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 */
}

Her bir css ayar kodunun yanındaki /* xxxxxxx */ kodunu incelediğimizde ise Iceblue'da yapabileceklerimizin en iyisini yapma gibi bir imkan doğuyor..

Katkılarından dolayı hyperend arkadaşıma teşekkürler...