Инструкция Like, Quote, Reply Button Edit

Простое редактирование шаблона, чтобы сделать ссылки Like, Quote и Reply похожими на кнопки.
Коды для создания кнопок нужно добавить в Extra.less вашего шаблона

Второй код добавляет эффект масштабирования при наведении мышки над кнопкой like или другой кнопки. Если вы используете код 2, вам не нужно добавлять код 1 и наоборот.

Это было проверено по умолчанию на стиле xf2 (Версия 2.0.9), редактируйте цветовые коды по своему вкусу. Это было протестировано только в IE, FF и safari. Испытано только на настольном компьютере, Iphone 7 и iPad 4.

Код 1- без эффекта. Работает с XF2.0 и XF2.1:​

.actionBar-action--reply, .actionBar-action--mq, .actionBar-action--like, .actionBar-action--reaction {
         display:inline-block !important;
         background: rgb(71, 167, 235) !important;
         color: rgb(255, 255, 255) !important;
         padding: 5px 12px 5px;
         line-height: 19px !important;
         border-radius: 4px;
         background: linear-gradient(rgb(71, 167, 235) 0%, rgb(71, 167, 235) 0%);
    }
.actionBar-action--reply:hover, .actionBar-action--mq:hover, .actionBar-action--like:hover, .actionBar-action--reaction:hover {
    display:inline-block !important;
         background: rgb(65, 158, 224) !important;
         color: rgb(255, 255, 255) !important;
         text-decoration: none !important;
         border-radius: 4px;
         background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
    }

Код 2 - с эффектом масштабирования. Работает с XF2.0 и XF2.1:​

.actionBar-action--reply, .actionBar-action--mq, .actionBar-action--like, .actionBar-action--reaction {
         display:inline-block !important;
         background: rgb(71, 167, 235) !important;
         color: rgb(255, 255, 255) !important;
         padding: 5px 12px 5px;
         line-height: 19px !important;
         border-radius: 4px;
         background: linear-gradient(rgb(71, 167, 235) 0%, rgb(71, 167, 235) 0%);
    }
.actionBar-action--reply:hover, .actionBar-action--mq:hover {
    display:inline-block !important;
         background: rgb(65, 158, 224) !important;
         color: rgb(255, 255, 255) !important;
         text-decoration: none !important;
         border-radius: 4px;
         background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
    }
.actionBar-action--like:hover, .actionBar-action--reaction:hover {
    display:inline-block !important;
         background: rgb(65, 158, 224);
         color: rgb(255, 255, 255) !important;
         text-decoration: none !important;
         border-radius: 4px;
         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, .actionBar-action--reaction:hover {
transform: none; } }

Код 3 - Кнопки для жалобы, редактирования, истории, удаления и ip. Работает с XF2.0 и XF2.1:​

.actionBar-action--report, .actionBar-action--edit, .actionBar-action--history, .actionBar-action--delete, .actionBar-action--spam, .actionBar-action--warn, .actionBar-action--ip {
         display:inline-block;
         background: rgb(71, 167, 235);
         color: rgb(255, 255, 255) !important;
         padding: 2px 6px 2px;
         line-height: 19px !important;
         border-radius: 4px;
         background: linear-gradient(rgb(71, 167, 235) 0%, rgb(71, 167, 235) 0%);
    }
.actionBar-action--report:hover, .actionBar-action--edit:hover, .actionBar-action--history:hover, .actionBar-action--delete:hover, .actionBar-action--spam:hover, .actionBar-action--warn:hover, .actionBar-action--ip:hover {
         background: rgb(65, 158, 224);
         color: rgb(255, 255, 255) !important;
         text-decoration: none;
         border-radius: 4px;
         background: linear-gradient(rgb(65, 158, 224) 0%, rgb(65, 158, 224) 0%);
    }