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

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
119
Görüntüleme
2,828
İ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

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.