- Uyumlu XF 2 Sürümleri
Aşağıdaki konuda geçen güzel tasarımı daha kolay bulunabilmesi amacıyla kaynak olarak paylaşmak istedim.
Eklenti isteği - Sağ da Hesap no kutusu.
Widget oluşturarak bu işlemi çok basit bir şekilde gerçekleştirebilirsiniz.
Görünüm ve diller -> Widget yöneticisi alanına gelerek Widget Ekle butonuna tıklayın. Karşınıza gelen Widget tanımı seçeneklerinden HTML seçeneğini seçip Widget Ekle butonuna tıklayın. Karşınıza gelen alandan seçenekleri aşağıdaki gibi düzenleyin.
Widget kimliği-ID: forum_bagis_kutusu
Başlık: Forum Bağış Kutusu
Bu pozisyonlarda göster: Forum listesi: Kenar çubuğu (Sıra 1 Olsun)
Şablon:
<div class="bildiri">
<p>Buraya Yazı Gelecek</p>
<div class="ButtonAlan"><a href="Link-Eklenecek">Link Yazısı</a>
</div>
</div>
Widget alanı Ayarları Ekran Görüntüsü:
Kullanmış olduğunuz temanın extra.less şablonuna aşağıdaki css kodlarını ekleyin.
.bildiri {
position: relative;
padding: 1em 1.5em;
color: #fff;
background: #2577B1;
}
.bildiri:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #2577B1 #fff;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
.ButtonAlan{
width: 100%;
height: 30px;
background: #353b48;
position: absolute;
left: 0px;
text-align: center;
font-family: sans-serif;
cursor: pointer;
}
.ButtonAlan a{
color: #FFF !important;
text-decoration: none;
justify-content: center;
line-height: 30px;
}
.ButtonAlan:hover {
background: #f2930d;
}
Örnek Görünüm:
Ufakta olsa css bildiğinizi varsayarak alanın renklerini değiştirmek isterseniz css üzerinden istediğiniz renk kodlarını ekleyerek değiştirebilirsiniz.