• Hoşgeldin ziyaretçi , forumdan daha fazla yararlanmak için buradan üye olunuz...

xenforo 2x Aksiyon butonlarını özelleştirmek

Okunuyor :
xenforo 2x Aksiyon butonlarını özelleştirmek

YukseLL

Emektar
Yönetici
Admin
Moderatör
Üye
forumdaki aksiyon bar yanı alıntı yap ,cevap yaz,begen butonlarını daha estetik hale getirmek isterseniz extra.less şablonuna ekleyin

aksiyon1.jpg
resimdeki gibi yapmak için kod

CSS:
/* Action bar cevap button */
.message-footer {
    .actionBar-action--reply, .actionBar-action--mq, .actionBar-action--like, .actionBar-action--reaction {
        background: none !important;
        padding: 2px 15px;
        @media (max-width: @xf-responsiveMedium) {
            padding: 2px 2px;
        }
        border-color: #ececec;
    }
}
.message-footer {
    .actionBar-action--reply:hover, .actionBar-action--mq:hover, .actionBar-action--like:hover, .actionBar-action--reaction:hover {
        background: #edf6fd !important;
        text-decoration: none !important;
    }
}
/*****/

aksiyon2.jpg
resimdeki gibi yapmak için kod

CSS:
/* Action bar cevap button */
.actionBar-action {
    .actionBar-set--external & {
        padding: 3px 5px;
        color: #176093;
        border-radius: 2px;
        border: 1px solid white;
        box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
    }

    &--reaction {
        background-color: #eaf4fc;
    }

    &--mq {
        background-color: #d3f9bb;

        .tooltip-content & {
            background-color: inherit;
        }
    }

    &--reply {
        background-color: #fff4e5;

        .tooltip-content & {
            background-color: inherit;
        }
    }

    &--tag {
        background-color: #fce3e3;
    }

    .tooltip-content &:hover {
        opacity: 1;
    }

    a&:hover {
        .m-transition(all, 0.3s, ease-in-out, 0s);
        opacity: 0.5;
        text-decoration: none;

        .reaction-text {
            text-decoration: none;
        }
    }
}
/*****/
 
Üst Alt