• Добро пожаловать на сайт - Forumteam.wiki !

    Что бы просматривать темы форума необходимо зарегестрироваться или войти в свой аккаунт.

    Группа в телеграме (подпишитесь, что бы не потерять нас) - ForumTeam Chat [Подписатся]
    Связь с администратором - @ftmadmin

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

Sam Jack

Опытный
Опытный
Регистрация
05.03.18
Сообщения
230
Реакции
56
Баллы
415
FTC
  • Автор темы
  • Заблокирован
  • #1
Обратите внимание, если вы планируете совершить сделку с этим пользователем, он заблокирован.
в extra.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
Код:
.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 {
  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;
  }
} .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;
    }
}
В CSS прописываем без точки (см картинку) Screenshot_1.png
 

febo

Пользователь на проверке
На проверке
Регистрация
16.04.22
Сообщения
3
Реакции
0
Баллы
20
FTC
10¢
Как понять на выходе CSS?
 

febo

Пользователь на проверке
На проверке
Регистрация
16.04.22
Сообщения
3
Реакции
0
Баллы
20
FTC
10¢
Подскажите пожалуйста
 
Сверху Снизу