MyBB Türkçe Destek Forumu

Tam Versiyon: MyBB Öne Çıkan Konular Alanı
Şu anda arşiv modunu görüntülemektesiniz. Tam versiyonu görüntülemek için buraya tıklayınız.
MyBB Öne Çıkan Konular Alanı: Sitenizde öne çıkarmak istediğiniz konuları, site kullanıcılarına daha hızlı ulaştırmanızı/duyurmanızı sağlar.
Kodlayan: tedem

Ekran Görüntüsü:

[Resim: jnY8DG.png]

(Kullanılan temaya göre düzenlenebilmesi için sade bir görünüm tasarladım, bilginize.)

Kurulum:
  1. Yönetici paneline giriniz.

  2. Kullandığınız temayı seçiniz.

  3. Yönetici paneline giriniz.

  4. Temanın  global.css  stil sayfasının en sonuna aşağıdaki CSS kodlarınız ekleyin ve kaydedin.
    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;
    }

  5. Temanızın  header  şablonun en altına aşağıdaki HTML kodlarını ekleyin ve kaydedin.
    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="#" 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="#" 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="#" 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="#" class="devami">Konuyu Görüntüle</a>
    </div>
    </div>
    </div>

Not: Anlatımı varsayılan (default) tema için yaptım. Farklı temalarda HTML kodunu, farklı alanlara koymanız gerekebilir. Bu konuda herhangi bir sorunla karşılaşırsanız, konu altına yorum yapabilirsiniz.