You need to enable JavaScript to run this app.

Skip to main content

MyBB Bildiri (Alert) Kutuları - Bootstrap v4 Stil

MyBB Bildiri (Alert) Kutuları - Bootstrap v4 Stil

Full-Stack Developer
MyBB Bildiri (Alert) Kutuları - Bootstrap v4 Stil
MyBB için bildiri (alert) kutuları bb kodu; konu ve mesajlarınızda, kutu içerisinde dört adet renkli (başarı, bilgi, uyarı ve hata) mesaj kutusu eklenmesini sağlar. Bootstrap v4 stilleri ile oluşturulmuştur.

Ön İzleme (Demo)


[Image: 9YBag3.png]

Kurulum


Adım 1:

Yönetici KP → Yapılandırma → MyCode → Yeni MyCode Ekle bölümünü aşağıdaki gibi doldurun;

Başlık

Bildiri: Başarı

Kısa Açıklama

Başarı bildiri kutusunu ekler.

Düzenli İfade

Code:
\[basari\](.*?)\[/basari\]
Yerine Gösterilecek İfade

Code:
<div class="alert alert-success" role="alert">$1</div>
Aktif Edilsin?

(Evet)

Ayrıştırma Sırası

Kaçıncı sırada gözükeceğini seçiniz. (Boş bırakabilirsiniz.)

Adım 2:

Yönetici KP → Yapılandırma → MyCode → Yeni MyCode Ekle bölümünü aşağıdaki gibi doldurun;

Başlık

Bildiri: Bilgi

Kısa Açıklama

Bilgi bildiri kutusunu ekler.

Düzenli İfade

Code:
\[bilgi\](.*?)\[/bilgi\]
Yerine Gösterilecek İfade

Code:
<div class="alert alert-info" role="alert">$1</div>
Aktif Edilsin?

(Evet)

Ayrıştırma Sırası

Kaçıncı sırada gözükeceğini seçiniz. (Boş bırakabilirsiniz.)

Adım 3:

Yönetici KP → Yapılandırma → MyCode → Yeni MyCode Ekle bölümünü aşağıdaki gibi doldurun;

Başlık

Bildiri: Uyarı

Kısa Açıklama

Bilgi bildiri kutusunu ekler.

Düzenli İfade

Code:
\[uyari\](.*?)\[/uyari\]
Yerine Gösterilecek İfade

Code:
<div class="alert alert-warning" role="alert">$1</div>
Aktif Edilsin?

(Evet)

Ayrıştırma Sırası

Kaçıncı sırada gözükeceğini seçiniz. (Boş bırakabilirsiniz.)

Adım 4:

Yönetici KP → Yapılandırma → MyCode → Yeni MyCode Ekle bölümünü aşağıdaki gibi doldurun;

Başlık

Bildiri: Hata

Kısa Açıklama

Hata bildiri kutusunu ekler.

Düzenli İfade

Code:
\[hata\](.*?)\[/hata\]
Yerine Gösterilecek İfade

Code:
<div class="alert alert-danger" role="alert">$1</div>
Aktif Edilsin?

(Evet)

Ayrıştırma Sırası

Kaçıncı sırada gözükeceğini seçiniz. (Boş bırakabilirsiniz.)

Adım 5:

Yönetici KP → Temalar & Şablonlar → Temalar (Kullandığınız temayı seçin.) → global.css CSS sayfasının Gelişmiş Düzenleme bölümünden ekleyin;

Code:
.alert {
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
}

.alert-success {
    color: #3C763D;
    background-color: #DFF0D8;
    border-color: #D6E9C6;
}

.alert-info {
    color: #31708F;
    background-color: #D9EDF7;
    border-color: #BCE8F1;
}

.alert-warning {
    color: #8A6D3B;
    background-color: #FCF8E3;
    border-color: #FAEBCC;
}

.alert-danger {
    color: #A94442;
    background-color: #F2DEDE;
    border-color: #EBCCD1;
}

Kullanım


Örnek kullanım aşağıdaki gibidir;

Başarı için;

Code:
[basari]Buraya içerik gelecek[/basari]
Bilgi için;

Code:
[bilgi]Buraya içerik gelecek[/bilgi]
Uyarı için;

Code:
[uyari]Buraya içerik gelecek[/uyari]
Hata için;

Code:
[hata]Buraya içerik gelecek[/hata]
(Geri bildirim için yorum yapabilirsiniz.)
Sic semper tyrannis.
This post was last modified: 12-24-2019, 12:42 AM by tedem.