Smf Css editleyerek Tema yapma

Başlatan snrj, 29 Tem 2014 15:44

« önceki - sonraki »

0 Üyeler ve 2 Ziyaretçiler konuyu incelemekte.

*

  1. 3,108

  2. 587

  3. 1001
29 Tem 2014 15:44 Son düzenlenme: 07 Kas 2014 23:53 snrj

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

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

.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



  1. 632

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

*

  1. 1,181

  2. 117

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

*

  1. 3,108

  2. 587

  3. 1001

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



  1. 632

  2. 251

*

  1. 3,108

  2. 587

  3. 1001


MENU ×