Меняем вид кнопок Мне нравится и Ответить на 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: