Современный облачный хостинг провайдер | Aéza
Контакты ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430

XF 2.0 Баннеры групп

Статус
В этой теме нельзя размещать новые ответы.
StonEEE

StonEEE

Проверенные
Сообщения
132
Реакции
3
Баллы
1,715
Сколько я не искал шаблон EXTRA.css, так и не нашел.
Попробовал создать сам, не работает, но данная функция существует.
Куда тогда вставлять код? Если даже при создании шаблона ничего не работает.Screenshot (1).png
 
Сортировка по дате Сортировка по голосам
Смотрите, вот у меня само имя пользователя кастомизировано, но как сделать такой же баннер?

CSS: 
    background: linear-gradient(180deg, #006cff 50%, #04019d 100%, #006cff);
    background-image: linear-gradient(180deg, #006cff 50%, #04019d 100%, #006cff);
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #04019d;
    font-weight: bold;
    text-shadow: 0 0 1px #006cff;
    font-family: Arial;
    font-size: 13px;
 
Позитивный голос 0 Негативный голос
Это крутейший хакерский код для ников с градиентом :) там строчек раза в три меньше должно быть :)

Достаточно этого:
CSS: 
background: linear-gradient(180deg, #006cff 50%, #04019d 100%, #006cff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #04019d;
text-shadow: 0 0 1px #006cff;

Баннеры:
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;
    }
}
 
Позитивный голос 0 Негативный голос
Skaiman написал(а):
Это крутейший хакерский код для ников с градиентом :) там строчек раза в три меньше должно быть :)

Достаточно этого:
CSS: 
background: linear-gradient(180deg, #006cff 50%, #04019d 100%, #006cff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #04019d;
text-shadow: 0 0 1px #006cff;

Баннеры:
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;
    }
}
Нажмите для раскрытия...
Куда по точнее вставить код этот? Для баннера
 
Позитивный голос 0 Негативный голос
в extra.less, но надо еще указать для групп
2017-12-13_130501.png

2017-12-13_130148.png

вот еще вариант баннеров :)
У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация
 
Позитивный голос 0 Негативный голос
Skaiman написал(а):
в extra.less, но надо еще указать для групп
Посмотреть вложение 80429

Посмотреть вложение 80430

вот еще вариант баннеров :)
У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация
Нажмите для раскрытия...
Во втором варианте, теперь с форумом такая фигня.
Задний фон был сероватый, а стал черный. В настройках стиля все нормально.
Безымянный.png

И такая фигня получается.Screenshot (1).png
 
Позитивный голос 0 Негативный голос
StonEEE написал(а):
Во втором варианте, теперь с форумом такая фигня.
Задний фон был сероватый, а стал черный. В настройках стиля все нормально.
Нажмите для раскрытия...
Так там не все надо тупо копировать :) это же делалось не для постбита напрямую, там пример :)
 
Позитивный голос 0 Негативный голос
Less: 
.userBannerLight {
    display: inline-block;
    text-align: center;
    font-size: .7em;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    padding: .5em 0em;
    margin: .6em 0em;
    width: 100%;
    border: none;
    position: relative;
    overflow: hidden;
    &.admin {
        background: #c62828;
    }
    &.moder {
        background: #00695C;
    }
    &.user {
        background: #1565C0;
    }
    &:before {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 2.5s infinite;
    }
    .tooltip-content & {
        .tooltip--member & {
            width: 120px!important;
        }
    }
    @media (max-width: @xf-responsiveMedium) {
        display: inline!important;
        padding: .5em 1em;
    }   
}
@keyframes light {
    0% {
        left: -80%;
    }
    100% {
        left: 80%;
    }
}

Можно совместить :)
Less: 
.linear-gradient(@start, @end) {
    background: linear-gradient(90deg, @start 0%, @end 100%);
}

.userBannerLight {
    display: inline-block;
    text-align: center;
    font-size: .7em;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    padding: .5em 0em;
    margin: .6em 0em;
    width: 100%;
    border: none;
    position: relative;
    overflow: hidden;
    &.admin {
        .linear-gradient(#E70707, #5E0000);
    }
    &.moder {
        .linear-gradient(#029B0E, #C10000);
    }
    &.user {
        .linear-gradient(#02739B, #00C134);
    }
    &:before {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 2.5s infinite;
    }
    .tooltip-content & {
        .tooltip--member & {
            width: 120px!important;
        }
    }
    @media (max-width: @xf-responsiveMedium) {
        display: inline!important;
        padding: .5em 1em;
    }   
}
@keyframes light {
    0% {
        left: -80%;
    }
    100% {
        left: 80%;
    }
}
 
Позитивный голос 0 Негативный голос
Skaiman написал(а):
Less: 
.userBannerLight {
    display: inline-block;
    text-align: center;
    font-size: .7em;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    padding: .5em 0em;
    margin: .6em 0em;
    width: 100%;
    border: none;
    position: relative;
    overflow: hidden;
    &.admin {
        background: #c62828;
    }
    &.moder {
        background: #00695C;
    }
    &.user {
        background: #1565C0;
    }
    &:before {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 2.5s infinite;
    }
    .tooltip-content & {
        .tooltip--member & {
            width: 120px!important;
        }
    }
    @media (max-width: @xf-responsiveMedium) {
        display: inline!important;
        padding: .5em 1em;
    }  
}
@keyframes light {
    0% {
        left: -80%;
    }
    100% {
        left: 80%;
    }
}

Можно совместить :)
Less: 
.linear-gradient(@start, @end) {
    background: linear-gradient(90deg, @start 0%, @end 100%);
}

.userBannerLight {
    display: inline-block;
    text-align: center;
    font-size: .7em;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    padding: .5em 0em;
    margin: .6em 0em;
    width: 100%;
    border: none;
    position: relative;
    overflow: hidden;
    &.admin {
        .linear-gradient(#E70707, #5E0000);
    }
    &.moder {
        .linear-gradient(#029B0E, #C10000);
    }
    &.user {
        .linear-gradient(#02739B, #00C134);
    }
    &:before {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 2.5s infinite;
    }
    .tooltip-content & {
        .tooltip--member & {
            width: 120px!important;
        }
    }
    @media (max-width: @xf-responsiveMedium) {
        display: inline!important;
        padding: .5em 1em;
    }  
}
@keyframes light {
    0% {
        left: -80%;
    }
    100% {
        left: 80%;
    }
}
Нажмите для раскрытия...
После совмещения лучше, спасибо.
 
Позитивный голос 0 Негативный голос
Skaiman написал(а):
Ну это дело вкуса :) я у себя не сделаю этого :)
Нажмите для раскрытия...
Подскажите как исправить ширину банера, проблема с отображением только через ПК и только на страничке профиля подьзователя. А так везде отображается корректно и в мобильной версии и в постах... Скрин прилагаю...Код использовал из поста выше тот что с бликом.
joxi_screenshot_1525172229994.png
 
Позитивный голос -1 Негативный голос
Статус
В этой теме нельзя размещать новые ответы.
Современный облачный хостинг провайдер | Aéza
Контакты
ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430 г. Краснодар, ул. Маяковского 160, офис 2.4

Похожие темы

alebarda
  • Вопрос
XF 2.2 Не срабатывает автоматическое повышение прав
Ответы
12
Просмотры
310
Matew
Matew
azazk13
  • Закрыта
  • Решено
XF 2.2 Внесение баннера в "Команда онлайн" вместо звания
Ответы
5
Просмотры
598
azazk13
azazk13
depizi
  • Закрыта
  • Решено
XF 2.2 Применить JavaScript к элементу шаблона
Ответы
2
Просмотры
318
depizi
depizi
P
  • Закрыта
  • Решено
XF 2.2 Встроить виджет в модификацию шаблона
Ответы
1
Просмотры
426
IlyaPep
IlyaPep
DN_F
  • Вопрос
XF 2.0 Как работают повышения в группах?
Ответы
3
Просмотры
492
DN_F
DN_F
Назад
Сверху Снизу