Next

Регистрация
29.09.14
Сообщения
8,516
Симпатии
803
#1

Главная - Настройки - Настройки пользователя
и настроить отображение баннеров:

1.png
Можно сделать по другому, если желаете, что бы отображались другие баннеры.

Имена пользователей

Теперь перейдем: «Пользователи» => «Группы пользователей» => «Список групп» выбираем нужную группу и приступаем к стилизации.
Для этого надо задать стиль CSS в пункте «CSS-стиль для имени пользователя». Будем использовать стили для текста:

color - цвет ника. Можно использовать цветовые значения: RGB формат - rgb(r, g, b); шестнадцатиричная запись - #RRGGBB; RGBa формат - rgba(r, g, b, a); Базовые названия цветов: aqua, black, blue, fuchsia, gray ......
font-family - семейство шрифта для ника (Arial, Georgia, Verdana ....) Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки. Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере.
font-size - размер шрифта ника. Разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% (или не указано) берется размер шрифта родительского элемента.
font-style - определяет начертание шрифта ника — обычное, курсивное или наклонное (normal, italic, oblique).
font-weight - устанавливает насыщенность (жирность) шрифта (bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900).
Так же можно использовать тень текста для ника:
text-shadow - указываются четыре параметра сдвиг по x, сдвиг по y, радиус размытия и цвет (1px 1px 2px black). Допускается указывать несколько параметров тени, разделяя их между собой запятой (1px 1px 2px black, 0 0 1em red)

Пример:
Указываем CSS стиль для ника:
Код:
color: red;
font-weight: bold;
font-size: 12px;
Выравнивает ник по центру
Настройки стиля>>Элементы сообщений>>Имя пользователя
В блоке "Прочее" добавить
Код:
text-align: center;
Что у нас получилось
Screenshot_1.png


Анимированный фон для имени(ника) пользователей

в "CSS-стиль для имени пользователя" добавить фон
Код:
background: url(папка с картинкой/glitter_001.gif) no-repeat
3.gif

В архиве ниже 14 разных фонов.


Звания пользователей

"Текст баннера пользователя" пишем любой, не видно будет, «Другой, используя своё имя CSS-класса» - имя класса, например admin, в EXTRA.css задаем стиль:

Код:
.admin {
  background: url(папка картинки/admin.gif) no-repeat;
  display: block;
  width: 120px;
  height: 30px;
  color: rgba(0, 0, 0, 0);
  margin-left: -5px;
}
Смотрим что получилось

2.png


"Текст баннера пользователя" пишем название группы «Другой, используя своё имя CSS-класса» - имя класса, например admin-ribbon, в EXTRA.css задаем стиль:


Код:
/* Ранги пользователей */
.admin-ribbon, .moder-ribbon, .member-ribbon {
    color: #FCE2E3;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 38px;
    line-height: 38px;
    margin-left: -12px;
    margin-right: -12px;
    text-align: center;
    text-shadow: 0 0 0 transparent, 0 0 2px black;
    width: 134px;
}

.admin-ribbon {
    background: url("styles/default/xenforo/icons/admin_ribbon.png") no-repeat scroll 0 0 transparent;
}

.moder-ribbon {
    background: url("styles/default/xenforo/icons/moder_ribbon.png") no-repeat scroll 0 0 transparent;
}

.member-ribbon {
    background: url("styles/default/xenforo/icons/member_ribbon.png") no-repeat scroll 0 0 transparent;
}
/* END Ранги пользователей */
Пример

Screenshot_5.png Screenshot_4.png

Screenshot_6.png

в архиве ниже найдете 3 ленточки для баннера.

Свой цвет для баннеров:
Переходим на страницу списка групп: /admin.php?user-groups/ - выбираем нужную Вам группу - В поле "Текст баннера пользователя:" прописываем нужно название - В настройке "Оформление баннера пользователя:" выбираем опцию "Другой, используя своё имя CSS-класса:" и в этом поле указываем: userBanner my-style - Сохраняем всё это дело и в шаблон EXTRA.css добавляем такой код:
Код:
.userBanner.my-style
{
color: white;
background-color: green;
}
или такой
Код:
.userBanner.my-style
{
color: white;
background-color: green;
border-color: green;
}
4.png
6.png



Пример баннеров с применением стилей CSS.
Сделаем баннеры с использованием только CSS. Как уже говорилось для этого используем "Другой, используя своё имя CSS-класса", задаем для каждой группы свой класс, а в EXTRA.css, укажем стили для этих классов:

Код:
.admin_style, .lamer_style, .moder_style, .user_style {
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    display: block;
    font-size: 11px;
    margin: 4px 0 5px;
    padding: 2px 6px;
    position: relative;
    text-align: center;
    color: white;
    text-shadow: 0 0 0 transparent, 1px 1px 1px black;
    width: 98px;
}
.admin_style {
    background-color: rgba(255, 0, 0, 0.5);
    border: 1px solid rgba(255, 0, 0, 0.7);
}
.moder_style {
    background-color: rgba(0, 155, 4, 0.5);
    border: 1px solid rgba(0, 155, 4, 0.7);
}
.user_style {
    background-color: rgba(0, 51, 155, 0.5);
    border: 1px solid rgba(0, 51, 155, 0.7);
}
.lamer_style {
    background-color: rgba(0, 158, 217, 0.5);
    border: 1px solid rgba(0, 158, 217, 0.7);
}
Получаем

001.png 002.png 003.png 004.png


Добавляем эффект при наведении (hover)

.admin_style:hover, .lamer_style:hover, .moder_style:hover, .user_style:hover {
background-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6));
color: #ccc;
transition-duration: 0.5s;
cursor: pointer;
}

7.gif


Добавляем иконки Font Awesome к тексту баннера.


Иконки можно посмотреть и выбрать

Пожалуйста, войдите или зарегистрируйтесь для просмотра текста.

, и добавить в "Текст баннера пользователя"
Код:
<i class="fa fa-graduation-cap"></i> Администратор
8.png 9.png

Всплывающая подсказка для баннера (title)
Сделаем всплывающую подсказку для баннера группы. Но надо учитывать, там ограничение на ввод символов.
Текст баннера пользователя:

Код:
<span class="Tooltip" title="Самый крутой" >Администратор</span>
10.gif
 

Вложения

alladdin

Регистрация
07.12.15
Сообщения
19
Симпатии
1
#2
Очень полезно. Огромное спасибо. А есть какае-то дополнение или плагин, чтобы не прописывать вручную стили и классы?
 

Next

Регистрация
29.09.14
Сообщения
8,516
Симпатии
803
#3
Есть, но функционал очень скудный. Вручную сделать просто, можно как угодно практически.
 

ThePhoenix

Регистрация
08.04.16
Сообщения
27
Симпатии
1
#4
баги баги баги!
("Текст баннера пользователя" пишем любой, не видно будет ) - ага,кнч,пишет ещё как,только в другом месте:

Пожалуйста, войдите или зарегистрируйтесь для просмотра текста.


Хотя и в том тоже видно:

Пожалуйста, войдите или зарегистрируйтесь для просмотра текста.

 
Последнее редактирование:

ROOT

Регистрация
18.02.16
Сообщения
7
Симпатии
2
#5
Верни шаблон в исходное состояние, там у тебя черти че :)

Последнего обновления нет.
Можно немного усовершенствовать код для удобства добавления последующих групп:
Код:
/* Баннеры групп */

/* Общий стиль для всех баннеров */

[class*="style_"] {
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    display: block;
    font-size: 11px;
    margin: 4px 0 5px;
    padding: 2px 6px 3px;
    position: relative;
    text-align: center;
    color: white;
    text-shadow: 0 0 0 transparent, 1px 1px 1px black;
    width: 98px;
}

/* Баннер администратора */

.style_admin {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.3);
}

/* Баннер модератора */

.style_moder {
    background-color: rgba(0, 155, 4, 0.5);
    border: 1px solid rgba(0, 155, 4, 0.7);
}

/* Баннер пользователя */

.style_lamer {
    background-color: rgba(22, 171, 227, 0.6);
    border: 1px solid rgba(22, 171, 227, 0.7);
}

/* Баннер проверенного */

.style_user {
    background-color: rgba(0, 51, 155, 0.5);
    border: 1px solid rgba(0, 51, 155, 0.7);
}

/* Баннер местного */

.style_local {
    background-color: rgba(0, 62, 170, 0.6);
    border: 1px solid rgba(0, 62, 170, 0.7);
}

/* Баннеры групп */
 
Последнее редактирование модератором:

ThePhoenix

Регистрация
08.04.16
Сообщения
27
Симпатии
1
#6
Верни шаблон в исходное состояние, там у тебя черти че :)
какой шаблон? EXTRA.css? Так он у меня пустой был,лол)
Код выглядит так:
Код:
/* Ранги пользователей */
.admin, .moderator, .team_adm, .good_man {
    color: #FCE2E3;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 38px;
    line-height: 38px;
    margin-left: -12px;
    margin-right: -12px;
    text-align: center;
    text-shadow: 0 0 0 transparent, 0 0 2px black;
    width: 134px;
}

.admin {
    background: url("https://hth-cs.ru/styles/mega/xenforo/admin.png") no-repeat scroll 0 0 transparent;
}

.moderator {
    background: url("https://hth-cs.ru/styles/mega/xenforo/moderator.png") no-repeat scroll 0 0 transparent;
}

.team_adm {
    background: url("https://hth-cs.ru/styles/mega/xenforo/team_adm.png") no-repeat scroll 0 0 transparent;
}

.good_man {
    background: url("https://hth-cs.ru/styles/mega/xenforo/active.png") no-repeat scroll 0 0 transparent;
}
/* END Ранги пользователей */
Так как исправить,чтобы текста не было видно?
 

ROOT

Регистрация
18.02.16
Сообщения
7
Симпатии
2
#7
А здесь нет возможности залить изображения сюда? Так смотреть каждый раз с переходом черти куда очень не удобно.

А не писать Текст баннера пользователя, ни чего не пробовал?
 
Последнее редактирование модератором: