Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Mybb'Tema'Kodlama'Pack'1'
#1
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...


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ı!
24251234_1155114884619756_2043998463_o.p...e=5A22FFDD
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
24201038_1155133214617923_1607674595_o.p...e=5A21FB05
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;
}
Ara
Cevapla PGM
Teşekkür verenler:
#2
Duyuru paneliyle biriyormu iş? En azından thead tcat trow tfoot felan gösterseydin
Ara
Cevapla PGM
Teşekkür verenler:
#3
o rasıda benii ilgilendirir hocam
Ara
Cevapla PGM
Teşekkür verenler:
#4
Göz yoruyor flat tasarım kullansaydınız.
Bana ulaşmak için / http://english.10tl.net

MybbPHPVB.NETHTMLCSS MySQL                                    

Eğer eleştiriden korkuyorsanız, dünyadan hiçbir şey yapmadan geçip gideceksiniz demektir. 
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



Reklam yaziniz bostur. ayarlardan duzenleyiniz:medi -

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping