Kategori: Mybb Eklentiler

Gazetelerdeki gibi yazıların ilk harfi büyük olsun
Gazete okurken(okuyusunuzdur umarım) dikkatinizi çekmiştir paragraflara başlarken ilk harf kocamandır.Bunu birazcık css ile mybb için uygulamak tabikide mümkün;

şimdi isterseniz öncelikle mantığı kavrayalım daha sonra bu kodlamayı mybb için uygulamaya çalışalım;
Örnek;
nayhki

şimdi arkadaşlar yukardaki yazının başlığını hep birlikte büyütelim
öncelikle yazımızı div editketiyle tanımlayalım şöyle ki;
<div class=”ilkharf“>nayhki</div>
div ile tanımladıktan sonra css kodlamasına geçelim

.ilkharf:first-letter {
font-size:400%;
float:left;
line-height:.8em;
}

yukarıdaki kodlama en basitinden yazımızın baş harfinin boyutunu büyütür şimdi isterseniz buna biraz daha özellik ekleyelim;
yazımızın baş harfi daha janjanlı olması için arka plan atayalım bunuda;

background: url(‘skins/gokyuzu/icons/ilkharf.gif’) no-repeat;

no-repeat diyoruz ki arka plan resmimiz birden çok tekrarlanmasın;

birde baş harfimiz birazdaha ayırt edilmesi açısından ona noaml yazımzıdan ayrı bir renk atayalım;

color: #0099FF;

birde unutmadan padding değerini koyalım;
padding:10px 0 0 20px; yeterli olur sanırım hoşunuza gitmezse siz sayıları küçültüp büyütebilrisiniz

şimdi css kdumuzu toplayalım;

.ilkharf:first-letter {
font-size:400%;
float:left;
line-height:.8em;
color: #0099FF;
background: url(‘skins/gokyuzu/icons/ilkharf.gif’) no-repeat;
padding:10px 0 0 20px;
}

Not: burda yazıların baş harflerinin büyük olmasını first-letter özelliği sayesinde yapıyoruz

güzel oldu (= şimdi gelelim bizi ilgilendiren kısıma!!!
önemli olan burda mybb’de hangi kodu div ile tanımlıycağımızdır.
mybb’de forumda yazılan mesejlar posbit kalıbında {$post[‘message’]} adlı kodla yerine getirilir. bizde en başta yazdığımız angelslayer adnın yerine bunu div ile tanımalrsak şöyle ki;

<div class=”ilkharf”>
{$post[‘message’]}
</div>

şeklinde yapıp kaydediyoruz. daha sonra tema düzenleden ek css kısmına gelip;

.ilkharf:first-letter {
font-size:400%;
float:left;
line-height:.8em;
color: #0099FF;
background: url(‘skins/gokyuzu/icons/ilkharf.gif’) no-repeat;
padding:10px 0 0 20px;
}

yukarıda css kodunu yapıştırıyoruz