Smf Css editleyerek Tema yapma

Smf tema düzenlemelerinde en çok kullanılan yer olan css dosyamız hakkında genel bilgileri sizinle paylaşacam

öncelikle normal linklerimize renk veren şu kısımı inceleyelim

Kod Seç Expand

/* Normal, standard links. */
a:link, a:visited
{
color: #346;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
cursor: pointer;
}

a:link = normal kullanılan linklerin
a:visited = daha önce ziyaret edilmiş linkler
color: #346; = linkin rengi
text-decoration: none; = linkin şekli burda boş kullanılmış none olarak (text-decoration:line-through; üstünü çizmek için bu şekilde text-decoration:underline; altını çizmek için bu şekilde kullanılabilir)
a:hover = mouse ile linkin üstüne geldiğinde oluşacak efect demek
text-decoration: underline; = a:hover da bu kullanılmış üstte yazmıştık linkin üstüne gelince altını çiziyor
cursor: pointer; = mouse işaretinin link üzerinde alacağı şekli gösteriyor daha fazlası için bu konumuza bakın

sabah sabah seo konumuzu güncelledim bide buna el atayım dedim kısaca

Kod Seç Expand

/* Set a fontsize that will look the same in all browsers. */
body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
}
en önemli kısımlarımızdan biride body arkadaşlar sitemizin arka planını burdan ayarlıyoruz
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x; 
bu css kodu şunu sölüyor bize arkaplan rengini arka plan resmini ve resmin ne tarafa doğru tekrar etmesi gerektiği
background hakkında daha fazla bilgiye burdan ulaşabilirsiniz =http://www.w3schools.com/css/css_background.asp
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
yazı büyüklüğü ve yazı şeklini belirtiyor
margin: 0 auto;
bu kodda bize üst ve alt kısım için 0px demiş yani elleme sağ ve sol taraftan içeriği ortala diyor
padding: 15px 0;
bu kodda bize içeriği kendi içinde üstten ve alttan 15px daralt sağ ve sol kısımı elleme diyor

Kolay şekillendirme için ortak sınıflar smf index.css olan bu kodlar yeni oluşturuğunuz yapılarda kullanabilirsiniz
örnek vermek gerekirse <div class="floatleft"> veya <div id="yapı" class="floatleft">

Kod Seç Expand

.floatright {
float: right;
}
.floatleft {
float: left;
}
.floatnone {
float: none;
}
.flow_auto {
overflow: auto;
}
.flow_hidden {
overflow: hidden;
}
.clear {
clear: both;
}
.clear_left {
clear: left;
}
.clear_right {
clear: right;
}

üstteki kodlarımızı biraz açalım

float

Yapısı : float: <deger>
Aldığı Değerler :
     left = sol
     right =sağ
     none = değer yok
     inherit= İçerik üst elementin değerlerini alır.
Başlangıç değeri: none
Uygulanabilen elementler: tüm elementler (img,p,div vs...)
Kalıtsallık: Yok

Overflow

Yapısı: overflow: <deger>
Aldığı Değerler:
    inherit = kalıtsallık üst elementin değerini alabilir
    visible = kutu sınırları dışına taşan alanları göster
    hidden = kutu sınırları dışına taşan alanları gizle.
    scroll = kutu sınırlarını taşan kısmı kaydırma çubuğu ile ulaşmamızı sağlar.
    auto = kutu sınırlarını aşması durumunda scroll ile aynı etkiyi yapar.
Başlnagıç değeri: visible
Uygulanabilen elementler: blok-level elementler ve replacement elementlere
Kalıtsallık: Yok


clear

Yapısı : clear: <deger>
Aldığı Değerler :
     left = uygulandığı elementi floating elementin bir alt soluna atar
     right = özelliği benzer şekilde sağa atar
     none = özelliği elementin başlangıç değerini geri döndürür
     both = değeride iki floating elementin aşağısına atar
Başlangıç değeri: tanımsız
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok



Yazımız devam edecek arkadaşlar fırsat buldukça konuyu güncellicem

yazının devamını merakla bekliyorum yakın zamanda güncellenir umarım.

çok güzel bir konuya el attınız öğrenmek isteyenler için güzel bir makale oldu teşekkrler

daha eksiği çok ama fırsat buldukça güncelliyoruz

devamı gelecek mi?

fırsat buldukça güncellemeye çalışıyoruz