Замена ссылок на кликабельные кнопки работы с сообщением

HellFire

Проверенные
Сообщения
1,424
Реакции
855
Баллы
8,275
Все замечали, что ссылки для работы с сообщениями не очень хорошо выглядят и это создаёт небольшой эстетический дискомфорт т.е. на данный момент выглядит так
Безымянный.png
а будет так
Безымянный.png

Приступим, пример будет показан на кнопке "Мне нравится":
1. Админка
2. Внешний вид
3. Поиск по фразам-> выбираем язык
4. Ищем по заголовку "Like" или "Мне нравится" в поиске по фразам
5. Вставляем вместо "Мне нравится" такой код
HTML:
<input type="submit" class="button" value="Спасибо" style="color:#7CFC00; font-weight: bold;" >
value="Спасибо" это название на кнопке
style="color:#7CFC00; font-weight: bold;" - цвет, жирный шрифт

И получается красивая кнопка как на картинке выше, зелёная кнопочка красиво.

Способ для извращенцев:
Можно вообще вместо того, что я написал, засобачить картинку
HTML:
<img src="ссылка на картинку" alt="Описание, для поисковиков и пользователей" height="Высота в пикселях" width="Ширина в пикселях">


без какого либо CSS и прочего. и будет вместо надписи картинка, но я такой способ не уважаю т.к. картинки имеют гораздо больший вес, чем строка HTML разметки =)
 
Последнее редактирование:
Методика полезная. Но вам не кажется, что фразы - это не то место, куда надо вставлять код?
Притом class="button" означает, что будет применён стиль кнопки, который у каждого стиля свой.
Стиль, который прописывается в данном коде применяется только для текста.
Я придерживаюсь того мнения, что если уж делать стиль для кнопок, то надо создавать стиль в css и применять его к коду кнопок как например здесь http://xenforo.info/resources/Изменяем-внешний-вид-кнопки-Ответить.779/
 
Методика полезная. Но вам не кажется, что фразы - это не то место, куда надо вставлять код?
Притом class="button" означает, что будет применён стиль кнопки, который у каждого стиля свой.
Стиль, который прописывается в данном коде применяется только для текста.
Я придерживаюсь того мнения, что если уж делать стиль для кнопок, то надо создавать стиль в css и применять его к коду кнопок как например здесь http://xenforo.info/resources/Изменяем-внешний-вид-кнопки-Ответить.779/
но таким методом вы не прийдёте к этому результату.

И да, я знаю, что я задаю стиль кнопки по стандарту и только цвет и шрифт меняется внутри.

Но не кажется ли Вам, что всё-же иметь единообразие, чем безобразие?

Да, у меня в стиле кнопка ответить как кнопки выше, и они становятся именно такими как в вашем стиле прописаны.

Т.е. они не выходят из рамок стиля и народ увидит такие кнопки и подумает, что именно так и должно быть.
И если вы замените стандартный стиль кнопок на другой, кнопки при помощи моего метода изменятся за ними, т.е. не прийдётся ещё кучу кода переписывать и искать "где же там всё таки надо что-то найти".



Есть ещё круче способ, можно вообще вместо того, что я написал, засобачить картинку без какого либо CSS и прочего. и будет вместо надписи картинка, но я такой способ не уважаю т.к. картинки имеют гораздо больший вес, чем строка HTML разметки =)





Первый пост обновлён
 
Последнее редактирование:
но таким методом вы не прийдёте к этому результату.
с хренов ли? не надо людей вводить в заблуждение. Стиль button сделан на css и вы данным классом просто дублируете стиль на другие кнопки. При помощи css можно задать любой вид кнопок.
Ваша методика работает, я ничего не говорю, что она не работает. Но повторюсь, что фразы - это вроде не то место, куда следует пихать вместо языка код. При обновлении языка всё придётся делать заново, а extra.css для того и сделана, чтобы при обновлении ничего не улетело.

alt="Описание, для поисковиков и пользователей"
эти кнопки вообще то не видны гостям, а значит и ПС не будет их индексировать. Поэтому здесь alt у картинок только для пользователей прописывается.
 
с хренов ли? не надо людей вводить в заблуждение. Стиль button сделан на css и вы данным классом просто дублируете стиль на другие кнопки. При помощи css можно задать любой вид кнопок.
Ваша методика работает, я ничего не говорю, что она не работает. Но повторюсь, что фразы - это вроде не то место, куда следует пихать вместо языка код. При обновлении языка всё придётся делать заново, а extra.css для того и сделана, чтобы при обновлении ничего не улетело.


эти кнопки вообще то не видны гостям, а значит и ПС не будет их индексировать. Поэтому здесь alt у картинок только для пользователей прописывается.

Я не правильно выразился про "такой результат", мысль больше шла к тому-что кода гораздо меньше

HTML:
.message .publicControls .item {
   
        -moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
        -webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
        box-shadow: 0px 1px 0px 0px #f0f7fa;
   
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
        background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
        background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
        background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
        background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
        background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);
   
        background-color:#33bdef;
   
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
   
        border:1px solid #057fd0;
   
        display:inline-block;
        color:#ffffff;
        font-family:arial;
        font-size:10px;
        font-weight:bold;
        padding:4px 15px;
        text-decoration:none;
   
        text-shadow:0px -1px 0px #5b6178;
   
    }
    .message .publicControls .item:hover {
   
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
        background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
        background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
        background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
        background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
        background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);
   
        background-color:#019ad2;
    }
    .message .publicControls .item:active {
        position:relative;
        top:1px;
    }

То, что я предложил более просто и все замены кнопок в сообщениях наверно и половины не будут занимать количества символов.


На счёт поисковых систем, да я погорячился, с этим спорить не буду.





P.S. зачем стремиться к громоздкости кода? Ну, да я во фразы запихнул код, но сами посудите, даже если вы обновите язык вы за 1-2 минуты восстановите всё, или ещё лучше сделать самому себе xml с фразами, но это уже другая история.
 
Разницы вроде не какой нету , куда пихать, сами разработчики бывают суют коды переноса и выделения текста во фразы.
 
Все замечали, что ссылки для работы с сообщениями не очень хорошо выглядят и это создаёт небольшой эстетический дискомфорт т.е. на данный момент выглядит так
Посмотреть вложение 5210
а будет так
Посмотреть вложение 5211

Приступим, пример будет показан на кнопке "Мне нравится":
1. Админка
2. Внешний вид
3. Поиск по фразам-> выбираем язык
4. Ищем по заголовку "Like" или "Мне нравится" в поиске по фразам
5. Вставляем вместо "Мне нравится" такой код
HTML:
<input type="submit" class="button" value="Спасибо" style="color:#7CFC00; font-weight: bold;" >
value="Спасибо" это название на кнопке
style="color:#7CFC00; font-weight: bold;" - цвет, жирный шрифт

И получается красивая кнопка как на картинке выше, зелёная кнопочка красиво.

Способ для извращенцев:
Можно вообще вместо того, что я написал, засобачить картинку
HTML:
<img src="ссылка на картинку" alt="Описание, для поисковиков и пользователей" height="Высота в пикселях" width="Ширина в пикселях">[/B]
[B]


без какого либо CSS и прочего. и будет вместо надписи картинка, но я такой способ не уважаю т.к. картинки имеют гораздо больший вес, чем строка HTML разметки :-)
сделал себе для пробы,все получилось отлично кроме одного........ кнопки появились везде,где нужно и где они совсем не нужны.......как сделать чтоб кнопки были только под сообщениями в темах?
 
сделал себе для пробы,все получилось отлично кроме одного........ кнопки появились везде,где нужно и где они совсем не нужны.......как сделать чтоб кнопки были только под сообщениями в темах?
2 пути:
1. создать отдельные фразы для этих кнопок и их в шаблоне подменить
2. не делать так=))


Я так понимаю вылезли кнопки редактировать и ответить?)
 
HellFire, нет......например в менюшке чата, при клике на аву пользователя (у админов и модеров) ...... там где быстрое управление
 
HellFire, нет......например в менюшке чата, при клике на аву пользователя (у админов и модеров) ...... там где быстрое управление
а там кнопка редактировать =)))


впринципе 1 вариант тоже хорош, сейчас посмотрю как лучше сделать и напишу гайд.[DOUBLEPOST=1390132715,1390131031][/DOUBLEPOST]Создаём дополнительную фразу, чтоб ваши кнопки были красивыми.

на примере кнопки редактировать в карте пользователя

создаём фразу
upload_2014-1-19_13-52-30.png
заменяем в шаблоне это
upload_2014-1-19_13-55-59.png
на свою фразу
upload_2014-1-19_13-56-54.png




Топорный и не оптимизированный метод, гайд сделал на скорую руку.

Лучше фразу делать не там где лишнее получилось, а на оборот, там где хотите изменить ссылку на кнопку, тогда незадуманные методы будут просто не задеты.
 
Я хочу вообще удалить текст с кнопки. Но, если я полностью удаляю текст из фразы, то остается свободное место. Как этого избежать?
 

Вложения

  • Скриншот 2014-01-20 17.13.21.png
    Скриншот 2014-01-20 17.13.21.png
    3.8 KB · Просмотры: 53
Так это уже в шаблоне EXTRA.css стиля нужно смотреть и данная тему тут ни при чём...
 
Я хочу вообще удалить текст с кнопки. Но, если я полностью удаляю текст из фразы, то остается свободное место. Как этого избежать?
надо из шаблона вырезатьполностью идентификатор(или как его) фразы, но чую вам потом может выйти боком.
 
Че-то ярко-зеленое "спасибо" не очень смотрится на темно-синей кнопке.
 
вот еще одно решение.. добавляем в EXTRA.css
Код:
    .message .messageMeta .control.edit {
                        background-image: url('путь_к_картинке');
                        background-repeat: no-repeat;
                        background-position: 8px center;
                        padding-left: 30px;
                    }
                   
                    .message .messageMeta .control.delete {
                        background-image: url('путь_к_картинке');
                        background-repeat: no-repeat;
                        background-position: 8px center;
                        padding-left: 30px;
                    }
                   
                    .message .messageMeta .control.ip {
                        background-image: url('путь_к_картинке');
                        background-repeat: no-repeat;
                        background-position: 8px center;
                        padding-left: 30px;
                    }
                   
                    .message .messageMeta .control.warn {
                        background-image: url('путь_к_картинке');
                        background-repeat: no-repeat;
                        background-position: 8px center;
                        padding-left: 30px;
                    }
                   
                    .message .messageMeta .control.report {
                        background-image: url('путь_к_картинке');
                        background-repeat: no-repeat;
                        background-position: 8px center;
                        padding-left: 40px;
                    }
                   
                    .message .messageMeta .control.postNumber {
                        background-image: url('путь_к_картинке');
                        background-repeat: no-repeat;
                        background-position: 8px center;
                        padding-left: 46px;
                    }
                   
                    .message .messageMeta .control.like {
                        background-image: url('путь_к_картинке');
                        background-repeat: no-repeat;
                        background-position: 8px center;
                        padding-left: 30px;
                    }
                   
                    .message .messageMeta .control.reply {
                        background-image: url('путь_к_картинке');
                        background-repeat: no-repeat;
                        background-position: 8px center;
                        padding-left: 30px;
                    }
только не знаю как добавить картинки к:
№ поста
Ник в ответ
Репутация
Лучший ответ
История
Время создания поста
 
вот еще одно решение.. добавляем в EXTRA.css

только не знаю как добавить картинки к:
№ поста
Ник в ответ
Репутация
Лучший ответ
История
Время создания поста
Как вариант через фразы
 
а как добавить слово "поделиться " сюда Безымянный.png в номер поста?
 
Шаблон post:
Код:
<a href="{xen:link threads/post-permalink, $thread, 'post={$post}'}" title="{xen:phrase permalink}" class="item muted postNumber hashPermalink OverlayTrigger" data-href="{xen:link posts/permalink, $post}">#{xen:calc '{$post.position} + 1'}</a>
 
HellFire, Спасибо, мне как раз нужно было выделить одну кликабельную ссылку среди других, Ваш вариант идеально подошёл :Good1:
 
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу