• 0 Oy - 0 Ortalama
  • 1
  • 2
  • 3
  • 4
  • 5
Kodlu Mybb Öne Çıkan Konular
#1
Forumda istediğiniz bir alana öne çıkarmak istediğiniz konuları eklemenizi yarıyor. 

Ekran Görüntüsü

[Resim: 2aBWlA.png]

Kullanımı

Admin panele giriş yapıyoruz. Ardından temalar & şablonlar bağlantısına tıklayıp sol menüden temalara basıyoruz. Temamıza tıklayıp, global.css'yi açıyoruz. En aşağıya inip aşağıda ki kodu ekliyoruz ve kayıt ediyoruz.


Kod:
.one-cikan-konu-alan {
margin: 0 -8px 18px -8px;
overflow: hidden; /* FIX */
}

.one-cikan-konu {
background-color: #FAFAFA;
width: calc(25% - 18px);
float: left;
margin: 0 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

.one-cikan-konu-ust {
background-color: transparent;
}

.one-cikan-konu-ust > h4.baslik {
border-bottom: 1px solid #ddd;
padding: 0 16px;
margin: 0;
text-transform: uppercase;
height: 42px;
line-height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.one-cikan-konu-ust > img.resim {
width: calc(100% + 2px);
height: 200px;
margin: 0 -1px;
}

.one-cikan-konu-icerik {
background-color: #FFF;
}

.one-cikan-konu-icerik > p.aciklama {
padding: 16px;
margin: 0;
}

.one-cikan-konu-alt {
background-color: transparent;
}

.one-cikan-konu-alt > a.devami {
border-top: 1px solid #ddd;
padding: 0 16px;
height: 42px;
line-height: 42px;
text-align: center;
display: block;
}
Daha sonra nerde göstermek istiyorsanız o kısma gireceksiniz. Biz header seçtik diyelim. Header şablonuna girin ve aşağıda ki kodları istediğiniz bir yere ekleyip kayıt edin.


Kod:
<div class="one-cikan-konu-alan">
<div class="one-cikan-konu">
<div class="one-cikan-konu-ust">
<h4 class="baslik">Öne Çıkan Konu Başlığınızı Buraya Giriniz</h4>
<img class="resim" src="http://www.bilim.org/wp-content/uploads/files-html_-css_-php_-js.jpg" alt="" />
</div>
<div class="one-cikan-konu-icerik">
<p class="aciklama">Buraya konunuz hakkında açıklama yazısı yazabilirsiniz.</p>
</div>
<div class="one-cikan-konu-alt">
<a href="http://www.forumcenneti.com/external.php?url=%23" class="devami">Konuyu Görüntüle</a>
</div>
</div>
<div class="one-cikan-konu">
<div class="one-cikan-konu-ust">
<h4 class="baslik">Öne Çıkan Konu Başlığınızı Buraya Giriniz</h4>
<img class="resim" src="http://www.bilim.org/wp-content/uploads/files-html_-css_-php_-js.jpg" alt="" />
</div>
<div class="one-cikan-konu-icerik">
<p class="aciklama">Buraya konunuz hakkında açıklama yazısı yazabilirsiniz.</p>
</div>
<div class="one-cikan-konu-alt">
<a href="http://www.forumcenneti.com/external.php?url=%23" class="devami">Konuyu Görüntüle</a>
</div>
</div>
<div class="one-cikan-konu">
<div class="one-cikan-konu-ust">
<h4 class="baslik">Öne Çıkan Konu Başlığınızı Buraya Giriniz</h4>
<img class="resim" src="http://www.bilim.org/wp-content/uploads/files-html_-css_-php_-js.jpg" alt="" />
</div>
<div class="one-cikan-konu-icerik">
<p class="aciklama">Buraya konunuz hakkında açıklama yazısı yazabilirsiniz.</p>
</div>
<div class="one-cikan-konu-alt">
<a href="http://www.forumcenneti.com/external.php?url=%23" class="devami">Konuyu Görüntüle</a>
</div>
</div>
<div class="one-cikan-konu">
<div class="one-cikan-konu-ust">
<h4 class="baslik">Öne Çıkan Konu Başlığınızı Buraya Giriniz</h4>
<img class="resim" src="http://www.bilim.org/wp-content/uploads/files-html_-css_-php_-js.jpg" alt="" />
</div>
<div class="one-cikan-konu-icerik">
<p class="aciklama">Buraya konunuz hakkında açıklama yazısı yazabilirsiniz.</p>
</div>
<div class="one-cikan-konu-alt">
<a href="http://www.forumcenneti.com/external.php?url=%23" class="devami">Konuyu Görüntüle</a>
</div>
</div>
</div>

İşlem bu kadar. Yapımcıya buradan teşekkür ediyoruz.
[Resim: logo.png]
  Alıntı

Hesap acin veya yorum yazmak icin Giris yapin

Yorum yazmak icin Giris yapmaniz gerekiyor.

Kayıt Ol

Hesap olusturmak ve bize katilmak cok kolay

Kayıt Ol

Giriş

Zaten bir hesabiniz var mi? Buradan Giris yapin

Giriş

Foruma Git:


Bu konuyu görüntüleyen kullanıcı(lar): 1 Ziyaretçi