01-08-2016 Saat: 15:08
Tema Sorumlusu olduğumdan beri uzun süredir güzel konular paylaşamı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.
Bu kaynaktan rengi seçerek veya renk kodunu girerek arkaplan kodunu hazır alabilirsiniz. Arkaplanlara basarak. Aldığınız kod:
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
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;
HD: http://www.yukleresim.com/images/2016/08/01/xW2.png
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;
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üş.
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;
Açıkçası bu menü bu haldeyken bir cacığa benzemeyecektir :D Şimdi css kodlarını ve açıklamalarını yazayım.
En sonunda böyle bir menü oluşacaktır karşımızda.
http://codepen.io/anon/pen/LkBKBK
Şimdi kodların içinde kullandığım bir kod vardı.
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
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;
Şimdi diyeceksiniz ee iconlar nerde? İconlara vereceğim linkten ulaşabilirsiniz. Beğendiğinizin üstüne tıkladığınızda kodunu size verir.
Ben bu kodu ne yapacağım kardeşim diyorsanız, örneğin eklediğimiz menü gelsin aklınıza;
Yazmıştık.
Şimdi kodunu aldığınız iconun kodunu menüye uygulayacağız.
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.
@TaaRRuz izin verirse sabitleyeceğim.
Konu tamamen bana ait olup alıntı yapılması kesinlikle yasaktır.!
Kod:
https://www.transparenttextures.com/Kod:
background-color: #ffffff;
background-image: url("https://www.transparenttextures.com/patterns/black-thread-light.png");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
Kod:
body {
burada kodlar olacaktır onların önemi yok
/* En sona kodlarımızı ekliycez } <- bunun üstüne */
background-color: #ffffff;
background-image: url("https://www.transparenttextures.com/patterns/black-thread-light.png");
}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;
HD: http://www.yukleresim.com/images/2016/08/01/xW2.png
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;
Kod:
#content {
/* Önemli olan bu kod devamı bizi ilgilendirmiyor. */
background: #fff;
}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üş.
Kod:
https://material.google.com/style/color.htmlAslı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;
Kod:
<div class="d10">
<ul>
<li><a href="index.php" alt="Anasayfa" title="Anasayfa">Anasayfa</a></li>
<li><a href="portal.php" alt="Portal" title="Portal">Portal</a></li>
<li><a href="memberlist.php" alt="Üye Listesi" title="Üye Listesi">Üyeler</a></li>
<li><a href="showteam.php" alt="Yetkili Listesi" title="Yetkili Listesi">Yetkililer</a></li>
</ul>
</div>Açıkçası bu menü bu haldeyken bir cacığa benzemeyecektir :D Şimdi css kodlarını ve açıklamalarını yazayım.
Kod:
.d10 {
/* buraya menünüzün genişliğini yazabilirsiniz. Tüm elemanlar bu dive bağlı. Konumlandırmak için kullanın kısacası. */
width: calc( 100% - 40px ); /* Bunun Açıklaması Derste Yapılacak. */
float: left;
background: #1E88E5;
border-bottom: 2px solid #1565C0;
font-family: Sans-Serif;
font-size: 15px;
border-radius: 30px;
padding-left: 20px; /* Soldan iç boşluğu 20px yapar */
padding-right: 20px; /* Sağdan iç boşluğu 20px yapar */
}
.d10 ul {
list-style-type: none; /* BU KOD LISTELEME DE KULLANILAN ISARETLERI KALDIRIR. */
padding: 0px; /* BU KOD IC BOSLUGU 0PX YAPAR */
margin: 0px; /* BU KOD DIS BOSLUGU 0PX YAPAR. */
}
.d10 ul li {
float: left; /* Menü Elemanlarını Sola Yasladık */
display: inline-block; /* Bu Kod Sayesinde Yatay Hizalayacağız. */
padding: 10px;
/* Burdan sonrası kendi stillendirmelerim. */
margin: 0px 5px;
}
.d10 ul li:hover {
/* :hover üzerine gelindiğinde yapılacakları gösterir. */
background: #1565C0;
}
.d10 ul li a {
/* Burası menü elemanının içindeki yazı ile alakalı rengiymiş şekliymiş falan. */
color: #fff; /* Rengi Beyaz olsun dedik. */
text-decoration: none;
}En sonunda böyle bir menü oluşacaktır karşımızda.
http://codepen.io/anon/pen/LkBKBK
Şimdi kodların içinde kullandığım bir kod vardı.
Kod:
width: calc( 100% - 40px )Kod:
width: calc( 100% - 40px )
width: -webkit-calc( 100% - 40px )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;
Kod:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">Şimdi diyeceksiniz ee iconlar nerde? İconlara vereceğim linkten ulaşabilirsiniz. Beğendiğinizin üstüne tıkladığınızda kodunu size verir.
Kod:
http://fontawesome.io/icons/Ben bu kodu ne yapacağım kardeşim diyorsanız, örneğin eklediğimiz menü gelsin aklınıza;
Kod:
<li><a href="index.php" alt="Anasayfa" title="Anasayfa">Anasayfa</a></li>Şimdi kodunu aldığınız iconun kodunu menüye uygulayacağız.
Kod:
<li><a href="index.php" alt="Anasayfa" title="Anasayfa"><i class="fa fa-home"></i> Anasayfa</a></li>@TaaRRuz izin verirse sabitleyeceğim.
Konu tamamen bana ait olup alıntı yapılması kesinlikle yasaktır.!
