İpuçları&öneriler Alıntı gibi, Cevapla Düğmesi Düzenle

XFdestek

Kurucu Üye
XFD Üyesi
Katılım
25 May 2014
Mesajlar
832
Tepkime puanı
362
Puanları
63
Konum
Türkiye
Web sitesi
xenforodestek.net

İtibar:

Like, Quote ve Reply linklerini yapmak için basit şablon düzenleme düğmeleri gibi görünüyor.
Bu kodlar Extra.less şablonuna eklenecektir.

İkinci kod, farklı bir şey için benzer bir düğmeye efekt üzerinde bir zoom tipi fare ekler. Kod 2'yi kullanırsanız, kod 1'i eklemeniz gerekmez ve bunun tersi de geçerlidir.

Bu, varsayılan XF2 (Sürüm 2.0.9) stili üzerinde test edildi, renk kodlarını beğeninize göre düzenledi. Bu sadece IE, FF ve safari'de test edilmiştir. Sadece Masaüstü Bilgisayar, Iphone 7 ve iPad 4 üzerinde test edilmiştir.

Kod 1, yakınlaştırmaz
zoom yapmaz:
.actionBar-action--reply, .js-multiQuote, .actionBar-action--like

    {

         display:inline-block;

         background: rgb(71, 167, 235);

         color: rgb(255, 255, 255);

         padding: 4px 9px;

         line-height: 19px;

         background: linear-gradient(rgb(71, 167, 235) 0%, rgb(71, 167, 235) 0%);

    }


.actionBar-action--reply:hover, .js-multiQuote:hover, .actionBar-action--like:hover {
         background: rgb(65, 158, 224);
         color: rgb(255, 255, 255);
         text-decoration: none;
         background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
    }
Kod 2, zoom fare etkisi gibi::
.actionBar-action--reply, .js-multiQuote, .actionBar-action--like
    {
         display:inline-block;
         background: rgb(71, 167, 235);
         color: rgb(255, 255, 255);
         padding: 4px 9px;
         line-height: 19px;
         background: linear-gradient(rgb(71, 167, 235) 0%, rgb(71, 167, 235) 0%);
    }

.actionBar-action--reply:hover, .js-multiQuote:hover {
         background: rgb(65, 158, 224);
         color: rgb(255, 255, 255);
         text-decoration: none;
         background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
    }

.actionBar-action--like:hover  {
        background: rgb(65, 158, 224);
        color: rgb(255, 255, 255);
        text-decoration: none;
        transition: all .4s ease;
        -webkit-transition: all .4s ease;
        background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
        transform: scale(1.25);
    }

@media (max-width: 800px) {
.actionBar-action--like:hover {
transform: none;     } }
 
Üst Alt