Konuyu Oyla:
  • Toplam: 5 Oy - Ortalama: 5
  • 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ş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.

Kod:
https://www.transparenttextures.com/
Bu kaynaktan rengi seçerek veya renk kodunu girerek arkaplan kodunu hazır alabilirsiniz. Arkaplanlara basarak. Aldığınız kod:

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");
}
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;

xW2.png
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;
}
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üş.
Kod:
https://material.google.com/style/color.html
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;
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 )
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
Kod:
width: calc( 100% - 40px )
width: -webkit-calc( 100% - 40px )
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;
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>
Yazmıştık.

Ş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>
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.!

---------------------------------------------------------------------------------


Enes'ten ek bilgi;
(02-08-2016 Saat: 01:12)Enes Bayraktar Nickli Kullanıcıdan Alıntı: Benimde bir eklemem olsun istedim

Renk uyumları ile ilgili siteler
Kod:
http://www.colorhunt.co

Yeni dizayn trendleri için (Material ve İos)
Kod:
http://www.materialup.com

Şimdi sizle bir duyuru pano'su yazalim

HTML Kodumuz
Kod:
<div class="d10-overflow">
<div class="d10-ann"><i class="ion-ios-bell-outline"></i><label>Yönetimden Mesaj Var !</label>   <a href="#" class="ann-collapset"><i class="ann-collapse ion-ios-arrow-down"></i></a>
</div>
<div class="d10-collapsed">
 <ul>
   <li>Sitemiz Açılmıştır !</li>
   <li>Admin Alimi Vardır !</li>
   <li>Üyelere Özel Kampanya Devam Ediyor 5 Tema Alana 10 Hediye !</li>
   <li>Coder Aranır !</li>
 </ul>
</div>
</div>

CSS Kodumuz
Kod:
.d10-ann {height:45px; width:100%; background:#232323;  color:#D8E6EC; display:inline-block; border-radius:3px; box-shadow: 0 1px 2px rgba(0,0,0,.1) !important; z-index:2; position:relative;}

.d10-ann i {font-size:1.2em; display:inline-block;  margin-right:10px; margin-left:10px; color:#FFD833; padding:3px 7px; border:1.5px solid #FFD833; border-radius:2px; text-align:center; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); margin-top:7px;}

.d10-ann label {display:inline-block; font-family:"Raleway"; font-size:13.5px; color:#FFD833; position:relative; top:-1px;}

.d10-ann a.ann-collapset i.ann-collapse {cursor:pointer; border:0px; padding:0px; box-shadow:none; float:right; margin-top:13px; margin-right:15px; transition:0.5s ease all;}

.d10-ann a.ann-collapset:hover {transition:0.5s ease all; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}

.d10-collapsed {width:95%; margin:auto; background:#313337; height:auto; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); border-radius:3px; position:relative; top:-3px; z-index:1; transform:translateY(0px); -webkit-transform:translateY(0px); transition:0.5s ease all; -moz-transform:translateY(0px); max-height:200px; min-height:40px;}

.d10-collapse {transform:translateY(-100%) !important; -webkit-transform:translateY(-100%) !important; transition:0.5s ease all;}

.d10-overflow {height:auto; max-height:250px; min-height:100px; overflow:hidden;}

.ann-iconed {transform: rotate(180deg) !important; -webkit-transform: rotate(180deg); transition:0.5s ease all; margin-top:10px !important;}

.d10-collapsed ul {margin:0px; padding:0px;}

.d10-collapsed ul li {list-style:none; padding:10px 10px 7px 10px; color:#FFD833; font-family:"Raleway"; font-size:12px;}

Jquery Kodumuz
Kod:
$(".ann-collapset").click(function(){
 $(".d10-overflow").toggleClass("d10-annopen");
  if($(".d10-overflow").hasClass("d10-annopen")) {
$(".ann-collapse").addClass("ann-iconed");
   $(".ann-collapse").removeClass(".ann-collapse");
   $(".d10-collapsed").addClass("d10-collapse");
}else {
$(".ann-collapse").removeClass("ann-iconed");
   $(".d10-collapsed").removeClass("d10-collapse");
}
});

Headerinclude Edilecek'ler
Kod:
<link rel="stylesheet" type="text/css" media="screen" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,300" rel="stylesheet" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Demo
Kod:
http://codepen.io/coder-rj/pen/VjGvxk
Ara
Cevapla PGM
Teşekkür verenler:
#2
Çok sağlam olmuş. Teşekkürler.
Ara
Cevapla PGM
Teşekkür verenler:
#3
Konuyu tam okumadım sadece birazına baktım.Faydalı sabitleyebilirsin..Hatta aynısını tema bölümüne açarak oraya da sabitleyebilirsin.İnsanlar faydalanacaktır.Fazlaca soruda alacaksındır.
“Mazlumun zalimden öcünü alacağı gün,
şüphesiz zalimin zulmettiği günden daha çetin olacaktır !"
Hz. Ali (r.a)

Kuş ölür, sen uçuşu hatırla...
Ara
Cevapla PGM
Teşekkür verenler:
#4
Emeğine sağlık kardeşim.
vov.
Cevapla PGM
Teşekkür verenler:
#5
Çok yararlı kardeşim eline sağlık.
Ara
Cevapla PGM
Teşekkür verenler:
#6
Benimde bir eklemem olsun istedim

Renk uyumları ile ilgili siteler
Kod:
http://www.colorhunt.co

Yeni dizayn trendleri için (Material ve İos)
Kod:
http://www.materialup.com

Şimdi sizle bir duyuru pano'su yazalim

HTML Kodumuz
Kod:
<div class="d10-overflow">
<div class="d10-ann"><i class="ion-ios-bell-outline"></i><label>Yönetimden Mesaj Var !</label>   <a href="#" class="ann-collapset"><i class="ann-collapse ion-ios-arrow-down"></i></a>
</div>
<div class="d10-collapsed">
 <ul>
   <li>Sitemiz Açılmıştır !</li>
   <li>Admin Alimi Vardır !</li>
   <li>Üyelere Özel Kampanya Devam Ediyor 5 Tema Alana 10 Hediye !</li>
   <li>Coder Aranır !</li>
 </ul>
</div>
</div>

CSS Kodumuz
Kod:
.d10-ann {height:45px; width:100%; background:#232323;  color:#D8E6EC; display:inline-block; border-radius:3px; box-shadow: 0 1px 2px rgba(0,0,0,.1) !important; z-index:2; position:relative;}

.d10-ann i {font-size:1.2em; display:inline-block;  margin-right:10px; margin-left:10px; color:#FFD833; padding:3px 7px; border:1.5px solid #FFD833; border-radius:2px; text-align:center; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); margin-top:7px;}

.d10-ann label {display:inline-block; font-family:"Raleway"; font-size:13.5px; color:#FFD833; position:relative; top:-1px;}

.d10-ann a.ann-collapset i.ann-collapse {cursor:pointer; border:0px; padding:0px; box-shadow:none; float:right; margin-top:13px; margin-right:15px; transition:0.5s ease all;}

.d10-ann a.ann-collapset:hover {transition:0.5s ease all; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}

.d10-collapsed {width:95%; margin:auto; background:#313337; height:auto; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); border-radius:3px; position:relative; top:-3px; z-index:1; transform:translateY(0px); -webkit-transform:translateY(0px); transition:0.5s ease all; -moz-transform:translateY(0px); max-height:200px; min-height:40px;}

.d10-collapse {transform:translateY(-100%) !important; -webkit-transform:translateY(-100%) !important; transition:0.5s ease all;}

.d10-overflow {height:auto; max-height:250px; min-height:100px; overflow:hidden;}

.ann-iconed {transform: rotate(180deg) !important; -webkit-transform: rotate(180deg); transition:0.5s ease all; margin-top:10px !important;}

.d10-collapsed ul {margin:0px; padding:0px;}

.d10-collapsed ul li {list-style:none; padding:10px 10px 7px 10px; color:#FFD833; font-family:"Raleway"; font-size:12px;}

Jquery Kodumuz
Kod:
$(".ann-collapset").click(function(){
 $(".d10-overflow").toggleClass("d10-annopen");
  if($(".d10-overflow").hasClass("d10-annopen")) {
$(".ann-collapse").addClass("ann-iconed");
   $(".ann-collapse").removeClass(".ann-collapse");
   $(".d10-collapsed").addClass("d10-collapse");
}else {
$(".ann-collapse").removeClass("ann-iconed");
   $(".d10-collapsed").removeClass("d10-collapse");
}
});

Headerinclude Edilecek'ler
Kod:
<link rel="stylesheet" type="text/css" media="screen" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,300" rel="stylesheet" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Demo
Kod:
http://codepen.io/coder-rj/pen/VjGvxk
Ara
Cevapla PGM
Teşekkür verenler:
#7
(02-08-2016 Saat: 01:12)Enes Bayraktar Nickli Kullanıcıdan Alıntı: Benimde bir eklemem olsun istedim

Renk uyumları ile ilgili siteler
Kod:
http://www.colorhunt.co

Yeni dizayn trendleri için (Material ve İos)
Kod:
http://www.materialup.com

Şimdi sizle bir duyuru pano'su yazalim

HTML Kodumuz
Kod:
<div class="d10-overflow">
<div class="d10-ann"><i class="ion-ios-bell-outline"></i><label>Yönetimden Mesaj Var !</label>   <a href="#" class="ann-collapset"><i class="ann-collapse ion-ios-arrow-down"></i></a>
</div>
<div class="d10-collapsed">
  <ul>
    <li>Sitemiz Açılmıştır !</li>
    <li>Admin Alimi Vardır !</li>
    <li>Üyelere Özel Kampanya Devam Ediyor 5 Tema Alana 10 Hediye !</li>
    <li>Coder Aranır !</li>
  </ul>
</div>
</div>

CSS Kodumuz
Kod:
.d10-ann {height:45px; width:100%; background:#232323;  color:#D8E6EC; display:inline-block; border-radius:3px; box-shadow: 0 1px 2px rgba(0,0,0,.1) !important; z-index:2; position:relative;}

.d10-ann i {font-size:1.2em; display:inline-block;  margin-right:10px; margin-left:10px; color:#FFD833; padding:3px 7px; border:1.5px solid #FFD833; border-radius:2px; text-align:center; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); margin-top:7px;}

.d10-ann label {display:inline-block; font-family:"Raleway"; font-size:13.5px; color:#FFD833; position:relative; top:-1px;}

.d10-ann a.ann-collapset i.ann-collapse {cursor:pointer; border:0px; padding:0px; box-shadow:none; float:right; margin-top:13px; margin-right:15px; transition:0.5s ease all;}

.d10-ann a.ann-collapset:hover {transition:0.5s ease all; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}

.d10-collapsed {width:95%; margin:auto; background:#313337; height:auto; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); border-radius:3px; position:relative; top:-3px; z-index:1; transform:translateY(0px); -webkit-transform:translateY(0px); transition:0.5s ease all; -moz-transform:translateY(0px); max-height:200px; min-height:40px;}

.d10-collapse {transform:translateY(-100%) !important; -webkit-transform:translateY(-100%) !important; transition:0.5s ease all;}

.d10-overflow {height:auto; max-height:250px; min-height:100px; overflow:hidden;}

.ann-iconed {transform: rotate(180deg) !important; -webkit-transform: rotate(180deg); transition:0.5s ease all; margin-top:10px !important;}

.d10-collapsed ul {margin:0px; padding:0px;}

.d10-collapsed ul li {list-style:none; padding:10px 10px 7px 10px; color:#FFD833; font-family:"Raleway"; font-size:12px;}

Jquery Kodumuz
Kod:
$(".ann-collapset").click(function(){
  $(".d10-overflow").toggleClass("d10-annopen");
      if($(".d10-overflow").hasClass("d10-annopen")) {
        $(".ann-collapse").addClass("ann-iconed");
    $(".ann-collapse").removeClass(".ann-collapse");
    $(".d10-collapsed").addClass("d10-collapse");
    }else {
        $(".ann-collapse").removeClass("ann-iconed");
    $(".d10-collapsed").removeClass("d10-collapse");
    }
});

Headerinclude Edilecek'ler
Kod:
<link rel="stylesheet" type="text/css" media="screen" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,300" rel="stylesheet" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

@Hatake: Mete, bu kodlarıda güzel bir biçimde konuna eklersen bence gayet güzel bir konu olur.

Konu çok faydalı, teşekkürler.
https://instagram.com/alphazzers
Ara
Cevapla PGM
Teşekkür verenler:
#8
(02-08-2016 Saat: 01:14)#Captain Nickli Kullanıcıdan Alıntı:
(02-08-2016 Saat: 01:12)Enes Bayraktar Nickli Kullanıcıdan Alıntı: Benimde bir eklemem olsun istedim

Renk uyumları ile ilgili siteler
Kod:
http://www.colorhunt.co

Yeni dizayn trendleri için (Material ve İos)
Kod:
http://www.materialup.com

Şimdi sizle bir duyuru pano'su yazalim

HTML Kodumuz
Kod:
<div class="d10-overflow">
<div class="d10-ann"><i class="ion-ios-bell-outline"></i><label>Yönetimden Mesaj Var !</label>   <a href="#" class="ann-collapset"><i class="ann-collapse ion-ios-arrow-down"></i></a>
</div>
<div class="d10-collapsed">
  <ul>
    <li>Sitemiz Açılmıştır !</li>
    <li>Admin Alimi Vardır !</li>
    <li>Üyelere Özel Kampanya Devam Ediyor 5 Tema Alana 10 Hediye !</li>
    <li>Coder Aranır !</li>
  </ul>
</div>
</div>

CSS Kodumuz
Kod:
.d10-ann {height:45px; width:100%; background:#232323;  color:#D8E6EC; display:inline-block; border-radius:3px; box-shadow: 0 1px 2px rgba(0,0,0,.1) !important; z-index:2; position:relative;}

.d10-ann i {font-size:1.2em; display:inline-block;  margin-right:10px; margin-left:10px; color:#FFD833; padding:3px 7px; border:1.5px solid #FFD833; border-radius:2px; text-align:center; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); margin-top:7px;}

.d10-ann label {display:inline-block; font-family:"Raleway"; font-size:13.5px; color:#FFD833; position:relative; top:-1px;}

.d10-ann a.ann-collapset i.ann-collapse {cursor:pointer; border:0px; padding:0px; box-shadow:none; float:right; margin-top:13px; margin-right:15px; transition:0.5s ease all;}

.d10-ann a.ann-collapset:hover {transition:0.5s ease all; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}

.d10-collapsed {width:95%; margin:auto; background:#313337; height:auto; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); border-radius:3px; position:relative; top:-3px; z-index:1; transform:translateY(0px); -webkit-transform:translateY(0px); transition:0.5s ease all; -moz-transform:translateY(0px); max-height:200px; min-height:40px;}

.d10-collapse {transform:translateY(-100%) !important; -webkit-transform:translateY(-100%) !important; transition:0.5s ease all;}

.d10-overflow {height:auto; max-height:250px; min-height:100px; overflow:hidden;}

.ann-iconed {transform: rotate(180deg) !important; -webkit-transform: rotate(180deg); transition:0.5s ease all; margin-top:10px !important;}

.d10-collapsed ul {margin:0px; padding:0px;}

.d10-collapsed ul li {list-style:none; padding:10px 10px 7px 10px; color:#FFD833; font-family:"Raleway"; font-size:12px;}

Jquery Kodumuz
Kod:
$(".ann-collapset").click(function(){
  $(".d10-overflow").toggleClass("d10-annopen");
      if($(".d10-overflow").hasClass("d10-annopen")) {
        $(".ann-collapse").addClass("ann-iconed");
    $(".ann-collapse").removeClass(".ann-collapse");
    $(".d10-collapsed").addClass("d10-collapse");
    }else {
        $(".ann-collapse").removeClass("ann-iconed");
    $(".d10-collapsed").removeClass("d10-collapse");
    }
});

Headerinclude Edilecek'ler
Kod:
<link rel="stylesheet" type="text/css" media="screen" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,300" rel="stylesheet" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

@Hatake: Mete, bu kodlarıda güzel bir biçimde konuna eklersen bence gayet güzel bir konu olur.

Konu çok faydalı, teşekkürler.

@Enes Bayraktar @#Captain Teşekkürler beyler şimdi ekliyorum
Ara
Cevapla PGM
Teşekkür verenler:
#9
Eline sağlık güzel konu olmuş
Ücretli Grafik İşleri Yapılır.
İletişim: Discord 
Biz birbirimize dönmüş iki ayna gibiyiz. İçimizde binlerce olsa da görüntümüz bir biz sadece birbirimizi görürüz…
                                                             
Cevapla PGM
Teşekkür verenler:
#10
http://sezaryus.10tl.net/forumdisplay.php?fid=10

EĞİTİCİ KODLAR
Ara
Cevapla PGM
Teşekkür verenler:
#11
Güncel.
Ara
Cevapla PGM
Teşekkür verenler:
#12
Teşekkürler hocam
Ara
Cevapla PGM
Teşekkür verenler:
#13
Calc yöntemi iyiymiş eline sağlık.
Ara
Cevapla PGM
Teşekkür verenler:
#14
Güncel
Ara
Cevapla PGM
Teşekkür verenler:
#15
Teşekkürler çok iyi bir konu olmuş
eskilere hasret kaldık.
Cevapla PGM
Teşekkür verenler:
#16
(01-08-2016 Saat: 15:09)Quexa Nickli Kullanıcıdan Alıntı: Çok sağlam olmuş. Teşekkürler.
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



***

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