ForumPluso
Forum
Arama
Üyeler
Yöneticiler
Giriş Yap
Üye Ol
Merhaba, Ziyaretçi!

Bizi ziyaret ettiğiniz için teşekkür ederiz!

Sitemizden daha iyi yararlanabilmek için "Giriş" yapmalı ya da "Kayıt" olmalısınız ;)



Moderatör Ekip Arkadaşları Arıyoruz!  ( HEMEN BAŞVUR )

  (Söz Öner)

MyBB Tema Kodlamak İsteyenler İçin Püf Noktaları [Dev Konu]
Muratbaykam   0 Yorum   39 Görüntüleme  
Facebook'da Paylaş Twitter'da Paylaş Google+'da Paylaş
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5
MyBB Tema Kodlamak İsteyenler İçin Püf Noktaları [Dev Konu]
#1
Tema Sorumlusu olduğumdan beri uzun süredir güzel konular paylaşıyordum. Bu sabah uyandığım anda bilgisayarı açıp bu konuyu açmayı düşündüm. Bir sürü tema kodlamak isteyen arkadaşımız var. Ama bazıları html, css, javascript bilmiyor. Bazıları ise bilse de MyBB'de kullanamıyor. Ben de bu gün size HTML, Css dersi vermek yerine direk kendi sitenize nasıl tema yazabileceğinizi öğreteceğim. Öncelikle bir kaç kaynak vereceğim. Eğer kaynakları olanlar varsa, onlarda konu altına yazarsa ekleyebilirim.

Kodları görebilmek için kayıt olun veya giriş yapın.
Bu kaynaktan rengi seçerek veya renk kodunu girerek arkaplan kodunu hazır alabilirsiniz. Arkaplanlara basarak. Aldığınız kod:

Kodları görebilmek için kayıt olun veya giriş yapın.

Bu gibi bir şey olacaktır. Bunu nereye uygulayacağız diye düşünüyorsanız. Admin Paneline girdikten sonra Temalar & Şablonlar bölümünde Temalar kısmından Default Temasına gelip Seçenekler kısmına basarak Temayı Düzenle diyeceksiniz. Sonrasında global.css ye girerek

Kodları görebilmek için kayıt olun veya giriş yapın.
Eğer hiç CSS bilginiz yoksa açıklama satırlarını özet geçeyim CSS de açıklama satırları vardır. Nerede ne yaptığımızı unutmayalım diye. /* Buraya yazılan metin */ CSS ye etki etmez. /*  */ arasına CSS kodu dahi yazsanız gizli kalır. Tarayıcı okumaz.
Neyse konumuza dönelim. Arkaplanı eklediniz ama çıkmadı. Siz ekleyemediğiniz için değil, farklı bir div onun üzerini kapattığı içindir. Özetlemek gerekirse;

[Resim: xW2.png]
HD: 

(Linkleri sadece üyeler görebilir. Kayıt olmak için tıklayın.)

Durumu çözmek için demin girdiğiniz global.css dosyasına girip F3 tuşuna veya CTRL+F tuşlarına basarak #content yazısını aratın. Bulduğunuzda;
Kodları görebilmek için kayıt olun veya giriş yapın.
Yalnızca background: #fff; kodunu silin. Renk kodu önemli değil ( Yani #fff vb. ) background satırını full silin. 
Eğer hala arka plan gözükmüyorsa sitenize gelip CTRL+F5 tuşlarına basarak sayfayı yeniden yükleyin o zaman gözükecektir.
Eğer diyorsanız ben renk seçiminde berbatım, google sizin için bunu da düşünmüş.
Kodları görebilmek için kayıt olun veya giriş yapın.
Bu sayfadan istediğiniz rengin kodunu seçebilirsiniz.
Aslında şu ana kadar yazdığım onlarca satır kod çok basit bir işlem içindi, şimdi size kısaca menü kodlamaktan bahsedeyim. Yatay bir menü yazalım;
Kodları görebilmek için kayıt olun veya giriş yapın.

Açıkçası bu menü bu haldeyken bir cacığa benzemeyecektir Gülmek Şimdi css kodlarını ve açıklamalarını yazayım.

Kodları görebilmek için kayıt olun veya giriş yapın.

En sonunda böyle bir menü oluşacaktır karşımızda.

(Linkleri sadece üyeler görebilir. Kayıt olmak için tıklayın.)

Şimdi kodların içinde kullandığım bir kod vardı.
Kodları görebilmek için kayıt olun veya giriş yapın.
calc matematik işlemleri yapmaya yarar. Yani orada genişlik tüm sayfayı kaplasın dedik 100% diyerek. Tüm sayfanın genişliğinden 40px eksik olsun dedik sonrada - 40px yazarak. Neden 40px dedik? Verdiğimiz padding-left ve padding-right değerlerinden dolayı. Toplam 40px ediyor. Ama bunu sitenize iki şekilde ekleyin
Kodları görebilmek için kayıt olun veya giriş yapın.
Bir diğer tavsiyem sitenize font-awesome kurmanız. Nedir Font Awesome? Font Awesome şudur;
Diyelim ki siz menünüze resim eklemek istiyosunuz. Yazıların başına ufak bir şekilde. FontAwesome'yi kurduktan sonra artık sadece bir satır bile olmayan bir kodla ekleyebilirsiniz. Temalar & Şablonlara gelip, Şablonlara basın. Temanızı seçin. En alta inip Headerinclude şablonlarını genişletin. Yine açılan şablonlardan headerinclude yi seçin.
En sonuna ekleyin;
Kodları görebilmek için kayıt olun veya giriş yapın.

Şimdi diyeceksiniz ee iconlar nerde? İconlara vereceğim linkten ulaşabilirsiniz. Beğendiğinizin üstüne tıkladığınızda kodunu size verir.
Kodları görebilmek için kayıt olun veya giriş yapın.

Ben bu kodu ne yapacağım kardeşim diyorsanız, örneğin eklediğimiz menü gelsin aklınıza;
Kodları görebilmek için kayıt olun veya giriş yapın.
Yazmıştık.

Şimdi kodunu aldığınız iconun kodunu menüye uygulayacağız.
Kodları görebilmek için kayıt olun veya giriş yapın.
Siz kendi iconunuzun kodunu yazarsınız. Bu konu şimdilik böyle kalsın. Ben bu konuyu günden güne yazarak genişleteceğim.

Beğenenler: esw0rmer
Ara
Cevapla


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  MyBB Tema Değişkenleri Emre KRMN 2 76 04-01-2019, 20:56
Son Yorum: Wmclubu


Konuyu Okuyanlar:
1 Ziyaretçi