Prusa WiseCp Tema - Dokümantasyon - Uyarı Kutusu Bileşeni

Uyarı Kutusu Bileşeni Nedir?

Uyarı Kutusu, belirli bir iletiyi içeren bir metin kutusudur. Göstereceği mesajın türüne göre farklı uyarı türleri vardır. FonPageBuilder Uyarı Kutusu eklentisi ile web sitenizde kolayca bir uyarı kutusu (alert box) oluşturabilirsiniz. Uyarı Kutusu ve stilleri hakkında daha detaylı bilgi için Bootstrap Alerts Dokümantasyonunu inceleyebilirsiniz.

Uyarı Kutusu Bileşenini sayfanıza ekledikten sonra Bileşen Düzenleme Araçlarındaki Bileşeni Düzenle ögesine tıkladığınızda açılan Bileşen Düzenleme Penceresindeki ögelerin detaylarına aşağıda erişebilirsiniz.

Genel Ayarlar

Bileşen Adı
: Sitenizdeki her bir dil için bileşeninize bir isim verin. Bu isim bileşene göre değişmekle birlikte genelde sadece Yönetici bilgilendirmesi içindir. Yönetim Paneli FonPageBuilder sayfa düzenleme ekranınızdaki satır ve sütunlarda bileşen bu isimle gösterilecektir. Böylece yerleşim düzeninizdeki bileşeni doğru ve kolayca teşhis edebilir ve seçebilirsiniz.

Bileşen Seçenekleri

Uyarı Stili
: Uyarı Kutusu bileşeninin sayfanızda hangi stilde gösterilmesini istediğinizi seçin.
- Birincil: - Birincil (Primary) Stili
- İkincil: - İkincil (Secondary) Stili
- Başarılı: - Başarılı (Success) Stili
- Bilgi: - Bilgi (Info) Stili
- Uyarı: - Uyarı (Warning) Stili
- Tehlike: - Tehlike (Danger) Stili
- Koyu: - Koyu/Karanlık (Dark) Stili
- Açık: - Açık/Aydınlık (Light) Stili
Simge Göster
: Uyarı Kutusu içerisinde simge gösterilip gösterilmeyeceğini seçin.
Simge
: Uyarı Kutusu içerisinde göstermek istediğiniz FontAwesome simgesini seçin. Bu alan, "Simge Göster" seçeneği etkinleştirilmişse gösterilir.
Kapat Düğmesi
: Uyarı Kutusunun sağ üst köşesinde "" kapat düğmesinin gösterilip gösterilmeyeceğini seçin.

İçerik Ayarları

Bileşen Adını Göster
: Bileşen Adı alanında girdiğiniz metni Uyarı Kutusu Başlığı olarak göstermek istiyorsanız Evet Seçeneğini seçin.
Bileşen Adı Stil Ayarları
: Başlığı göstermeyi seçtiğinizde başlık stilini biçimlendirebileceğiniz alanları gösterir. Bu alanlar zorunlu değildir, boş bırakılabilir.
- Başlık Tipi: Açılır listeden başlığın hangi html öğesi ile (H1,H2,H3,H4,H5,H6) gösterileceğini seçin.
- Başlık Rengi: Başlığı daha dikkat çekici bir renkte göstermek istiyorsanız başlık rengini seçin. Bu alan Uyarı Kutusu Stili olarak Light (Açık/Aydınlık) Stil seçildiğinde gösterilir.
- Başlık Font Özellikleri: Uyarı Kutusu başlığına ait font özelliklerini buradan ayarlayabilirsiniz. Boş bırakırsanız "Başlık Tipi" alanında seçtiğiniz html ögesinin stili uygulanır.
  - Yazı Boyutu: Başlık yazı boyutunu seçin - font-size
  - Satır Yüksekliği: Başlık satır yüksekliğini seçin - line-height
  - Harf Mesafesi: Başlık harfleri arasındaki mesafeyi seçin - letter-spacing
  - Yazı Stili:
    - : Altı Çizili - text-decoration: underline
    - : Eğik (Italic) - font-style: italic
    - : Büyük Harf - text-transform: uppercase
  - Yazı Hizalama (Başlık):
    - : Sola Hizalanmış - text-align: left
    - : Ortalanmış - text-align: center
    - : Sağa Hizalanmış - text-alin: right
  - Yazı Genişliği: Başlık metninin kalınlığını seçin - font-weight
- Başlık Margin (Dış Boşluk): Başlık ile içerik arasındaki mesafeyi ayarlayın.
  - Üst: Başlık üst margin (kenar boşluğu) değerini girin.
  - Alt: Başlık alt margin (kenar boşluğu) değerini girin.
İçerik Ayarları
: Uyarı Kutusu içeriğinde göstermek istediğiniz içerik metnini girin.
- İçerik: Sitenizdeki her bir aktif dil için uyarı kutusu içeriği olarak göstermek istediğiniz metni girin.

Bileşen Stil Ayarları

Sınıf
: Bileşen için özel CSS sınıfı/sınıfları tanımlamak isterseniz burayı kullanabilrsiniz. Daha sonra CSS stil dosyanızdan ilgili sınıf ile ilgili biçimlendirmeleri buraya başvurarak gerçekleştirebilirsiniz. Örneğin:light-grey-rounded-box
Dahili Stil
: Bileşen için css biçimlendirmesini harici tema css dosyalarınız yerine doğrudan bu alana yazacağınız css kodu ile gerçekleştirebilirsiniz. Eklediğiniz css biçimlendirmesini sadece bu bileşen için aktif olmasını ve aynı css sınıfına sahip olan sayfadaki diğer ögeleri etkilememesini istiyorsanız stil kodunuz içerisinde @widgetId ibaresinden sonra stil kodunuzu ekleyebilirsiniz. @widgetId önyüzde, sistem tarafından otomatik oluşturulurulan id ile değiştirilir. Uyarı Kutusu Bileşeni içerisinde biçimlendirebileceğiniz css sınıflarını, site önyüzünüzde bileşenin bulunduğu sayfadayken Tarayıcınızda F12 - Geliştirici araçlarından Code Inspection ile .fon-alert-widget css sınıfı altından inceleyebilirsiniz.
```
												
@widgetId .light-grey-rounded-box{
	background-color: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 5px;
}
												
											
```

Bileşen Penceresi Kayıt Düğmeleri

Sayfayı Kaydet
: Bileşende gerçekleştirdiğiniz değişiklikler ve sayfada gerçekleştirdiğiniz tüm değişiklikler veritabanına kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır.
Kaydet & Düzenle
: Bileşende gerçekleştirdiğiniz değişiklikler bileşen kodu içerisine kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır. Sayfanızda yaptığınız değişikler henüz kaydedilmemiştir. Sayfanızı kaydetmek için mutlaka sayfanın sağ kenarında bulunan MENU çubuğu altından Kaydet düğmesine tıklamanız gerekir.