Konuyu Oyla:
  • Toplam: 1 Oy - Ortalama: 5
  • 1
  • 2
  • 3
  • 4
  • 5
Tab Forum Sistemi Yapımı
#1
İlk olarak:
Admin Paneli > Temalar & Şablonlar > Şablonlar > Hangi temaya yapacaksanız o temaya girin > Forum Bit Şablonlar >  forumbit_depth1_cat giriniz.
Ardından, en üstte bulunan bu kodu: 
Kod:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
Şu şekilde değiştirin:
Kod:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder frm s{$forum['fid']}" id="tab{$forum['fid']}">
global.css en üste ekle:
Kod:
ul.sekmeler{
margin: 0px;
padding: 0px;
list-style: none;
background:#e45f56;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
overflow:hidden;
}
ul.sekmeler li{
background: none;
color: #fff;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
user-select:none;
}

ul.sekmeler li:hover {
background:rgba(0,0,0,.05);
}

ul.sekmeler li.tiklanan{
background: #fff;
color: #222;
}

.tborder.frm.s1 {
display:table;
}

.tborder.tiklanan {display: table !important;}

.tborder.frm {
   display: none;
}

headerinclue en alta ekle:
Kod:
<script>
$(function(){

$('ul.sekmeler li').click(function(){
var sekme_id = $(this).attr('sekme');

$('ul.sekmeler li').removeClass('tiklanan');
$('.tborder').removeClass('tiklanan');
$('.tborder').removeClass('s1');



$(this).addClass('tiklanan');
$("#"+sekme_id).addClass('tiklanan');
});
});
</script>
index şablonu gir {$forums} üstüne ekle:
Kod:
<ul class="sekmeler">
<li class="sekme-link tiklanan" sekme="tab1">Kategori 1</li>
<li class="sekme-link" sekme="tab10">Kategori 2</li>
</ul>
Bir hata olursa belirtiniz.
Soru: Nasıl yeni kategori eklerim?
Cevap: http://destek.10tl.net/showthread.php?tid=94854&pid=625719#pid625719
Soru: Her tıkladığımda boşluk ekliyor neden?
Cevap: http://destek.10tl.net/showthread.php?tid=94854&pid=625726#pid625726

Yapan bir arkadaş ss alıp görüntüsünü koyabilir mi? Konuya ekleyeyim.
5bo0ov6.png
HTML CSS Javascript jQuery PHP Dart Flutter

"Son Tema Ekibi Lideri"
Cevapla PGM
Teşekkür verenler:
#2
vaktim olsa eklerdim, sonra denemek üzere arşive atayım.
Ara
Cevapla PGM
Teşekkür verenler:
#3
Elinize sağlık
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:
#4
(17-12-2017 Saat: 16:42)Nophex Nickli Kullanıcıdan Alıntı: İlk olarak:
Admin Paneli > Temalar & Şablonlar > Şablonlar > Hangi temaya yapacaksanız o temaya girin > Forum Bit Şablonlar >  forumbit_depth1_cat giriniz.
Ardından, en üstte bulunan bu kodu: 
Kod:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
Şu şekilde değiştirin:
Kod:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder frm s{$forum['fid']}" id="tab{$forum['fid']}">
global.css en üste ekle:
Kod:
ul.sekmeler{
margin: 0px;
padding: 0px;
list-style: none;
background:#e45f56;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
overflow:hidden;
}
ul.sekmeler li{
background: none;
color: #fff;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
user-select:none;
}

ul.sekmeler li:hover {
background:rgba(0,0,0,.05);
}

ul.sekmeler li.tiklanan{
background: #fff;
color: #222;
}

.tborder.frm.s1 {
display:table;
}

.tborder.tiklanan {display: table !important;}

.tborder.frm {
   display: none;
}

headerinclue en alta ekle:
Kod:
<script>
$(function(){

$('ul.sekmeler li').click(function(){
var sekme_id = $(this).attr('sekme');

$('ul.sekmeler li').removeClass('tiklanan');
$('.tborder').removeClass('tiklanan');
$('.tborder').removeClass('s1');



$(this).addClass('tiklanan');
$("#"+sekme_id).addClass('tiklanan');
});
});
</script>
index şablonu gir {$forums} üstüne ekle:
Kod:
<ul class="sekmeler">
<li class="sekme-link tiklanan" sekme="tab1">Kategori 1</li>
<li class="sekme-link" sekme="tab10">Kategori 2</li>
</ul>
Bir hata olursa belirtiniz.

Yapan bir arkadaş ss alıp görüntüsünü koyabilir mi? Konuya ekleyeyim.
kategorileri buna nasıl eklicez.
Ara
Cevapla PGM
Teşekkür verenler:
#5
İşte bu soruyu bekliyordum,
Yeni kategori açtınız, o kategorinin başlığına gelin. fid=23 gibi bir şey yazar. 23 yerine başka bir şey yazar. O sayıyı kopyalayın.
Burada yeni bir li ekleyin. Kısa olarak en alttaki li etiketini kopyalayın tekrar yapıştırın. Ardından, tab10 yazan yere o kopyaladığınız sayıyı yazın.
Kod:
<ul class="sekmeler">
<li class="sekme-link tiklanan" sekme="tab1">Kategori 1</li>
<li class="sekme-link" sekme="tab10">Kategori 2</li>
<li class="sekme-link" sekme="tab10">Kategori 2</li>
</ul>

İşlem bu kadar. Eğer sorun çıkarsa tekrardan yazınız.
5bo0ov6.png
HTML CSS Javascript jQuery PHP Dart Flutter

"Son Tema Ekibi Lideri"
Cevapla PGM
Teşekkür verenler:
#6
her panel değiştirdiğimde <br> efekti gösteriyor neden.
Ara
Cevapla PGM
Teşekkür verenler:
#7
Site linki verir misiniz?
5bo0ov6.png
HTML CSS Javascript jQuery PHP Dart Flutter

"Son Tema Ekibi Lideri"
Cevapla PGM
Teşekkür verenler:
#8
localhost.
Ara
Cevapla PGM
Teşekkür verenler:
#9
Ben denedim, br etiketi eklemiyor.
5bo0ov6.png
HTML CSS Javascript jQuery PHP Dart Flutter

"Son Tema Ekibi Lideri"
Cevapla PGM
Teşekkür verenler:
#10
buyrun site link
http://turkishleak.10tl.net/index.php
Ara
Cevapla PGM
Teşekkür verenler:
#11
forumbit_depth1_cat gir, ardından en altta bulunan <br /> etiketini sil.
5bo0ov6.png
HTML CSS Javascript jQuery PHP Dart Flutter

"Son Tema Ekibi Lideri"
Cevapla PGM
Teşekkür verenler:
#12
halloldu eywh.
Ara
Cevapla PGM
Teşekkür verenler:
#13
Şşt.
5bo0ov6.png
HTML CSS Javascript jQuery PHP Dart Flutter

"Son Tema Ekibi Lideri"
Cevapla PGM
Teşekkür verenler:
#14
Vay be bunu yaptığımı bile hatırlamıyorum, ne zaman geçmiş bee :')
5bo0ov6.png
HTML CSS Javascript jQuery PHP Dart Flutter

"Son Tema Ekibi Lideri"
Cevapla PGM
Teşekkür verenler:
#15
(15-12-2019 Saat: 17:42)mehmetext Nickli Kullanıcıdan Alıntı: Vay be bunu yaptığımı bile hatırlamıyorum, ne zaman geçmiş bee :')

Hızlı zamanların :d
Ara
Cevapla PGM
Teşekkür verenler:
#16
(15-12-2019 Saat: 18:06)Escobar Nickli Kullanıcıdan Alıntı:
(15-12-2019 Saat: 17:42)mehmetext Nickli Kullanıcıdan Alıntı: Vay be bunu yaptığımı bile hatırlamıyorum, ne zaman geçmiş bee :')

Hızlı zamanların :d

İnternetin yavaş ama bizim hızlı olduğumuz zamanlar xD
5bo0ov6.png
HTML CSS Javascript jQuery PHP Dart Flutter

"Son Tema Ekibi Lideri"
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