Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

  • Forumdan daha fazla yararlanmak için, profilinizi telefon numaranız 📱 ile doğrulayın ve daha ayrıcalıklı olun 😉
    Daha fazla bilgi!
Kaynak ikonu

XF 2.0 Kendi Özel Bildiri - Duyuru HTML Widget Tasarımımız

Bu eklenti, add-ons XenForo 2.0.X ile uyumlu ve stabil olarak çalışmaktadır.
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:
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ü:

Widget_1.jpg

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.

OzelBildiriAlani.gif
Yazar
mkucuksari
Görüntüleme
3,709
İlk yayınlama
Son güncelleme
Değerlendirme
0.00 yıldız 0 değerlendirme

mkucuksari ait diğer kaynakar

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz.

Zevkine göre renk kombinasyonunu belirle

Gece/Gündüz modunu seç

Gece ve gündüz modlarından tarzınıza yada ihtiyaçlarınıza uygun olanı seçerek kullana bilirsiniz.

Tam ekran yada dar ekran

Temanızın gövde büyüklüğünü sevkiniz, ihtiyacınıza göre dar yada geniş olarak kulana bilirsiniz.

Izgara yada normal mod

Temanızda forum listeleme yapısını ızgara yapısında yada normal yapıda listemek için kullanabilirsiniz.

Forum arkaplan resimleri

Forum arkaplanlarına eklenmiş olan resimlerinin kontrolü senin elinde, resimleri aç/kapat

Sidebar blogunu kapat/aç

Forumun kalabalığında kurtulmak için sidebar (kenar çubuğunu) açıp/kapatarak gereksiz kalabalıklardan kurtula bilirsiniz.

Yapışkan sidebar kapat/aç

Yapışkan sidebar ile sidebar alanını daha hızlı ve verimli kullanabilirsiniz.

Radius aç/kapat

Blok köşelerinde bulunan kıvrımları kapat/aç bu şekilde tarzını yansıt.

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.