• 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.1 Eklenti Sayfa yenilenince değişen ipucu yapımı 2020-02-26

indirmek için izniniz yok
Bu eklenti, add-ons XenForo 2.1.X ile uyumlu ve stabil olarak çalışmaktadır.
Uyumlu XF 2 Sürümleri
Merhabalar, Forumunuzda şık gözükecek ve yararlı olacak sayfa yenilendikce değişen ipucu yapımını paylaşıcam

İlk önce size vermiş olduğum js dosyasını indirip ftp aracıyla sitenizin olduğu ana dizine atın. Daha sonra PAGE_CONTAINER'de head tagının üzerine

PHP:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="ipucu.js"></script>

bunları ekliyoruz.

İkinci bir aşamada ise ipucunun görünmesini istediğimiz yere (page_container'de)

PHP:
<div class="hitm">
<ul class="hit">
<li class="hit-ikon"><i class="fas fa-lightbulb"></i></li>   
<li class="hitbaslik">Yararlı</li>
<li class="hityazi">
<div id="benim-hitim"></div>     
</li>
</ul>
</div>

üstteki kodu atıyoruz. Sıra geliyor css-e bunun için extra.less şablonumuzada

CSS:
.hitm {
    margin-bottom: 18px;
    padding-left: 15px;
    padding-right: 15px;
}

ul.hit {
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    padding: 0px !important;
    line-height: 45px;
    list-style: none;
    display: block;
    border: 1px solid #111;
    background: #202225;
}

ul.hit li {
    display: table-cell;
    vertical-align: middle;
    padding: 5px 10px;
    border-right: 1px solid #111;
}
ul.hit li:last-child {
    border: 0;
}
li.hit-ikon {
    width: 48px;
    height: 48px;
    display: block;
}
li.hit-ikon i {
    width: 100%;
    height: auto;
    display: block;
    font-size: 26px;
    text-align: center;
    color: yellow;
}

li.hitbaslik {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
}
li.hityazi {
    line-height: 25px;
    display: block;
}

kodlarımızı atıyoruz.

Ve sonuç
Screenshot.png


Yazıları size vermiş olduğum js dosyasının içerisine ekleyip, düzenleyebilirsiniz.
Yazar
Hüseyn.
İndirilme
112
Görüntüleme
2,389
İlk yayınlama
Son güncelleme
Değerlendirme
5.00 yıldız 6 değerlendirme

Hüseyn. ait diğer kaynakar

En son güncellenenler

  1. Js dosyası olmadan

    Uzun bir aradan sonra merhaba :) Widgets kısmından html açarak pozisyonu seçin. Şablon <div...
  2. Js cache sorunu

    Js dosyasında yapılan güncellemeden (yazı değiştirip eklemeden) sonra forumda değişikliklerin...

Son incelemeler

teşekkürler güzel eklenti tebrik ederim
harika paylaşım. emeğine sağlık
Ellerine sağlık :) tebrik ederim sizi,eklenti olarak evet daha mantıklı ve kullanışlı olacaktı kesinlikle...
Hüseyn.
Hüseyn.
teşekkürler hocam :)
Aferin qardaşıma, stil özelliklerine özellik diye de eklenir.
Hüseyn.
Hüseyn.
Çox sağol )
bunun eklenti versiyonunu geliştirdim yakında paylaşıcam
  • Gizliliğinize değer veriyoruz

    Bu sitenin çalışması için temel çerezleri ve deneyiminizi geliştirmek için isteğe bağlı çerezleri kullanıyoruz.

    Daha fazla bilgi görün ve tercihlerinizi yapılandırın

    Bu tanımlama bilgileri, güvenlik, ağ yönetimi ve erişilebilirlik gibi temel işlevleri etkinleştirmek için gereklidir. Bunları reddetmeyebilirsin.
    Bu tanımlama bilgilerini ayarlayarak tarama deneyiminiz için gelişmiş işlevsellik sunuyoruz. Bunları reddederseniz gelişmiş işlevsellik kullanılamaz.
    Güvenlik, analitik, performans veya reklam amaçlarıyla çeşitli hizmet sağlayıcılarla bağlantılı olarak işlevselliği güçlendirmek için üçüncü taraflarca ayarlanan tanımlama bilgileri gerekebilir.