MyBB Tema Nasıl Yapılır [Detaylarıyla]

[κεıƨʟч]

Merhaba arkadaşlar, bazılarımınız MyBB tema yapmayı biliyor fakat birçoğumuz bilmiyor. Bende kendi bildigim bilgilerle MyBB için tema nasıl yapılır? anlatayım dedim.


1) Tema yapmaya ilk önce admin panelinden sıfır model bir tema oluşturmakla başlayalım.
Admin paneli  Temalar & şablonlar  Tema oluştur butonuna basarak Tema İsmi yazan yere yapacağımız temanın işmini yazıyoruz. Ben örnek olarakSvMedeT yazıyorum. Sizde kendi Temaya verdiğiniz işmi yazarak altta bulunan tema oluştur butonuna başıyoruz. Daha sonra sol taraftaki dikey menüdenŞablonlar bölümüne girerek Yeni set ekle butonuna basıp açılan bölümde temamızın adında şablon ekliyoruz. Ben tema oluştururken temanın adını örnek olarakSvMedeT koymuştum yine bu bölümdede şablonun işmini SvMedeT Templates koyuyorum. Şimdi tekrar sol taraftaki menüden Temalar bölümüne gidiyorum ve başta oluşturmuş oldugum SvMedeT adındaki temamın üstüne tıklıyorum. Açılan bölümde az aşağıda bulunan Kullanılacak Şablon Seti: * bölümünden örnek olarak oluşturduğum şablon olan SvMedeT Templates'i seçiyorum. Yani oluşturduğumuz şablonla temayı birbirine bağlıyoruz. Şimdiye kadar kendi işmimizi verdiğimiz birdefault tema yapmış olduk. 

2) Temayı yaparken herkes iştediği bölgeden başlayabilir ben genelde temanın genel duruşu ile başlamak iştiyorum. Temanın genel duruşundan kastım, temanın genel genişliği ve rengidir.
Admin paneli  Temalar & Şablonlar  Temalar kısmından oluşturdugumuz temanın üstüne tıklıyoruz. karşınıza temanın stil sayfaları çıkacak bunları sayacak olursak ( global.css, usercp.css, modcp.css, star_ratings.css, showthread.css )'dir. Biz ilk olarak global.css ile temamızı yapmaya başlayacağız. global.css'ye giriyoruz  gelişmiş düzenlemeye tıklıyoruz css kodlarının en başında body { kodları gözüküyor yani temamızın arkaplan css kodları. biz burada fazla değişiklik yapmayalım sadece arkaplana resim ekleyelim. body { kısmında bulunan,

Kod:

Kod: Tümünü Seç Tümünü Kopyala

background: #efefef;

kodu arkaplanı belirtiyor ama kod sadece renk kodunu gösterecek şekilde konulmuş. Biz resim ekleyebilmemiz için aşağıdaki kodla değiştiriyoruz.

Kod:

Kod: Tümünü Seç Tümünü Kopyala

background: #131313 url(images/arkaplan_resmi.png);

kodda farklılık olarak url(images/arkaplan_resmi.png) kısmını ekledik. Yeni resim yolu eklemiş olduk. Siz resim ekleyebilmeniz için FTP ./images klasörüne arkaplan resimini atmanız gerekiyor. Attıgınız resimin adını url(images/arkaplan_resmi.png) bu kodda arkaplan_resmi.png bölümüne yazıyoruz. Ben .pngyazdım siz kendi resminizin uzantısına göre değiştirebilirsiniz.

3) Şimdi temamızın genişliğini ayarlayalım. Aynı yerde bulunan #container {'i bulalım. buldugumuz #container {'in altında bulunan,

Kod:

Kod: Tümünü Seç Tümünü Kopyala

width: 95%;

kodu temamızın genişliğini belirtiyor. Bizim temamızın şimdiki genişliği 95% miş. Ben temayı az daraltmak iştiyorum bunun için 95% sayısını 85% olarak değiştiriyorum. Yani temamını %10 daraltmış olduk.

4) Yolumuza temanın thead kısmını değiştirmekle devam edelim. .thead {'ı bulalım, bulduğumuz .thead {'ın altında bulunan,

Kod:

Kod: Tümünü Seç Tümünü Kopyala

background: #026CB1 url(images/thead_bg.gif) top left repeat-x;

kodda resim yolu olan images/thead_bg.gif yolundaki thead resmini kendi thead resminizle FTP ./images/klasöründen thead_bg.gif resmini değiştiriyoruz.

5) Şimdi thead'ın altında bulunan tcat kısmını değiştirelim. Bunun için .tcat { kalıbını bulalım. Yine .tcat {'ın altında,

Kod:

Kod: Tümünü Seç Tümünü Kopyala

background: #ADCBE7;

kodunu bulalım. Ben tcat kısmınada resim eklemek iştiyorum ama yukarıdaki kodda resim adresi belirtilmemiş, biz body { kısmında yaptığımız gibi koda resim yolunu ekleyelim. Ben yine kodu hazırladım, aşağıdaki kodu yukarıdaki orjinali ile değiştiriyoruz.

Kod:

Kod: Tümünü Seç Tümünü Kopyala

background: #131313 url(images/tcat.png);

yukarıdaki kodda ben resim adını tcat.png yaptım, siz FTP ./images klasörüne tcat kısmı için atacağınız resim adını işter tcat olarak değiştirin. işterurl(images/tcat.png) kodunda bulunan tcat adını kendi resminizin adı ve uzantısıyla değiştiriniz.

6) Şimdi temamızın ( .trow1 { .trow2 { .trow_shaded { .trow_selected td { ve .trow_sep { ) kısımlarını Şimdiye kadar yaptığımız bölümlere uyarlayalım. Eğer sizinki zaten uygunsa boşuna uğrasmanıza gerek yok. Ama hayır uymadı diyorsanız yukarıda belittiğim kısımları bularak alttlarındaki,

Kod:

Kod: Tümünü Seç Tümünü Kopyala

background: #e5e5e5;

kodundan ayarlayabilirsiniz. Kodda bulunan #e5e5e5 kısmı renk kodudur. siz

Kod:

Kod: Tümünü Seç Tümünü Kopyala

http://renkler.org/

sitesinden kendiniz iştediğiniz renk koduyla değiştirebilir/temaya uyarlayabilirsiniz.

7) Şimdede tfoot bölümünü düzenleyelim. Şimdi .tfoot { kısmını bulalım. .tfoot { kısmını hemen altındaki,

Kod:

Kod: Tümünü Seç Tümünü Kopyala

background: #026CB1 url(images/thead_bg.gif) top left repeat-x;

kodu bulunuyor. Bazılarınızın dikkatini çekmiştir. Bu kod thead kısmındaki kodla aynı yani thead için eklediğimiz kod tfoot kısmındada gözükeceği anlamına geliyor. Bencede böyle olması doğru. Neden doğru derseniz tfoot ve thead'ın birbirine uyumlu olması temayı daha iyi gösterecektir. Tabi sadece benim fikrim bu şekildedir. Tam terşini düşünenler,
yukarıdaki kodda bulunan thead_bg.gif resmi yerine FTP ./images klasörüne tfoot kısmı için uygun resmi atınız ve thead_bg.gif resim adı ve uzantısı ile değiştiriniz.

Arkadaşlar bu anlatımla ben size tema yapmanın genel mantıgını anlatmaya çalıştım inşalla anlamıssınızdır. 

Saygılarımla | SvMedeT ( NiqoTin )