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

Тема в разделе "Инструкции и основная информация", создана пользователем Next, 07.12.15.

  1. Next

    Next Администратор

    Сообщения:
    5.704
    Репутация:
    73
    Рейтинг:
    +572 / -0

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

    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.pngScreenshot_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.png002.png003.png004.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.png9.png

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

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

    Вложения:

    • Мне понравилось Мне понравилось x 4
    • alladdin

      alladdin Участник

      Сообщения:
      18
      Репутация:
      6
      Рейтинг:
      +1 / -0
      Очень полезно. Огромное спасибо. А есть какае-то дополнение или плагин, чтобы не прописывать вручную стили и классы?
       
    • Next

      Next Администратор

      Сообщения:
      5.704
      Репутация:
      73
      Рейтинг:
      +572 / -0
      Есть, но функционал очень скудный. Вручную сделать просто, можно как угодно практически.
       
    • ThePhoenix

      ThePhoenix Участник

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

      Ссылки могут видеть только зарегистрированные пользователи. Зарегистрируйтесь или авторизуйтесь для просмотра ссылок!


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

      Ссылки могут видеть только зарегистрированные пользователи. Зарегистрируйтесь или авторизуйтесь для просмотра ссылок!

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

      ROOT Участник

      Сообщения:
      8
      Репутация:
      9
      Рейтинг:
      +2 / -0
      Верни шаблон в исходное состояние, там у тебя черти че :)

      Последнего обновления нет.
      Можно немного усовершенствовать код для удобства добавления последующих групп:
      Код:
      /* Баннеры групп */
      
      /* Общий стиль для всех баннеров */
      
      [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);
      }
      
      /* Баннеры групп */
       
      • Мне понравилось Мне понравилось x 1
        Последнее редактирование модератором: 24.04.16
      • ThePhoenix

        ThePhoenix Участник

        Сообщения:
        26
        Репутация:
        5
        Рейтинг:
        +1 / -0
        какой шаблон? 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

        ROOT Участник

        Сообщения:
        8
        Репутация:
        9
        Рейтинг:
        +2 / -0
        А здесь нет возможности залить изображения сюда? Так смотреть каждый раз с переходом черти куда очень не удобно.

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

        ThePhoenix Участник

        Сообщения:
        26
        Репутация:
        5
        Рейтинг:
        +1 / -0
        Если не писать,его не отображает :/
        вот фотки:

        [​IMG]
        [​IMG]
         
      • ROOT

        ROOT Участник

        Сообщения:
        8
        Репутация:
        9
        Рейтинг:
        +2 / -0
        Код:
        .admin strong, .moderator strong, .team_adm strong, .good_man strong {
            display: none
        }
         
        • Мне понравилось Мне понравилось x 1
        • ThePhoenix

          ThePhoenix Участник

          Сообщения:
          26
          Репутация:
          5
          Рейтинг:
          +1 / -0
          эмм,это что,зачем и куда?