Css3'lü Duyuru Paneli ( Yeni )

[leojely]

Bir mybb destek sitesinde gördüğüm bu duyuru panellerini sizlerle paylaşmak istedim.
Tema Yapanların İşine Yarıyacağına inanıyorum


Eklenti Kurulumu:

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

Kod: Tümünü Seç Tümünü Kopyala

/* 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 > (Tema isminiz) > Ana Sayfa - [index] Şablonlar > index şablonunu açın > {$header} kodunun hemen altına aşağıdaki kodları kopyalayın ve yapıştırın.

Kod: Tümünü Seç Tümünü Kopyala

<div class="dpaneli bilgi"><p>Sezar38 D10 Duyuru Yazısı 1</p></div>

<div class="dpaneli basarili"><p>Sezar38 D10 Duyuru Yazısı 2</p></div>

<div class="dpaneli uyari"><p>Sezar38 D10Duyuru Yazısı 3</p></div>

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

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

[Hatake]

Çok hoş duruyor.

[Gameiro.]

Ellerinize sağlık,beğendim. (Not: Paylaşmasına sağlık dedim yoksa kendi yapmamış)

[leojely]

Ellerinize sağlık,beğendim.

Rica Ederim.

[İndirmePaylasim]

Nasıl Ol cak YAPTIM Olmadı

[kaRanLık-61]

Güzel olmuş işe yarar ama sanki bunu bir yerde gördüm gibi

[Gameiro.]

Güzel olmuş işe yarar ama sanki bunu bir yerde gördüm gibi

hocam mybb'nin destek sitesinden almış arkadaş.

[#Power]

Güzel olmuş işe yarar ama sanki bunu bir yerde gördüm gibi

hocam mybb'nin destek sitesinden almış arkadaş.

Ben burada paylaşıldı diye hatırlıyorum. BlackCat yapmıştı bunu.