1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

Транформация "Мне нравится", "#", "Ответить" в кнопки (без картинок)

Тема в разделе "Модификации шаблонов", создана пользователем VictorZ, 5 апр 2011.

Загрузка
  1. VictorZ

    VictorZ Активный пользователь

    Регистрация:
    10.03.11
    Сообщения:
    39
    Симпатии:
    40
    Переделка данных фраз под вид кнопок
    Оригинальная статья:
    Код:
    http://xenforo.com/community/threads/beta-2-transform-message-links-into-buttons-no-images.7309/
    Открываем Шаблоны > message.css
    P.S. На всякий случай сохраните оригинальный текст в новом шаблоне.

    Стираем все и вставляем следующее:
    Код:
    .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;
        }
    Получается вот такое:
    xfbuttom.jpg
     
    lik20041986, Logan22, SeaSoul и 5 другим нравится это.
  2. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5.736
    Симпатии:
    5.263
    Версия XF:
    1.5.10
    Только лучше все же перезаписывать CSS через шаблон EXTRA.css. Меньше гимора при обновлении.
     
    Vladislav97, sandis и CyberAP нравится это.
  3. SeM13

    SeM13 Создатель системы

    Регистрация:
    05.01.11
    Сообщения:
    747
    Симпатии:
    252
    Версия XF:
    1.1.3
    Не знаю как вам, но мне показалось это очень стремным О_о
     
    AnGel, dolmatov и citizen нравится это.
  4. AOTN

    AOTN Friend

    Регистрация:
    30.09.10
    Сообщения:
    449
    Симпатии:
    271
    Версия XF:
    1.2.4
    А мне понравилось. :)
     
  5. vadimon

    vadimon Местный

    Регистрация:
    30.07.11
    Сообщения:
    122
    Симпатии:
    10
    Версия XF:
    1.5.0
    Зачем все менять? Приведи лучше кусок кода из файла, который переделывает эти фразы.
     
  6. TAIFUN

    TAIFUN Человек

    Регистрация:
    27.09.10
    Сообщения:
    2.120
    Симпатии:
    1.558
    Версия XF:
    1.5.9
    Много мелочных правок.
     
  7. Almrfor

    Almrfor Пользователь

    Регистрация:
    07.12.11
    Сообщения:
    13
    Симпатии:
    0
    Версия XF:
    1.1.0 Final
    а как выделить ТОЛЬКО "мне нравится" ?
     
  8. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5.736
    Симпатии:
    5.263
    Версия XF:
    1.5.10
    Попробуйте добавить в EXTRA.css:
    Код:
    .publicControls .LikeLink .LikeLabel {
        background: #eee;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 3px 5px;
    }
    Цвета только на свои замените.
     
    fly_indiz, Betelgelze, Mefodian и 2 другим нравится это.
  9. Almrfor

    Almrfor Пользователь

    Регистрация:
    07.12.11
    Сообщения:
    13
    Симпатии:
    0
    Версия XF:
    1.1.0 Final
    спасибо большое, работает
     
  10. spy

    spy ИнквизитоР

    Регистрация:
    04.03.11
    Сообщения:
    373
    Симпатии:
    188
    у меня только так обвелись: :cautious:
    Код:
    .message .publicControls .item
    {
        background: #eee;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 3px 5px;
    }
    
     
    fly_indiz нравится это.
  11. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5.736
    Симпатии:
    5.263
    Версия XF:
    1.5.10
    Так они все обводятся, а человеку нужна была только одна кнопка ;)
     
    sandis нравится это.
  12. spy

    spy ИнквизитоР

    Регистрация:
    04.03.11
    Сообщения:
    373
    Симпатии:
    188
    ааа, вот оно че. блин слово ТОЛьКО незаметил, сидел голову ломал, как так у других работает а у мну нет:D
     
  13. leaderru

    leaderru Пользователь

    Регистрация:
    05.02.12
    Сообщения:
    48
    Симпатии:
    4
    Версия XF:
    1.1.4
    У меня работает! Спасибо
     
  14. Premier

    Premier Пользователь

    Регистрация:
    30.03.12
    Сообщения:
    1
    Симпатии:
    0
    Версия XF:
    1.1.2
    При добавлении этого шаблона текст сообщений сдвигается влево.
     
  15. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5.736
    Симпатии:
    5.263
    Версия XF:
    1.5.10
    Вероятно у вас стиль нестандартный и в нем что-то конфликтует между собой. Без ссылки на тему с сообщениями можно только гадать.
     
  16. niki-timofe

    niki-timofe Пользователь

    Регистрация:
    24.06.12
    Сообщения:
    8
    Симпатии:
    3
    Версия XF:
    1.1.2
    А цвет background'а лучше сделать такой:
    Код:
    background: @primaryLighterStill;
    
     
    Logan22, Mefodian и SeaSoul нравится это.
  17. SeaSoul

    SeaSoul Местный

    Регистрация:
    24.11.11
    Сообщения:
    132
    Симпатии:
    9
    Версия XF:
    1.1.4
    приятный голубой цвет, спасибо)
     
  18. vizir

    vizir Активный пользователь

    Регистрация:
    17.11.12
    Сообщения:
    1
    Симпатии:
    0
    Версия XF:
    1.1.3
    как мне теперь убрать фон самого сообщения(от какого либо пользователя), он стал серым допотопным каким-то(
     
  19. becdelbnik

    becdelbnik Местный

    Регистрация:
    21.07.12
    Сообщения:
    133
    Симпатии:
    19
    Версия XF:
    1.3.0
    Всем здрасти, ребят, выложите стандартный код(который был).
     
  20. Александр

    Александр Местный

    Регистрация:
    06.11.10
    Сообщения:
    479
    Симпатии:
    188
    Версия XF:
    1.4.3
    message.css
    Код:
    <xen:edithint template="message_user_info.css" />
    
    .messageList
    {
    	@property "messageList";
    
    	@property "/messageList";
    }
    
    .messageList .message
    {
    	@property "message";
    	padding-top: 10px;
    	padding-bottom: 30px;
    	border-top: 1px solid @primaryLighterStill;
    	@property "/message";
    }
    
    {xen:helper clearfix, '.messageList .message'}
    
    /*** Message block ***/
    
    .message .messageInfo
    {
    	@property "messageInfo";
    	padding: 0;
    	margin-left: 140px;
    	border-bottom: 1px none black;
    	@property "/messageInfo";
    	zoom: 1;
    }
    
    	.message .newIndicator
    	{
    		@property "messageNewIndicator";
    		font-size: 11px;
    		color: @primaryMedium;
    		background: @primaryLight url('@imagePath/xenforo/gradients/form-button-white-25px.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;
    		overflow: hidden;
    		*zoom: 1;
    		@property "/messageContent";
    	}
    	
    	.message .editDate
    	{
    		text-align: right;
    		margin-top: 5px;
    		font-size: 11px;
    		color: @mutedTextColor;
    	}
    
    	.message .signature
    	{
    		@property "messageSignature";
    		font-size: 9pt;
    		color: @mutedTextColor;
    		padding: 5px 0 0;
    		margin-top: 5px;
    		border-top: 1px dashed @primaryLighter;
    		@property "/messageSignature";
    	}
    
    	.message .messageMeta
    	{
    		@property "messageMeta";
    		font-size: 11px;
    		padding: 15px 5px 5px;
    		margin: -5px;
    		overflow: hidden;
    		zoom: 1;
    		@property "/messageMeta";
    	}
    
    		.message .privateControls
    		{
    			@property "messagePrivateControls";
    			float: left;
    			@property "/messagePrivateControls";
    		}
    
    		.message .publicControls
    		{
    			@property "messagePublicControls";
    			float: right;
    			@property "/messagePublicControls";
    		}
    		
    			.message .privateControls .item
    			{
    				margin-right: 10px;
    				float: left;
    			}
    
    				.message .privateControls .item:last-child
    				{
    					margin-right: 0;
    				}
    
    			.message .publicControls .item
    			{
    				margin-left: 10px;
    				float: left;
    			}
    	
    				.message .messageMeta .control
    				{
    					@property "messageMetaControl";
    
    					@property "/messageMetaControl";
    				}
    				
    					.message .messageMeta .control:focus
    					{
    						@property "messageMetaControlFocus";
    
    						@property "/messageMetaControlFocus";
    					}
    				
    					.message .messageMeta .control:hover
    					{
    						@property "messageMetaControlHover";
    
    						@property "/messageMetaControlHover";
    					}
    				
    					.message .messageMeta .control:active
    					{
    						@property "messageMetaControlActive";
    
    						@property "/messageMetaControlActive";
    					}
    	
    	<xen:include template="message_notices.css" />
    	
    	.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
    {
    	@property "inlineModChecked";
    	background: @inlineMod url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    	@property "/inlineModChecked";
    }
    
    .InlineModChecked .messageUserBlock div.avatarHolder,
    .InlineModChecked .messageUserBlock .extraUserInfo
    {
    	background: transparent;
    }
    
    .InlineModChecked .messageUserBlock .arrow span
    {
    	border-left-color: @inlineMod;
    }
    
    /* 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
    {
    }
    
    .messageList .placeholder .placeholderContent
    {	
    	overflow: hidden; zoom: 1;
    	color: @primaryLightish;
    	font-size: 11px;
    }
    
    	.messageList .placeholder a.avatar
    	{
    		float: left;
    		display: block;
    	}
    	
    		.messageList .placeholder a.avatar img
    		{
    			display: block;
    			width: 32px;
    			height: 32px;
    		}
    		
    	.messageList .placeholder .privateControls
    	{
    		margin-top: -5px;
    	}
    
    /* messages remaining link */
    
    .postsRemaining a,
    a.postsRemaining
    {
    	font-size: 11px;
    	color: @mutedTextColor;
    }
    
    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth)
    {
    	.Responsive .message .newIndicator
    	{
    		margin-right: 0;
    		border-top-right-radius: @messageNewIndicator.border-top-left-radius;
    	}
    	
    		.Responsive .message .newIndicator span
    		{
    			display: none;
    		}
    }
    
    @media (max-width:@maxResponsiveNarrowWidth)
    {
    	.Responsive .message .messageInfo
    	{
    		margin-left: 0;
    		padding: 0 10px;
    	}
    
    	.Responsive .message .messageContent
    	{
    		min-height: 0;
    	}	
    
    	.Responsive .message .newIndicator
    	{
    		margin-right: -5px;
    		margin-top: -16px;
    	}
    
    	.Responsive .message .postNumber,
    	.Responsive .message .authorEnd
    	{
    		display: none;
    	}
    	
    	.Responsive .message .signature
    	{
    		display: none;
    	}
    	
    	.Responsive .messageList .placeholder a.avatar
    	{
    		margin-right: 10px;
    	}
    }
    </xen:if>
    
     
    becdelbnik нравится это.

Поделиться этой страницей