Topic: Blok görünüm seçenekleri

[tc bolubeyi]

resimde görüldüğü üzere blok başlıklarını düzenlerken Özel Başlık Sınıfı ve Özel Başlık Sitili bölümleri nasıl kullanılıyor? Bir örnekle açıklayabilecek olan var mı?

[grafitus]

Özel Başlık Sınıfı kutucuğuna CSS dosyalarımızda tanımladığımız sınıfları yazıyoruz. Örneğin; CSS dosyamıza aşağıdaki kodu ekledik:

Code: [Select]

.kullanici_kutucugu
{
color: blue; /* Yazı rengini mavi yaptık*/
text-transform: uppercase; /*Yazıların hepsini BÜYÜK harflerle yazdırdık*/
text-decoration: overline; /*Yazıların üstünü çizili yaptık.*/
background: url(RESİM_LİNKİ) repeat-x; /*Arkplan resmini ekledik ve yatay konumda tekrarlattık*/
}Özel Başlık Sınıfı kutucuğuna aşağıdaki:

Code: [Select]

kullanici_kutucuguBöylelikle bloğumuzun başlık kısmı yukarıdaki CSS dosyamıza eklediğimiz özelliklere sahip oldu.

Özel başlık stilinde ise CSS dosyamıza eklediğimiz kodları sadece bu kutucuğa ekliyoruz. Örneğin;

Code: [Select]

color: red; text-transform: uppercase; text-decoration: overline; background: url(RESİM_LİNKİ) repeat-x;
Kısa ve öz anlatmaya çalıştım. Umarım anlatamabilmişimdir.

Bu arada iyi bir CSS kaynağı olarak Fatih Hayrioğlu'nun not defterini önerebilirim.

[tc bolubeyi]

Teşekkür ederim olacak gibi. Arka plan resminin tekrarlamaması için kodda ne gibi değişiklik yapmam gerekir?

[grafitus]

Yukarıda verdiğim koda göre; repeat-x yerine no-repeat yazmanız gerekli. Dikey sıralamk için de repeat-y kullanmanız gerekir.

[tc bolubeyi]

css dosyasına ekleyin derken kullandığım tema (2.0 sürüm) index.css dosyasına mı eklemek gerekiyor. index.css ye kod eklemek ya da eklememek bir şey değiştirmiyor.

[tc bolubeyi]

Code: [Select]

color: black;    background: url(http://www.spinabifidaturkey.com/images/sbtitle.png) no-repeat bu şekilde özel başlık sitili yazan kutucuğa kod ekleyince istediğim oldu fakat arka plan resminin hemen sol yanında bir resim daha beliriyor bunu nasıl kaldırabilirim?

www.spinabifidaturkey.com/smf/index.php adresindeki spina bifida nedir isimli blok. (sol üstte)

[grafitus]

Sanırım bir hata buldunuz. Sorun Curve'nin oval köşeleri için eklediği koddan kaynaklı. Şu anda tam bir çözüm veremem. Sinan'a da iletin isterseniz, siz?

[tc bolubeyi]

Sanırım bir hata buldunuz. Sorun Curve'nin oval köşeleri için eklediği koddan kaynaklı. Şu anda tam bir çözüm veremem. Sinan'a da iletin isterseniz, siz?

Umarım sinan konuyu görür.

[tc bolubeyi]

Sorunu kısmen çözdüm fakat forum catbgleri de etkiliyor. Forumda etkili olmaması gerek için ne yapmalıyım.

index.css buldum

Code: [Select]

h4.catbg span.left, h4.catbg2 span.left, h3.catbg span.left, h3.catbg2 span.left, .table_list tbody.header td span.left
{
   float: left;
   display: block;
   width: 9px;
   height: 31px;
   background: url(../images/theme/main_block.png) no-repeat 0 -160px;
}
değiştirdim:

Code: [Select]

h4.catbg span.left, h4.catbg2 span.left, h3.catbg span.left, h3.catbg2 span.left, .table_list tbody.header td span.left
{
   float: left;
   display: block;
   width: 9px;
   height: 31px;
 
}

[[SiNaN]]

Varsayılan Başlık Sınıfı'nı titlebg2 olarak seçerek Özel Başlık Stili'nde istediğiniz stili kullanabilirsiniz.

[tc bolubeyi]

Teşekkür ederim deneyeceğim. Hostingim arızaya geçti. Açılınca yapacam hemen.

[tc bolubeyi]

Varsayılan Başlık Sınıfı'nı titlebg2 olarak seçerek Özel Başlık Stili'nde istediğiniz stili kullanabilirsiniz.

Evet denedim. Bu şekilde oldu fakat arka plan resmi alttan kırpılıyor. Orjinal boyutta görüntülenmesi için ne yapmam gerekir?

[[SiNaN]]

"Kırpılıyor" derken tam olarak neyi kastettiğinizi anlamadım ama Özel Başlık Sitili'ne height: 25px; eklemeyi dener misiniz?

[tc bolubeyi]

Edit: Bu şekilde oldu. Blok başlığını dikey oalrak ortalamak mümkün mü acaba?

[grafitus]

Özel Başlık Sitili'ni aşağıdaki gibi değiştiri misiniz?

Code: [Select]

color: black; background: url(http://www.spinabifidaturkey.com/images/sbtsag.gif) no-repeat; height: 35px;]

[tc bolubeyi]

Bir önceki mesajımı editledim. Eksik kod yazmışım.
Şimdi blok başlığını da dikey olarak ortayabilirsem 10 numara olacak. Mümkün mü acaba?

[[SiNaN]]

padding-top: 0.5em; eklemeyi deneyin Özel Başlık Stili'ne.

[tc bolubeyi]

Çok teşekkür ederim. Sayenizde bir şeyler öğreniyoruz. 10 numara oldu. Diğer blokları da düzenleyeceğim bu şekilde.

[[SiNaN]]

Eğer bütün bloklarda yapacaksanız, sadece şunu portal.css'e de eklemeniz yeter:

Code: [Select]

h4.titlebg2
{
height: 25px;
padding-top: 0.5em;
}
Varsayılan Başlık Sınıfı'nı titlebg2 olarak seçtiğinizi varsayıyorum.

[tc bolubeyi]

Teşekkür ederim. Farklı bloklarda farklı arka planlar kullanmam gerekiyor. İnce ayarlar yapıyorum. Konu çözülmüştür.
http://www.spinabifidaturkey.com/smf/index.php