CSS, forumun görünümünü düzenleyen stil dilidir. İçerik alanlarının arka planını değiştirmek, konu başlıklarını belirginleştirmek, kullanıcı profil kutularını biçimlendirmek ve butonlara farklı görünümler kazandırmak için kullanılabilir.

Örneğin aşağıdaki kod, özel bir bilgi kutusuna arka plan rengi, kenarlık ve iç boşluk ekler.

[CODE=css]
.fh-bilgi-kutusu {
background: #f4f6fb;
border: 1px solid #d5deec;
border-radius: 8px;
padding: 15px;
margin: 12px 0;
}
[/CODE]

Bu örneğin etkili olabilmesi için HTML veya şablon içerisinde ilgili sınıfın kullanılması gerekir. Yalnızca CSS eklemek, sayfada bulunmayan bir alanı kendiliğinden oluşturmaz.

• Kullandığınız vBulletin sürümü.
• Değiştirmek istediğiniz alanın adı.
• Mevcut tasarımın nasıl göründüğü.
• İstediğiniz renkler, boyutlar ve hizalama.
• Değişmemesi gereken alanlar ve özellikler.
• Kodun hangi şablona veya CSS alanına ekleneceği.

[CODE=css]
.fh-duyuru-kutusu {
background-color: #ffffff;
border: 1px solid #d6dfec;
border-left: 4px solid #1769c2;
border-radius: 8px;
padding: 16px;
margin: 15px 0;
color: #222222;
line-height: 1.6;
}

.fh-duyuru-kutusu strong {
color: #1769c2;
}
[/CODE]

Bu kod, `.fh-duyuru-kutusu` sınıfını kullanan alanların görünümünü düzenler. Forumunuzda bu sınıf mevcut değilse ilgili HTML veya şablon alanında da tanımlanması gerekir.


vBulletin 3.8.11 sürümünde tasarım değişiklikleri, kullanılan tema ve kurulum yapısına göre farklı alanlardan yapılabilir. Genellikle şu seçenekler değerlendirilir:

• [B>Stil Yönetimi:[/B] Yönetici Kontrol Paneli üzerinden ilgili stilin CSS ayarları düzenlenebilir.
• Ek CSS alanı: Temanız destekliyorsa özel CSS kuralları buraya eklenebilir.
• Şablonlar: Yeni bir HTML alanı oluşturulacaksa ilgili şablonun düzenlenmesi gerekebilir.

Kod eklemeden önce mevcut CSS ve şablonların yedeğini alın. Özellikle ana tema dosyalarında doğrudan değişiklik yapmak yerine mümkün olduğunda stil yönetimi üzerinden ilerleyin.


En sık karşılaşılan sorunlardan biri, genel CSS seçicilerinin forumun farklı bölümlerini de değiştirmesidir. Örneğin `body`, `table`, `a` veya `div` gibi genel seçicilere kontrolsüz biçimde kural eklemek istenmeyen sonuçlar doğurabilir.

Bunun yerine mümkün olduğunca yalnızca hedef alanı etkileyen özel sınıflar kullanılmalıdır.

[CODE=css]
/* Genel bağlantılar yerine yalnızca özel kutudaki bağlantılar */
.fh-duyuru-kutusu a {
text-decoration: none;
font-weight: bold;
}

/* Yalnızca hedef kutunun başlığı */
.fh-duyuru-kutusu h3 {
margin-top: 0;
color: #1769c2;
}
[/CODE]

Böylece değişikliklerin ilgili alanla sınırlı tutulması kolaylaşır. Yine de aynı sınıfın başka yerlerde kullanılıp kullanılmadığı kontrol edilmelidir.


Forumun telefonlarda düzgün görüntülenmesi için genişlik, boşluk ve yazı boyutlarının farklı ekranlara uyarlanması gerekir. ChatGPT'den masaüstü ve mobil görünümü birlikte değerlendirmesini isteyebilirsiniz.

[CODE=css]
@media screen and (max-width: 600px) {
.fh-duyuru-kutusu {
padding: 12px;
margin: 10px 0;
font-size: 14px;
}
}
[/CODE]

Bu örnek, ekran genişliği 600 piksel veya daha az olduğunda belirtilen kutunun iç boşluğunu, dış boşluğunu ve yazı boyutunu değiştirir.


CSS kodlarını ekledikten sonra forum ana sayfasını, konu sayfalarını, kullanıcı profillerini ve mobil görünümü kontrol edin. Değişiklik görünmüyorsa tarayıcı önbelleğini temizleyin ve CSS seçicisinin doğru alanı hedeflediğinden emin olun.

Bir sorun oluşursa eklediğiniz son kuralı geçici olarak kaldırarak sonucu karşılaştırın. Kodun tamamını değiştirmek yerine yalnızca sorun çıkaran bölümü düzeltmek daha güvenli bir yöntemdir.