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.

Kaynak ikonu

XenForo 2.1 Sayfa yenilenince değişen ipucu yapımı 2020-02-26

indirmek için izniniz yok
Bu sistem 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
71
Görüntüleme
1,194
İlk yayınlama
Son güncelleme
Değerlendirme
5.00 yıldız 5 değerlendirme

Hüseyn. ait diğer kaynakar

En son güncellenenler

  1. Js cache sorunu

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

Son incelemeler

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
Ellerinize sağlık.
Hüseyn.
Hüseyn.
teşekkürler hocam