MyBB Depo Forum

Orjinalini görmek için tıklayınız: CSS 3'lü Duyuru Paneli [Yeni - 2015]
Şu anda (Arşiv) modunu görüntülemektesiniz. Orjinal Sürümü Görüntüle internal link
Eklenti-Plugin Eklenti ismi: CSS 3'lü Duyuru Paneli [Yeni - 2015]
Güvenlik Eklenti Güvenlimi ?: Güvenli Onay-Cevap
Versiyon-Saat Eklenti Versiyonu:  1.4 - 1.8 - 1.6
Araç-Test  Test Durumu: Denenmiştir-sorunsuz Onay-Cevap
Açıklama-Detay Eklenti Açıklaması: Merhaba arkadaşlar, birkaç aydır yeni tema hazırlığına girişmiştim. Ancak işlerimin yoğunluğundan dolayı bir süreliğine yapımı bırakma kararı aldım. Ya da erteledim diyelim. Bu nedenle temada kullandığım duyuru panelini paylaşmak istedim. Tamamı Css ve Html kodlarından oluşuyor.

Resim-Grafik Ekran Görüntüsü:

resim

Makale-Not  Eklenti Kurulumu:

Admin Paneli  Sağ Ok Temalar&Şablonlar Sağ Ok Temalar Sağ Ok (Tema isminiz) Sağ Ok global.css Sağ Ok Gelişmiş Düzenleme Sağ Ok en alta aşağıdaki kodları kopyalayın Sağ Ok  Değişiklikleri Kaydet ve Kapat diyip editörü kapatın.

Kod:
/* Duyuru Paneli Başlangıç */

.dpaneli {
 position: relative;
 margin: 1em;
 background: #F2F1EF;
 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);
}

.bilgi {
 border-color: #0074D9;
    border-right: 4px solid #0074D9;
}

.bilgi:before {
 content: "i";
 background-color: #0074D9;
}

.basarili {
 border-color: #2ECC40;
        border-right: 4px solid #2ECC40;
}

.basarili:before {
 content: "√";
 background-color: #2ECC40;
}

.uyari {
 border-color: #f06c64;
            border-right: 4px solid #f06c64;

}

.uyari:before {
 content: "!";
 background-color: #f06c64;
}

/* Duyuru Paneli Bitiş */

Şablonlar Sağ Ok (Tema isminiz) Sağ Ok Ana Sayfa - [index] Şablonlar Sağ Ok index şablonunu açın Sağ Ok {$header} kodunun hemen altına aşağıdaki kodları kopyalayın ve yapıştırın.

Kod:
<div class="dpaneli bilgi"><p>BlackCat - MyBB.Com.TR - Duyuru Yazısı 1</p></div>

<div class="dpaneli basarili"><p>BlackCat - MyBB.Com.TR - Duyuru Yazısı 2</p></div>

<div class="dpaneli uyari"><p>BlackCat - MyBB.Com.TR - Duyuru Yazısı 3</p></div>

Sonrasında duyurularınızı düzenleyebilirsiniz. İyi çalışmalar Süper

Orjinal :
Kod:
http://codepen.io/walesmd/pen/zysbv


CSS 3'lü Duyuru Paneli [Yeni - 2015]

Ellerinize Sağlık
Ellerinize sağlık gayet güzel bir kodlama olmuş.
Tebrikler gayet başarılı bir tasarım..
Elinize sağlık hocam
Yorumlar için teşekkürler arkadaşlar. Tasarımın tamamı bana ait değil, yinede mevcut kodlamaya ilaveler yaptım tabiki

Kod:
http://codepen.io/walesmd/pen/zysbv
yazı rengini hangisinden değiştirebiliriz