- Uyumlu XF 2 Sürümleri
Öncelikle konuyu ben sadece editörleyelik anlamında paylaşıyorum. Anlatım ve kodlama için @netr0n kardeşimin ellerine sağlık.
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:
Widget alanı Ayarları Ekran Görüntüsü:
Kullanmış olduğunuz temanın extra.less şablonuna aşağıdaki css kodlarını ekleyin.
Ö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.
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:
Kod:
<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.
Kod:
.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.