Like, Quote, Reply Button Edit

UnstucK · Jul 30, 2024

Compatibility with XenForo: 2.0, 2.1

In your extra.less temple add:

Code:

.actionBar-action--reply, .js-multiQuote, .actionBar-action--like,
.actionBar-action--report, .actionBar-action--edit, .actionBar-action--delete,
.actionBar-action--ip, .actionBar-action--warn, .actionBar-action--history
    {
         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;
}
}

Result: Before / After

To add the FA codes add in your extra.less template:

Less:

.actionBar-action--edit:before, .actionBar-action--report:before, .actionBar-action--ip:before, .actionBar-action--delete:before, .actionBar-action--spam:before, .actionBar-action--warn:before, .actionBar-action--history:before {
    display: inline-block;
    font-family: FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-right: 5px;
}
.actionBar-action--report:before {
    content: "\f071";
}
.actionBar-action--edit:before {
    content: "\f040";
}
.actionBar-action--delete:before {
    content: "\f00d";
}
.actionBar-action--ip:before {
    content: "\f002";
}
.actionBar-action--warn:before {
    content: "\f12a";
}
.actionBar-action.actionBar-action--like::before {
    content: "\f087\20";
}
.actionBar-action.actionBar-action--mq:before {
    content: "\f067\20";
}
.actionBar-action.actionBar-action--reply:before {
    content: "\f112\20";
}
.actionBar-action--history:before {
    content: "\f112\20";
}

For xenforo 2.1 add this code in your extra.less template:

Less:

.actionBar .actionBar-action {
    padding: 3px;
    border: 1px solid transparent;
    border-radius: 8px;
    margin-left: 5px;
    color: #959fb4;
    background: rgb(65, 158, 224);
    padding-right: 5px;
    padding-left: 5px;
    border-radius: 4px;
    display: inline-block;
}

Result: