Css стиль для имени пользователя

В учебнике разделе про каскадирование htmlbook.ru/samcss/kaskadirovanie приведены приоритеты браузеров:

Что такое Стиль автора и Стиль пользователя и чем они отличаются?

  • Вопрос задан более года назад
  • 106 просмотров

Стиль автора — стиль, который добавляет к документу его разработчик.
Стиль пользователя — стиль, который может включить пользователь сайта через настройки браузера.

Показано с 1 по 2 из 2

Опции темы
Поиск по теме
Отображение
  • Линейный вид
  • Комбинированный вид
  • Древовидный вид

Звания, имена, баннеры групп

Часто, у новичков, возникает вопрос о оформлении званий и ника пользователей. Решил сделать небольшой мануал по этому вопросу.
Первое надо зайти: «Главная» => «Настройки» => «Настройки пользователя» и настроить отображение баннеров:

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

Теперь перейдем: «Пользователи» => «Группы пользователей» => «Список групп» выбираем нужную группу и приступаем к стилизации.
Для начала стилизуем ники группы. Для этого надо задать стиль 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)

Читайте также:  Датчик температуры метран 286

Пример:
Указываем CSS стиль для ника:

Займемся званием пользователей. Если в пункте «Использовать звание» отмечено «Использовать следующее звание» звание указано, а в «Текст баннера пользователя», ни чего не указано, то для звания будет простая надпись из пункта «Использовать следующее звание». Эту надпись можно заменить изображением, но надо учитывать размеры блока, что бы картинка не растянула блок информации о пользователе, по дефолту надо делать изображение шириной не больше 124 пикселей. В пункт «Использовать следующее звание», вместо текста вставляем HTML код изображения:

Немного сдвинута, не беда, поправим с помощью CSS. В EXTRA.css добавим:

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

Из кода видно, этот элемент делаем блочным с определенной высотой и шириной (по размерам картинки), фон блока задаем нужной картинкой, текст делаем прозрачным (без текста баннера, он не будет показываться), ну и опять небольшой отступ. Получилось то же самое,

но немного удобнее, потому что у нас свой класс для картинки, при желании, можно сделать спрайты и с их помощью, эффект при наведении (hover) и баннер будет отображаться только в блоке информации в сообщениях, не как первый способ, при нем звание отображается картинкой везде.
Стиль CSS: здесь уже больше простора. В этом же классе фон можно сделать просто цветом или градиентом, закругление уголков, цвет текста, так же эффект при наведении. Все что угодно, пример на этом сайте.

Последний раз редактировалось Serg_Brain; 12.04.2018 в 20:24 . Причина: Оформил тему, по правилам раздела


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

Читайте также:  Как перенести файлы с телефона на флешку

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

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

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

в "CSS-стиль для имени пользователя" добавить фон

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock detector