MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
SvMedeT avatar
Konuyu Oyla:
  • Derecelendirme: 5/5 - 1 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 5/5 - 1 oy

MyBB Tema Nasıl Yapılır Detaylı anlatım


Sponsor Reklam
media venus

Çevrimdışı SvMedeT
 Tarih: 19-01-2013, Saat:21:19
(Son Düzenleme: 20-01-2013, Saat:00:08, Düzenleyen: 007combatant.)
#1
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 Sağ Ok Temalar & şablonlar Sağ Ok Tema oluştur butonuna basarak Tema İsmi yazan yere yapacağımız temanın işmini yazıyoruz. Ben örnek olarak SvMedeT 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 olarak SvMedeT 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 bir default 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 Sağ Ok Temalar & Şablonlar Sağ Ok 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 Sağ Ok 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:
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:
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 .png yazdı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:
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:
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:
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:
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şter url(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:
background: #e5e5e5;

kodundan ayarlayabilirsiniz. Kodda bulunan #e5e5e5 kısmı renk kodudur. siz
Kod:
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:
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 )

Bilgi-Kaynak Ayrıca konuyla alakalı diğer konular için bakınız...
Cevapla
Sponsor Reklam
sponsor reklam sponsor reklam

Çevrimdışı B3RKC4N
 Tarih: 19-01-2013, Saat:21:21
#2
Teşekkürler
Cevapla
Bunu Beğenenler:

Çevrimdışı SvMedeT
 Tarih: 19-01-2013, Saat:21:22
#3
Rica ederim Göz kırpma
Cevapla
Bunu Beğenenler:

Çevrimdışı TaaRRuz
 Tarih: 19-01-2013, Saat:21:25
(Son Düzenleme: 19-01-2013, Saat:21:26, Düzenleyen: TaaRRuz.)
#4
Alanlar capsla gösterilmiş olsa daha açıklayıcı olurdur bence.Mesela thead forumun neresi gibi... Yada bunu ekleyedebiliriz.

resim

Kod:
http://i.imgur.com/F8TrtIm.gif

Ayrıca ders için teşekkürler.
Cevapla
Bunu Beğenenler: SvMedeT , canix1

Çevrimdışı SvMedeT
 Tarih: 19-01-2013, Saat:21:29
(Son Düzenleme: 19-01-2013, Saat:21:29, Düzenleyen: SvMedeT.)
#5
Ben sadece konudada belittiğim gibi genel mantıgı anlatmaya çalıştım. Bu konuyla herkes usta tema yapımcısı olarak çıkmayacak zaten. Yinede konuyu değerlendirip konuyu dada anlaşılır hala getirdiğiniz için teşekkür ederim TaaRRuz. Süper
Cevapla
Bunu Beğenenler: B3RKC4N , BayOzgur

İzinli TheLegend
 Tarih: 19-01-2013, Saat:22:02
#6
Teşekkürler.
Cevapla
Bunu Beğenenler:

Çevrimdışı HayaLeT10
 Tarih: 20-01-2013, Saat:10:19
#7
Teşekkürler.
Cevapla
Bunu Beğenenler:

Çevrimdışı BayOzgur
 Tarih: 20-01-2014, Saat:23:06
#8
Cok guzel bir anlatim denicem buna yuregine saglik gercekten fevkeladeninde ustunde bir anlatim
Cevapla
Bunu Beğenenler: SvMedeT

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  MyBB - Forumunuza Sağda Açılan Facebook Beğen Kutusu Eklemek BlackCat 10 5,884 28-09-2016, Saat:14:04
Son Yorum: rojinam
  [MCTR - 1.6] Mybb Alıntı,Kod Arka Plan Rengi Değiştirmek EmreKarakaya 9 6,203 05-07-2016, Saat:11:57
Son Yorum: 1907fb
Bigi Düzgün bir Mybb Sitesi Açmak için Neler Yapılmalıdır? MeleDiYe 2 342 01-07-2016, Saat:01:14
Son Yorum: MeleDiYe
  Mybb Kategori Ve forum İsmi Neon Işık Efekti Keskin 1 1,762 19-05-2016, Saat:15:51
Son Yorum: Dumpces1
Kalp - Sevgi İyi Bir Forum Sitesi Nasıl Olmalıdır? BlackCat 9 5,067 13-05-2016, Saat:21:16
Son Yorum: BlackCat



Konuyu Okuyanlar: 1 Ziyaretçi