xenForo Hover Efektli Action Bar Yapımı 💙

08-05-2021, 14:41:56

xenForo Hover Efektli Action Bar Yapımı 💙

Forumumuza ufakta olsa bir modernlik katmak için konu düzen sil vb. butonların bulunduğu action bar kısmına hover efekti vermeye ne dersiniz?

Aşağıdaki kodu extra.less şablonuna eklemeniz yeterlidir.

.message-actionBar {
    .actionBar-action {
        font-size: 0;
        transition: .5s;
  
        &:hover {
            font-size: 100%;
            text-decoration:none;
            color: @xf-paletteColor3;
        }
        &:before {
            font-size: 15px;
            margin-left: 2px;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            margin-right: 5px;
        }
        &--inlineMod {
            font-size: 100%;
        }
        &--menuTrigger {
            font-size: 100%;
        }
        &--report:before {
            content: "f071";
        }
        &--edit:before {
            content: "f040";
        }
        &--delete:before {
            content: "f00d";
        }
        &--ip:before {
            content: "f002";
        }
        &--like:before {
            content: "f087";
        }
        &--warn:before {
            content: "f12a";
        }
        &--history:before {
            content: "f1da";
        }
        &--reaction i {
            display: none;
        }
        &--reaction:before {
            content: "f164";
        }
        &--spam:before {
            content: "f024";
        }
            @media(max-width:910px) {
            &:hover {
            font-size: 0;
            text-decoration:none;
            color: @xf-paletteColor3;
            }
        }
    }
}

Öncesi :

Sonrası :

08-05-2021, 14:45:17

#2

RequaizeN

Kimlik doğrulama veya yönetimden onay bekliyor.

Hoş görünüyor, elinize sağlık

11-05-2021, 14:19:11

#3

~~Garfield~~

Üyeliği durduruldu

Güzel.

11-05-2021, 17:10:16

#4

Celilkilic

Yorumlarınız için teşekkür ederim...

14-05-2021, 16:17:52

#5

FuNch

Celil53 adlı üyeden alıntı: mesajı görüntüle

Yorumlarınız için teşekkür ederim...

yaptığımda böyle çıktı simgeler

14-05-2021, 16:19:25

#6

Celilkilic

FuNch adlı üyeden alıntı: mesajı görüntüle

yaptığımda böyle çıktı simgeler

.message-actionBar {
    .actionBar-action {
        font-size: 0;
        transition: .5s;
   
        &:hover {
            font-size: 100%;
            text-decoration:none;
            color: @xf-paletteColor3;
        }
        &:before {
            font-size: 15px;
            margin-left: 2px;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            margin-right: 5px;
        }
        &--inlineMod {
            font-size: 100%;
        }
        &--menuTrigger {
            font-size: 100%;
        }
        &--report:before {
            content: "\f071";
        }
        &--edit:before {
            content: "\f040";
        }
        &--delete:before {
            content: "\f00d";
        }
        &--ip:before {
            content: "\f002";
        }
        &--like:before {
            content: "\f087";
        }
        &--warn:before {
            content: "\f12a";
        }
        &--history:before {
            content: "\f1da";
        }
        &--reaction i {
            display: none;
        }
        &--reaction:before {
            content: "\f164";
        }
        &--spam:before {
            content: "\f024";
        }
            @media(max-width:910px) {
            &:hover {
            font-size: 0;
            text-decoration:none;
            color: @xf-paletteColor3;
            }
        }
    }
}

olmazsa hocam bana site adresinizi atın bir bakayım

14-05-2021, 16:23:51

#7

FuNch

Celil53 adlı üyeden alıntı: mesajı görüntüle

.message-actionBar {
    .actionBar-action {
        font-size: 0;
        transition: .5s;
  
        &:hover {
            font-size: 100%;
            text-decoration:none;
            color: @xf-paletteColor3;
        }
        &:before {
            font-size: 15px;
            margin-left: 2px;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            margin-right: 5px;
        }
        &--inlineMod {
            font-size: 100%;
        }
        &--menuTrigger {
            font-size: 100%;
        }
        &--report:before {
            content: "\f071";
        }
        &--edit:before {
            content: "\f040";
        }
        &--delete:before {
            content: "\f00d";
        }
        &--ip:before {
            content: "\f002";
        }
        &--like:before {
            content: "\f087";
        }
        &--warn:before {
            content: "\f12a";
        }
        &--history:before {
            content: "\f1da";
        }
        &--reaction i {
            display: none;
        }
        &--reaction:before {
            content: "\f164";
        }
        &--spam:before {
            content: "\f024";
        }
            @media(max-width:910px) {
            &:hover {
            font-size: 0;
            text-decoration:none;
            color: @xf-paletteColor3;
            }
        }
    }
}

olmazsa hocam bana site adresinizi atın bir bakayım

oldu hocam teşekkürler

14-05-2021, 16:35:56

#8

fikirdanis

Eline sağlık.
Denemek lazım