Современный облачный хостинг провайдер | Aéza
Контакты ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430

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

HellFire

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 разметки =)





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

HellFire написал(а):
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 с фразами, но это уже другая история.
 
Разницы вроде не какой нету , куда пихать, сами разработчики бывают суют коды переноса и выделения текста во фразы.
 
HellFire написал(а):
Все замечали, что ссылки для работы с сообщениями не очень хорошо выглядят и это создаёт небольшой эстетический дискомфорт т.е. на данный момент выглядит так
Посмотреть вложение 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 разметки :-)
Нажмите для раскрытия...
сделал себе для пробы,все получилось отлично кроме одного........ кнопки появились везде,где нужно и где они совсем не нужны.......как сделать чтоб кнопки были только под сообщениями в темах?
 
brainless написал(а):
сделал себе для пробы,все получилось отлично кроме одного........ кнопки появились везде,где нужно и где они совсем не нужны.......как сделать чтоб кнопки были только под сообщениями в темах?
Нажмите для раскрытия...
2 пути:
1. создать отдельные фразы для этих кнопок и их в шаблоне подменить
2. не делать так=))


Я так понимаю вылезли кнопки редактировать и ответить?)
 
HellFire, нет......например в менюшке чата, при клике на аву пользователя (у админов и модеров) ...... там где быстрое управление
 
brainless написал(а):
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 · Просмотры: 52
Так это уже в шаблоне EXTRA.css стиля нужно смотреть и данная тему тут ни при чём...
 
mammuthus написал(а):
Я хочу вообще удалить текст с кнопки. Но, если я полностью удаляю текст из фразы, то остается свободное место. Как этого избежать?
Нажмите для раскрытия...
надо из шаблона вырезатьполностью идентификатор(или как его) фразы, но чую вам потом может выйти боком.
 
Че-то ярко-зеленое "спасибо" не очень смотрится на темно-синей кнопке.
 
вот еще одно решение.. добавляем в 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;
                    }
только не знаю как добавить картинки к:
№ поста
Ник в ответ
Репутация
Лучший ответ
История
Время создания поста
 
monah написал(а):
вот еще одно решение.. добавляем в 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
Контакты
ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430 г. Краснодар, ул. Маяковского 160, офис 2.4

Похожие темы

Sidd
Магазин своих и чужих товаров на форуме Digiseller
Ответы
7
Просмотры
3K
Boogeyman
Boogeyman
Назад
Сверху Снизу