Меняем вид кнопок Мне нравится и Ответить на XenForo

Всем привет! В этой теме мне хотелось бы поделиться с Вами тем, как поменять стиль или вид кнопок "Мне нравится, "Ответить" на форуме XenForo. Менять бы будем стиль с помощью правки шаблона, который называется message.css Сейчас мои кнопочки выглядят вот таким образом:






Итак идем в Панель управления вашего форума - Внешний вид - Шаблоны. Находим шаблон под названием message.css Открываем его, удаляем старый код и заменяем все на следующий код:

 .messageList .message
{
@property "message";
padding-top: 10px;
padding-bottom: 30px;
border-bottom: 1px solid @primaryLighterStill;
@property "/message";
/* note this change does offset quote/bbcode boxes by their top margin... maybe that doesn't matter?
padding-top: 10px;
padding-bottom: 30px; */
}

{xen:helper clearfix, '.messageList .message'}

/*** Message block ***/

.message .messageInfo
{
@property "messageInfo";
margin-left: 140px;
@property "/messageInfo";
}

.message .messageInfo.primaryContent
{
padding: 0;
border-bottom: none;
}

.message .newIndicator
{
@property "messageNewIndicator";
font-weight: bold;
font-size: 10px;
color: @contentBackground;
background: @primaryLight url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 1px 5px;
margin: -5px -5px 5px 5px;
border: 1px solid @primaryLight;
border-radius: 3px;
border-top-right-radius: 0px;
display: block;
float: right;
position: relative;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
@property "/messageNewIndicator";
margin-right: -{xen:calc '@content.padding-right + 5'}px;
}
.message .newIndicator span
{
@property "messageNewIndicatorInner";
background-color: @primaryLight;
border-top-right-radius: 3px;
position: absolute;
top: -4px;
right: -1px;
width: 5px;
height: 4px;
@property "/messageNewIndicatorInner";
}

.message .messageContent
{
@property "messageContent";
min-height: 100px;
@property "/messageContent";
}

.message .messageText,
.message .signature
{
@property "messageText";
font-size: 11pt;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 1.4;
@property "/messageText";
}

.message .signature
{
@property "messageSignature";
font-size: 9pt;
padding: 5px 0 0;
margin-top: 5px;
border-top: 1px dashed @primaryLighterStill;
@property "/messageSignature";
}

.message .messageMeta
{
@property "messageMeta";
font-size: 11px;
padding: 15px 5px 5px;
margin: -5px;
overflow: hidden;
zoom: 1;
@property "/messageMeta";
}

.message .privateControls
{
float: left;
}

.message .privateControls .item
{
float: left;
margin-right: 10px;
}

.message .publicControls
{
float: right;
}

.message .publicControls .item
{
float: left;
margin-left: 10px;
}

.message .publicControls .reply .MultiQuote
{
visibility: hidden;
}

.message .publicControls .reply:hover .MultiQuote
{
visibility: visible;
}
.message .publicControls a
{
display: block;
text-decoration: none;
padding: 2px 9px 2px 9px;
border: 1px solid @primaryLight;
background: @primaryLighterStill;
color: @primaryDark;
border-radius: 5px;
text-shadow: 1px 1px 0px @primaryLightest;
outline: 0;
}
.message .messageNotices
{
@property "messageNotice";
font-size: 11px;
background: @secondaryLighter url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 5px;
margin: 10px 0;
border: 1px solid @secondaryLight;
border-radius: 5px;
@property "/messageNotice";
}
.message .likesSummary
{
@property "messageLikesSummary";
padding: 5px;
margin-top: 10px;
border: 1px solid @primaryLighterStill;
border-radius: 5px;
@property "/messageLikesSummary";
}
.message .messageText > *:first-child
{
margin-top: 0;
}

/* inline moderation changes */

.InlineModChecked .messageUserBlock,
.InlineModChecked .messageInfo,
.InlineModChecked .messageNotices,
.InlineModChecked .bbCodeBlock .type,
.InlineModChecked .bbCodeBlock blockquote,
.placeholder.InlineModChecked .placeholderContent
{
@property "inlineModChecked";
background: @inlineMod url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
@property "/inlineModChecked";
}

.InlineModChecked .messageUserBlock div.avatarHolder
{
background: transparent;
}

.InlineModChecked .messageUserBlock .finisher .inner
{
border-left-color: rgb(255,255,200);
}

/* message list */

.messageList .newMessagesNotice
{
margin: 10px auto;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid @primaryLighter;
background: @primaryLighterStill url(@imagePath/xenforo/gradients/category-23px-light.png) repeat-x top;
font-size: 11px;
}

/* deleted / ignored message placeholder */

.messageList .message.placeholder
{
border: none;
margin: 10px 0;
padding: 0;
}

.messageList .placeholder .placeholderContent
{
overflow: hidden; zoom: 1;
border: 1px solid @primaryLighterStill;
padding: 5px;
border-radius: 5px;
color: @primaryLightish;
font-size: 11px;
}

.messageList .placeholder a.avatar
{
float: left;
margin-right: 5px;
display: block;
}
.messageList .placeholder a.avatar img
{
width: 24px;
height: 24px;
display: block;
}
.messageList .placeholder .privateControls
{
margin-top: 2px;
}

/* messages remaining link */

/*.postsRemaining
{
margin: 5px 0 10px;
text-align: right;
}*/

.postsRemaining a,
a.postsRemaining
{
font-size: 11px;
color: @mutedTextColor;
}

Теперь после замены кода, вы получите кнопочки вот такого вида:

Veter, ну я все никак не могла их красивыми сделать), а тут наткнулась на мануал и решила поделиться. Уверена это пригодится

gavrila7: Дополнительная информация

По умолчанию
после вставки кода форум кривой немного стал

я ставила этот код не один раз...и на разные версии, все ровненько стоит

Nyhsa: я ставила этот код не один раз...и на разные версии, все ровненько стоит

а как сменить кнопочки "Редактировать,Удалить,IP,Пожаловаться, Добавить репутацию" ? Буду очень благодарен lush:lush: