merhaba'Arkadaşlar'Bügün'Arkadaşlarımıza'Kodlama'İle'Kendi'Temalarını Biraz'cıkta'Olsa Tema 'Yapmalarına'Yardımcı'Olucaz....
Şimdi'Eminim Herkes Yani Bir kısmınız! Mybb tema nasıl? kodlandığını Merak ediyordur 'Veya'Etmiyordur,ama anlamıyordur işte bu konuyla ilgili basit tasarımlarımızı Göstereceğİm Umarım Kanklar1998 size yardımcı olmuştur. Başlayalım.....Elimden Gelenler'Şimdilik Budur Daha Fazlası İçin Dersleri Ara Ara Vericeğİm beğendiysen!Teşekkür Yeterli İyi'Forumlar..Başlayalım...
Bir'Giriş'Paneline İhtiyacımız Vardır. Ziyaretcilerimize've'Üye'LerimizBuGiriş'Paneli'Şekilli'Yapmalıyız'Hadi'Bir'Giriş'Paneli'Yapalım'Ve'Duyuru'Paneli'Şimdi'Domos'Login's
Şimdi'Eminim Herkes Yani Bir kısmınız! Mybb tema nasıl? kodlandığını Merak ediyordur 'Veya'Etmiyordur,ama anlamıyordur işte bu konuyla ilgili basit tasarımlarımızı Göstereceğİm Umarım Kanklar1998 size yardımcı olmuştur. Başlayalım.....Elimden Gelenler'Şimdilik Budur Daha Fazlası İçin Dersleri Ara Ara Vericeğİm beğendiysen!Teşekkür Yeterli İyi'Forumlar..Başlayalım...
Kod:
HTML:Duyuru Paneli Kodlama Yapalım Bize Gerekecek Kodlar :html:css'Dir!Şimdir Bir Duyuru kodu Yaratalım! Asadaki Kodu Html kodu dur.
Ama Buna Birde'Şekil Vermemiz Gerekiyor Hadi'Css'mizi'Cağıralım
CODE:<div class="Kanklar1998"><p>Sitemize bekleriz</p></div>
Kod:
/* Duyuru Efect Star */
/* Duyuru Efect Play! */
.Kanklar1998 {
position: relative;
margin: 1em;
background: #FF0000;
padding: 1em 1em 1em 2em;
border-left: 4px solid #DDD;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
}
.dpaneli:before {
position: absolute;
top: 50%;
margin-top: -17px;
left: -17px;
background-color: #DDD;
color: #FFF;
width: 30px;
height: 30px;
border-radius: 100%;
text-align: center;
line-height: 30px;
font-weight: bold;
font-family: Georgia;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}
Yukarıdaki,lerin'Class'Olanlar,Aynı Olmak! Zorunda.yani kavram budur html class Kanklar1998 olursa css de Kanklar1998 olmak zorundadır.!'Ve'Duyuru'Panelimiz'Rengi'Red'Yani'Kırmızı'Oldu
Simdi Söyle bir Duyuru Panelimiz Cıktı!
Bir'Giriş'Paneline İhtiyacımız Vardır. Ziyaretcilerimize've'Üye'LerimizBuGiriş'Paneli'Şekilli'Yapmalıyız'Hadi'Bir'Giriş'Paneli'Yapalım'Ve'Duyuru'Paneli'Şimdi'Domos'Login's
Kod:
<p class="announcement1"> <i class="fa fa-cog fa-spin fa-1x fa-fw"></i>başarılı</p>
<p class="announcement2"> <i class="fa fa-cog fa-spin fa-1x fa-fw"></i>İyi</p>
<p class="announcement3">Kötü'Deneme</p>
<!-- Continuation of div(class="upper") as opened in the header template -->
<form action="button">
<label for=""></label>
<input type="text" name="" id="" placeholder="email" class="Kanklar1998'Email">
<label for=""></label>
<input type="password" name="" id="" placeholder="password" class="pass">
<button type="submit">Simdi'Sisteme'Giriş'Yapınız</button>
</form>
<div style="background: #FFFF;border: 1px solid #FF0000;border-radius:5px;text-align: center;margin: 10px auto;padding: 15px 20px;"><script language="JavaScript">
<!-- Begin
var a = Math.random() + ""
var rand1 = a.charAt(5)
quotes = new Array
quotes[1] = "Merhaba"
quotes[2] = "Hoşgeldin."
quotes[3] = "Kurallarımızı'Okuyın"
quotes[4] = "Yardım isterken Bize'Danıssın"
quotes[5] = "Forum ortamında hangi amaçla olursa olsun müstehcen içerikli yazı/resim paylaşımı yapılamaz."
quotes[8] = "Hakaret'Gibi'Müşterik Hatalar Yapmayın"
quotes[9] = "Destek sitesi üzerinde yazılacak mesajlar tamamı ile mesajı yazan kullanıcının sorumluluğundadır."
var quote = quotes[rand1]
document.write(quote);
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700);
yukarıdakiler'Html
body {
background: #999;
padding: 40px;
font-family: "Open Sans Condensed", sans-serif;
}
#bg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(http://lorempixel.com/800/500/nature) no-repeat center center fixed;
background-size: cover;
-webkit-filter: blur(5px);
}
form {
position: relative;
width: 250px;
margin: 0 auto;
background: rgba(130,130,130,.3);
padding: 20px 22px;
border: 1px solid;
border-top-color: rgba(255,255,255,.4);
border-left-color: rgba(255,255,255,.4);
border-bottom-color: rgba(60,60,60,.4);
border-right-color: rgba(60,60,60,.4);
}
form input, form button {
width: 212px;
border: 1px solid;
border-bottom-color: rgba(255,255,255,.5);
border-right-color: rgba(60,60,60,.35);
border-top-color: rgba(60,60,60,.35);
border-left-color: rgba(80,80,80,.45);
background-color: rgba(0,0,0,.2);
background-repeat: no-repeat;
padding: 8px 24px 8px 10px;
font: bold .875em/1.25em "Open Sans Condensed", sans-serif;
letter-spacing: .075em;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.1);
margin-bottom: 19px;
}
form input:focus { background-color: rgba(0,0,0,.4); }
form input.email {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAMCAYAAAC9QufkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0YwNDIzMTQ3QzIzMTFFMjg3Q0VFQzhDNTgxMTRCRTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0YwNDIzMTU3QzIzMTFFMjg3Q0VFQzhDNTgxMTRCRTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozRjA0MjMxMjdDMjMxMUUyODdDRUVDOEM1ODExNEJFNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozRjA0MjMxMzdDMjMxMUUyODdDRUVDOEM1ODExNEJFNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsOChsgAAADUSURBVHjaYvz///9JBgYGMwbSwSkGoOafQPwKiAOBmIEIHAXED0H6QJwPQGwAxE+AOJOAxnwgvgfEKiB9MM0gWg6IbwNxIw6NXUB8HogloHwUzSAsBAoDIJ4DxMxQMRA9H4gPADE/kloMzSCsBcR/gHgj1LAt0HBRR1P3gQktBA2AeBcQZwHxCyB+AsT3gTgFKq6FohrJZnssoW6AxPaDBqoZurP9oBrtCYS2ExA/h9JgzX+gAsZExrMZVP0fmGZ1IjWiBCoL0NsXgPgGGcnzLECAAQD5y8iZ2Z69IwAAAABJRU5ErkJggg==);
background-position: 220px 10px;
}
::-webkit-input-placeholder { color: #ccc; text-transform: uppercase; }
::-moz-placeholder { color: #ccc; text-transform: uppercase; }
:-ms-input-placeholder { color: #ccc; text-transform: uppercase; }
form button[type=submit] {
width: 248px;
margin-bottom: 0;
color: #3f898a;
letter-spacing: .05em;
text-shadow: 0 1px 0 #133d3e;
text-transform: uppercase;
background: #225556;
border-top-color: #9fb5b5;
border-left-color: #608586;
border-bottom-color: #1b4849;
border-right-color: #1e4d4e;
cursor: pointer;
}
.announcement1 {
background: #FF0000;
border: 1px solid #FFD324;
border-radius: 4px 4px 4px 4px;
text-align: center;
margin: 10px auto;
padding: 8px 20px;
}
.announcement2 {
background: #FF0000;
border: 1px solid #2ecc71;
border-radius: 4px 4px 4px 4px;
text-align: center;
margin: 10px auto;
padding: 8px 20px;
}
.announcement3 {
background: #FF0000;
border: 1px solid #000000;
border-radius: 4px 4px 4px 4px;
text-align: center;
margin: 10px auto;
padding: 8px 20px;
}
Kod:
Demo:https://codepen.io/kanklar1998/pen/pdqvQm
Arka'Plan?ekleme'Nasıl'Yapılır
.İmages {
background: #efefef url(resim urlsi);
color: #000;
font-family: Verdana, Arial, Sans-Serif;
font-size: 13px;
text-align: center;
line-height: 1.4;
background-attachment: fixed;
}