Иконка ресурса

Мануал 2.x Баннер группы и ник градиентом

Как сделать группу пользователя и ник в виде градиента

Agelil

Проверенный
Сообщения
62
Репутация
16
Баллы
8
Agelil разместил(а) новый ресурс:

Баннер группы и ник градиентом - Как сделать группу пользователя и ник в виде градиента

Просмотреть вложение 24873
Чтоб сделать такой никнейм:
Для XF 1.x:
Админка>Пользователи>Группы пользователей выбираем требуемую группу и CSS-стиль для имени пользователя, там пишем код
Код:
background: linear-gradient(90deg, #0095dd 0%, #f1094b 100%, #0095dd);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #FF512F;
font-size: 16px;
font-weight: bold;
text-shadow: #FF512F
Для XF 2.x
Админка>Группы и права>Группы пользователей выбираем требуемую группу...
Посмотреть страницу этого ресурса...
 
  • Мне нравится
Реакции: SOUL

Skaiman

[SVG]ADD-ONS ™
Администратор
Сообщения
6 666
Репутация
6 612
Баллы
266
Код:
background: linear-gradient(90deg, #0095dd 0%, #f1094b 100%, #0095dd);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #FF512F;
font-size: 16px;
font-weight: bold;
text-shadow: #FF512F
Укажу на ошибки в коде.
1. Нельзя в настройках стиля имени пользователя указывать размер шрифта, font-size: 16px;, получишь ник одного размера везде, хотя он разный для разных мест.
2. Насыщенность шрифта font-weight: bold; и так указана где надо.
3. Тень шрифта не указывается одним значением цвета text-shadow: #FF512F должно присутствовать еще три значения, смещение тени по горизонтали, смещение тени по вертикали и радиус размытия, text-shadow: 1px 1px 2px #FF512F
4. Линейный градиент указан тоже не очень правильно, задано три цвета, но по сути третий такой же как первый, а второй цвет растянут до конца, поэтому указывать третий нет смысла, его не видно, достаточно background: linear-gradient(90deg, #0095dd 0%, #f1094b 100%);
 
Последнее редактирование:

Skaiman

[SVG]ADD-ONS ™
Администратор
Сообщения
6 666
Репутация
6 612
Баллы
266
Перейдем к баннеру :)
CSS:
.GroupNameBanner {
    background: linear-gradient(90deg, #5c258d, #4389a2);
    width: 116px;
    display: block;
    color: white;
}
1. Указана ширина баннера, но ведь постбит может быт разный на разных стилях и поэтому надо указывать ширину в процентах, не фиксировать ее, width: 100%;
2. Для линейного градиента можно указать позицию

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


3. Выставить текст по центру text-align: center;, так указан свой css для баннера и уже от дефолтных свойства не работают.
4. Желательно указать внутренний отступ, padding ну и внешний margin
5. Еже желательно код для адаптивного дизайна и для профиля пользователя, так как если установим ширину для постбита 100%, то и там растянется, не всех это устроит :)
 

Skaiman

[SVG]ADD-ONS ™
Администратор
Сообщения
6 666
Репутация
6 612
Баллы
266
Время появилось, решил добавить кое чего. Авторы ресурсов, в которых я даю комментарии по поводу кода, не обижайтесь, ну во первых я несу какую-никакую ответственность за размещенные вами ресурсы и не могу позволить своим пользователям использовать не очень правильные коды. Запретить размещать, не хочется, вам надо зарабатывать симпатии. Расценивайте это, как уроки от меня :)
Ближе к делу, Ну вот не понравилось мне как представлен здесь баннер, один, нет для других групп, ну вроде понятно, но по сути придется для каждой группы переписывать весь код, хотя там изменяется только градиент фона. Вот набросал для LESS
Less:
.linear-gradient-prefixes(@deg, @start, @end) {
    background-image: -webkit-linear-gradient(@deg, @start, @end);
    background-image: -moz-linear-gradient(@deg, @start, @end);
    background-image: linear-gradient(90deg, @start 0%, @end 100%);
}

.linear-gradient(@_, @start, @end) {
    .linear-gradient-prefixes(left, @start, @end);
}

.gradientBanner {
    display: inline-block;
    text-align: center;
    font-size: 80%;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 0;
    margin: 4px 0;
    width: 100%;
    border: none;
    &.admin {
        .linear-gradient(left, #E70707, #5E0000)
    }
    &.moder {
        .linear-gradient(left, #029B0E, #C10000)
    }
    &.user {
        .linear-gradient(left, #02739B, #00C134)
    }
    &.lamer {
        .linear-gradient(left, #6CD4F9, #005FAD)
    }
    .memberHeader-banners & {
        [data-template="member_view"] & {
            width: 120px!important;
        }
    }
    .tooltip-content & {
        .tooltip--member & {
            width: 120px!important;
        }
    }
    @media (max-width: @xf-responsiveMedium) {
        display: inline!important;
        padding: 3px 5px;
    }
}
на выходе CSS
CSS:
.gradientBanner {
    display: inline-block;
    text-align: center;
    font-size: 80%;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 0;
    margin: 4px 0;
    width: 100%;
    border: none;
}

.gradientBanner.admin {
    background-image: -webkit-linear-gradient(left, #E70707, #5E0000);
    background-image: -moz-linear-gradient(left, #E70707, #5E0000);
    background-image: linear-gradient(90deg, #E70707 0%, #5E0000 100%);
}

.gradientBanner.moder {
    background-image: -webkit-linear-gradient(left, #029B0E, #C10000);
    background-image: -moz-linear-gradient(left, #029B0E, #C10000);
    background-image: linear-gradient(90deg, #029B0E 0%, #C10000 100%);
}

.gradientBanner.user {
    background-image: -webkit-linear-gradient(left, #02739B, #00C134);
    background-image: -moz-linear-gradient(left, #02739B, #00C134);
    background-image: linear-gradient(90deg, #02739B 0%, #00C134 100%);
}

.gradientBanner.lamer {
    background-image: -webkit-linear-gradient(left, #6CD4F9, #005FAD);
    background-image: -moz-linear-gradient(left, #6CD4F9, #005FAD);
    background-image: linear-gradient(90deg, #6CD4F9 0%, #005FAD 100%);
}

[data-template="member_view"] .memberHeader-banners .gradientBanner,
.tooltip--member .tooltip-content .gradientBanner {
    width: 120px!important;
}

@media (max-width: @xf-responsiveMedium) {
    .gradientBanner {
        display: inline!important;
        padding: 3px 5px;
    }
}
Код поправил, добавил адаптивный дизайн.
 
Последнее редактирование:

Fastoner

Пользователь
Сообщения
8
Репутация
1
Баллы
3
Куда этот код вставлять?)
 

Berkovsky

Проверенный
Сообщения
33
Репутация
2
Баллы
3
Skaiman, а вот как на этом форуме это как сделать, что прописывать в less?

Screenshot_21.jpg
 

Berkovsky

Проверенный
Сообщения
33
Репутация
2
Баллы
3
Skaiman, прошу прощение. Написал, а позже уже подобную тему нашел.
 

treepalms

Пользователь
Сообщения
1
Репутация
0
Баллы
1
Давно искал эту херь :D
 
Сверху Снизу