Существует несколько способов сделать пользователя-сотрудника сразу узнаваемым для других участников.
Показать щит модератора
Любой пользователь-сотрудник, являющийся модератором или администратором и модератором, будет иметь щит модератора рядом с именем пользователя.
Совет: щит не появится, если пользователь-сотрудник имеет роль администратора, но не модератора.
CSS для изменения цвета щита
Изменить цвет для всех пользователей-сотрудников
/*Изменить цвет для всех пользователей-сотрудников*/
span.username.staff .d-icon.d-icon-shield-halved {
color: #00A9DB;
}
Чтобы изменить цвет щита во всех местах его отображения, а не только в теме:
span.username.staff .d-icon.d-icon-shield-halved,
.user-card .first-row .names .d-icon.d-icon-shield-halved,
.user-profile-names .d-icon.d-icon-shield-halved {
color: #00A9DB;
}
Изменить цвет, различая пользователей АДМИН и МОД
/*Изменить цвет, различая пользователей АДМИН и МОД*/
span.username {
&.moderator .d-icon.d-icon-shield-halved {
color: green;
}
&.admin .d-icon.d-icon-shield-halved {
color: red;
}
}
CSS для скрытия щита
Скрыть щит только в сообщениях
.names .svg-icon-title {
display: none;
}
Скрыть щит в сообщениях и на карточке пользователя
.names .svg-icon-title,
.user-card .names .d-icon.d-icon-shield-halved {
display: none;
}
Добавить заголовки
Любой пользователь-сотрудник может перейти по адресу /admin/users/list/staff и создать заголовок для своей учетной записи. Заголовок будет отображаться рядом с именем пользователя-сотрудника:
Пример:
CSS для настройки существующего заголовка
Настроить заголовок для сотрудников
.names .staff ~ .user-title {
background: #00A9DB;
color: white;
padding: 3px 5px;
}
Настроить заголовок, различая администраторов и модераторов
.names {
.moderator ~ .user-title {
background: green;
color: white;
padding: 3px 5px;
}
.admin ~ .user-title {
background: red;
color: white;
padding: 3px 5px;
}
}
Настроить заголовок для пользователей, не являющихся админами или модами, но состоящих в основной пользовательской группе
Замените ВАША-ПЕРСОНАЛЬНАЯ-ГРУППА на имя группы; в примере ниже это .group--community ~ .user-title и т.д.
.group--ВАША-ПЕРСОНАЛЬНАЯ-ГРУППА ~ .user-title {
background: #00A9DB;
color: white;
padding: 3px 5px;
}
Помните, что пользователь может выбрать другой заголовок вместо назначенного в профиле пользователя — в этом случае заголовок в сообщениях станет выбранным пользователем — а также настроить его на «нет» — в этом случае заголовок не будет отображаться.
Чтобы избежать этого, можно создать собственный заголовок с нуля, чтобы его нельзя было изменить со стороны пользователя.
CSS для создания собственного заголовка с нуля
Пример:
Советы по созданию заголовка после имени пользователя
/*Отображение пользовательского заголовка после имени пользователя для всех пользователей-СОТРУДНИКОВ
Не будет отображаться, если настройка сайта «приоритет имени пользователя в UX» отключена */
.username.staff::after {
content: 'Пользователь-сотрудник';
color: #00A9DB;
border: 1px solid #00A9DB;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
margin-left: 5px;
display: inline-block;
}
/*Опционально — уменьшить размер на карточке пользователя*/
.user-card .username.staff::after {
font-size:.7em;
margin-left:0px;
}
/*Опционально — скрыть щит модератора только в сообщениях*/
.names .svg-icon-title {
display:none;
}
/*Отображение пользовательского заголовка после имени пользователя, различая пользователей АДМИН и МОД
Не будет отображаться, если настройка сайта «приоритет имени пользователя в UX» отключена */
.username {
&.admin:after {
content: 'Пользователь-администратор' !important;
color: red !important;
border: 1px solid red !important;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
margin-left: 5px;
display: inline-block;
}
&.moderator:after {
content: 'Пользователь-модератор';
color: green;
border: 1px solid green;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
margin-left: 5px;
display: inline-block;
}
}
/*Опционально — скрыть иконку щита только в сообщениях*/
.names .svg-icon-title {
display: none;
}
Советы по созданию заголовка после полного имени
/*Отображение пользовательского заголовка после полного имени для всех сотрудников*/
span.staff :after {
content: "Сотрудник";
color: white;
background-color: #00A9DB;
border-radius: 8px;
margin-left:5px;
padding-left: 4px;
padding-right: 4px;
display: inline-block;
}
/*Отображение пользовательского заголовка после полного имени, различая пользователей АДМИН и МОД */
span {
&.admin :after {
content: "Администратор" !important;
color: white;
background-color: red !important;
border-radius: 8px;
margin-left: 5px;
padding-left: 4px;
padding-right: 4px;
display: inline-block;
}
&.moderator :after {
content: "Модератор";
color: white;
background-color: green;
border-radius: 8px;
margin-left: 5px;
padding-left: 4px;
padding-right: 4px;
display: inline-block;
}
}
Вопрос: Можно ли добавить оба пользовательских заголовка?
Да, это возможно, хотя и избыточно. См. пример ниже:
.username.staff::after {
content: 'Пользователь-сотрудник';
color: #00A9DB;
border: 1px solid #00A9DB;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
margin-left: 5px;
display: inline-block;
}
/*Опционально — уменьшить размер на карточке пользователя*/
.user-card .username.staff::after {
font-size:.7em;
margin-left:0px;
}
/*Опционально — скрыть щит модератора*/
.names .svg-icon-title {
display:none;
}
span {
&.admin :after {
content: "Администратор" !important;
color: white;
background-color: red !important;
border-radius: 8px;
margin-left: 5px;
padding-left: 4px;
padding-right: 4px;
display: inline-block;
}
&.moderator :after {
content: "Модератор";
color: white;
background-color: green;
border-radius: 8px;
margin-left: 5px;
padding-left: 4px;
padding-right: 4px;
display: inline-block;
}
}
Добавить флейр аватара
Вы можете добавить флейр в правый нижний угол аватара пользователя-сотрудника:
Вам нужно создать пользовательскую группу, добавить сотрудников в качестве участников и сделать группу основной. Подробнее см. Add group flair on member avatars.
Если вы хотите добавить пользовательское изображение вместо иконки, загрузите его на свой сайт и используйте URL, как описано в руководстве Включение ресурсов в удалённые темы и компоненты. После добавления изображения в разделе Загрузки темы появится переменная изображения и его прямая ссылка. Щёлкните правой кнопкой мыши по прямой ссылке и скопируйте ссылку в поле «Изображение флейра аватара».
Настройка имён и имен пользователей сотрудников
С помощью небольшого количества CSS можно настроить отображение имён пользователей-сотрудников в сообщениях.
Обратите внимание, что приведённые ниже примеры являются лишь образцами; каждый может изменить стиль по своему усмотрению!
Изменить цвет имени пользователя
По умолчанию имя пользователя отображается перед полным именем.
Изменить цвет имени пользователя, различая администраторов и модераторов
span.username {
&.moderator {
a {
color: green;
}
}
&.admin {
a {
color: red;
}
}
}
Этот вариант использует (почти) тот же CSS, что и для пользовательского заголовка.
span.username {
&.moderator {
a {
color: white;
background-color: green;
border-radius: 8px;
margin-left: 5px;
padding-left: 4px;
padding-right: 4px;
}
}
&.admin {
a {
color: white;
background-color: red;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}
}
}
Изменить цвет полного имени
Если вы хотите, чтобы полное имя отображалось перед именем пользователя, включите настройку сайта отображать полное имя в сообщениях и отключите приоритет имени пользователя в UX.
Изменить цвет полного имени для всех сотрудников
.names span.staff a {
color: #00A9DB;
}
Этот вариант использует (почти) тот же CSS, что и для пользовательского заголовка.
.names span.staff a {
color: #00A9DB;
background-color: #D3F5FF; /*используйте светлый цвет*/
border: 1px solid #00A9DB;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
margin-left: 5px;
}
Изменить цвет полного имени, различая администраторов и модераторов
.names span {
&.moderator {
a, i {
color: green;
}
}
&.admin {
a, i {
color: red;
}
}
}
Этот вариант использует (почти) тот же CSS, что и для пользовательского заголовка.
.names span {
&.moderator {
a {
color: green;
border: 1px solid green;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
margin-left: 5px;
}
}
&.admin {
a {
color: red;
border: 1px solid red;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
margin-left: 5px;
}
}
}
Имя пользователя
/*Замените ИМЯ_ПОЛЬЗОВАТЕЛЯ на имя пользователя*/ .topic-meta-data .names span.username a[data-user-card=ИМЯ_ПОЛЬЗОВАТЕЛЯ] { color: blue; }
Полное имя
/*Замените ИМЯ_ПОЛЬЗОВАТЕЛЯ на имя пользователя*/ .topic-meta-data .full-name a[data-user-card=ИМЯ_ПОЛЬЗОВАТЕЛЯ] { color: blue; }
И полное имя, и имя пользователя
.topic-meta-data .names span a[data-user-card=ИМЯ_ПОЛЬЗОВАТЕЛЯ] { color: blue; }
Настройка фона сообщений сотрудников
Пользователи-сотрудники могут вручную добавить цвет сотрудника, используя кнопку Добавить цвет сотрудника в сообщениях.
и результат будет следующим:
Добавить цвет фона ко всему сообщению
Добавив несколько строк CSS, цвет фона можно применить ко всему сообщению при нажатии кнопки Добавить цвет сотрудника.
.moderator {
.topic-body, .clearfix > .topic-meta-data > .names span.user-title, .topic-body .cooked {
background: #ffffd0; /*измените цвет здесь*/
}
}
Возможно автоматизировать эту функцию и настроить все сообщения, написанные сотрудниками, различными способами с помощью CSS. Для этого необходимо создать основную пользовательскую группу, как описано выше (см. главу о флейре). Когда ваши сотрудники состоят в основной группе, вы можете настроить их сообщения с помощью CSS.
Автоматически изменить фон сообщений для всех сотрудников
/*Замените ИМЯ-ГРУППЫ на имя вашей группы*/
.topic-post.group-ИМЯ-ГРУППЫ .topic-body .cooked {
background-color: #ffffd0; /*измените цвет здесь*/
}
или
.topic-post.group-ИМЯ-ГРУППЫ .topic-body {
background-color: #ffffd0; /*измените цвет здесь*/
}
или даже
/*Замените ИМЯ-ГРУППЫ на имя вашей группы*/
.topic-post.group-ИМЯ-ГРУППЫ .topic-body .cooked {
background-color: #ffffd0; /*измените цвет здесь*/
}
.topic-post.group-ИМЯ-ГРУППЫ .names span {
background-color: #ffffd0; /*измените цвет здесь*/
}
Автоматически изменить цвет шрифта и семейство шрифтов для всех сотрудников
/*Замените ИМЯ_ГРУППЫ на имя вашей группы*/
.topic-post.group-ИМЯ_ГРУППЫ .topic-body .cooked {
color: #fec601; /*измените цвет шрифта здесь*/
font-family: ......; /* измените семейство шрифтов здесь */
}
Автоматически изменить фон только ответов сотрудников, но не их первого сообщения
Каждое сообщение в теме имеет ID в формате: post_number. Для первого сообщения в теме ID — post_1, у ответов ID вида post_2, post_3 и так далее.
Если вы хотите добавить фон ко всем сообщениям сотрудников, кроме первого:
/*Замените ИМЯ-ГРУППЫ на имя вашей группы*/
.topic-post.group-ИМЯ-ГРУППЫ .onscreen-post:not(#post_1) .topic-body .cooked {
background-color: #ffffd0; /*измените цвет здесь*/
}
Добавить дополнительный контент в сообщения сотрудников
Простая подпись
.topic-post.group-ИМЯ-ГРУППЫ .topic-body .cooked::after {
content: "От вашего дружелюбного сотрудника";
font-size: small;
color: #d29400;
float:right;
font-style: italic;
}
Простой логотип
.topic-post.group-ИМЯ-ГРУППЫ .topic-body .cooked::after {
background-image: url("URL_ИЗОБРАЖЕНИЯ");
background-repeat: no-repeat;
background-size: 138px 36px; /*измените эти значения в соответствии с размером изображения*/
width: 138px; /*измените это значение в соответствии с размером изображения*/
height: 36px; /*измените это значение в соответствии с размером изображения*/
display: block;
float: right;
content: "";
}
