[MMO] Verified Badge 2.2.1

MISTAKE · 23 Июн 2020

West14 написал(а):
Must_Die, тем самым переопределить иконку, такое себе решение.

OFFTOP

Не ну я лишь показал человечку как у меня всё.. Думаю не глупый, поймет что и как.. Носом вроде бы как ткнул куда надо..))

Skaiman · 23 Июн 2020

Делам так:

Less:

.username i:before {
    .m-faContent(@fa-var-check-double); // изменяем иконку
    color: #d91e18; // изменяем цвет (изменится у всех, без учета цвета ника групп)
    font-size: .8rem; // изменяем размер в % (от 0 до 100) или в rem (от 0 до 1)
    margin-left: -3px; // изменяем размер 0 - на месте, минус - влево, плюс - вправо
    text-shadow: none; // убираем тень у иконки, если есть у ника
}

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

Код:

.username[data-user-id="13"] i:before

если надо для конкретной группы:

Код:

.username .username--style4 i:before

Deku · 25 Июн 2020

Skaiman,

Skaiman написал(а):
.username i:before { .m-faContent(@fa-var-check-double); // изменяем иконку color: #d91e18; // изменяем цвет (изменится у всех, без учета цвета ника групп) font-size: .8rem; // изменяем размер в % (от 0 до 100) или в rem (от 0 до 1) margin-left: -3px; // изменяем размер 0 - на месте, минус - влево, плюс - вправо text-shadow: none; // убираем тень у иконки, если есть у ника }

А как в данном варианте поменять иконку? Ставлю другую иконку (fas fa-fw fa-check-circle) в less и все ломается, ставится обычная галка заводская, а если ничего не меняю то остается fa-var-check-double и все оке.

CrazyHackGUT · 25 Июн 2020

Находим нужную иконку у них на сайте и копируем шестнадцатеричное представление. Потом выставляем нужный шрифт через m-faBase() и задаём через content иконку. Всё.
Примеров таких финтов ушами на форуме полно. Поищите.

Atikin · 26 Июн 2020

MaiNDaY написал(а):
fas fa-fw fa-check-circle

@fa-var-check-circle?

Skaiman · 26 Июн 2020

@fa-var-check-circle - это переменная less. Начнем с того, что для иконки check-circle, существует четыре начертания:

название одно, а начертания разные, Solid - 900 - fas, Regular - 400 - far, Light - 300 - fal и Duotone - fad, вот переменная, в зависимости от настроек стиля шрифтов:

дает возможность указать иконку с уже предустановленными настройками стиля. Но можно и принудительно указать в коде насыщенность, если сделать так:

Less:

.username i:before {
    .m-faContent(@fa-var-check-circle); // изменяем иконку
    font-weight: 900;
    color: #d91e18; // изменяем цвет (изменится у всех, без учета цвета ника групп)
    font-size: .8rem; // изменяем размер в % (от 0 до 100) или в rem (от 0 до 1)
    margin-left: -3px; // изменяем размер 0 - на месте, минус - влево, плюс - вправо
    text-shadow: none; // убираем тень у иконки, если есть у ника
}

а вот для иконки четвертой уже надо указывать шрифт:

Less:

.username i:before {
    .m-faBase(Duotone);
    .m-faContent(@fa-var-check-circle); // изменяем иконку
    color: #d91e18; // изменяем цвет (изменится у всех, без учета цвета ника групп)
    font-size: .8rem; // изменяем размер в % (от 0 до 100) или в rem (от 0 до 1)
    margin-left: -3px; // изменяем размер 0 - на месте, минус - влево, плюс - вправо
    text-shadow: none; // убираем тень у иконки, если есть у ника
}

MaiNDaY, а в твоем случае не надо было вообще указывать иконку, так как ты ее не менял, я указал все свойства, используй только те, которые необходимы.

S_Sirius · 26 Июн 2020

Skaiman написал(а):

Less:

.username i:before {
    .m-faBase(Duotone);
    .m-faContent(@fa-var-check-circle); // изменяем иконку
    color: #d91e18; // изменяем цвет (изменится у всех, без учета цвета ника групп)
    font-size: .8rem; // изменяем размер в % (от 0 до 100) или в rem (от 0 до 1)
    margin-left: -3px; // изменяем размер 0 - на месте, минус - влево, плюс - вправо
    text-shadow: none; // убираем тень у иконки, если есть у ника
}

Я поставил мигающий ник для группы и использовал этот код, но галочка не отображается у пользователей у которых мигающий ник (То есть он прозрачный). Что делать?

Matew · 26 Июн 2020

Ruben написал(а):
Я поставил мигающий ник для группы и использовал этот код, но галочка не отображается у пользователей у которых мигающий ник (То есть он прозрачный). Что делать?

Указать весь используемый код? Ну это было бы неплохим действием, для начала. Штатные экстрасенсы просто могут отдыхать

S_Sirius · 26 Июн 2020

Matew, Это стиль ника в настройках группы

CSS:

color: rgba(209, 0, 0, 1);
font-weight: bold;
background: linear-gradient(270deg, rgba(201, 31, 55, 1), rgba(201, 31, 55, 0.5), rgba(201, 31, 55, 1));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 900% 20%;
color: #1000f2;
animation: AnimNic 15s ease infinite;

А это в extra.less

Less:

@keyframes AnimNic {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

UPD. Проблема решена

Код:

.username i:before {
    -webkit-text-fill-color: #d91e18; // Цвет галочки
}

Seaside · 4 Июл 2020

Как изменить иконку галочки?

Matew · 4 Июл 2020

Seaside написал(а):
Как изменить иконку галочки?

Почитать тему? Поднять свои глаза на предыдущие несколько сообщений на этой же странице?

gimberov · 5 Июл 2020

Len написал(а):
dimka1510, Как вариант создайте группу с платным повышением в CSS группы добавьте это:

CSS:

background: transparent url('ссылка на картинку') no-repeat; padding-left: 10px;

Указывайте ссылку на картинку 16x16 с галочкой, у меня получилось так.
Теперь каждый кто приобретет платное повышение и окажется в группе где указан этот CSS код будет иметь галочку такую.

Подскажите пожалуйста
Как в этом коде можно сделать всплывающее окошко при наведении на значок, с информацией что он значит. И вместо url указать ftp ссылку на изображение? Перечитав данную тему лучше варианта для выдачи значка группам не нашел

Skaiman · 5 Июл 2020

gimberov написал(а):
Как в этом коде можно сделать всплывающее окошко при наведении на значок

оно есть, только внимательно посмотри, просто перекрывается окном информации о пользователи, об этом в теме поднимался вопрос, если читать конечно.

gimberov написал(а):
И вместо url указать ftp ссылку на изображение? Перечитав данную тему лучше варианта для выдачи значка группам не нашел

здесь я вообще не понял :)

Matew · 5 Июл 2020

gimberov написал(а):
И вместо url указать ftp ссылку на изображение

Как вы себе представляете ftp ссылку? Попахивает извращением нехилым

gimberov написал(а):
Подскажите пожалуйста
Как в этом коде можно сделать всплывающее окошко при наведении на значок, с информацией что он значит.

Никак. CSS это лишь стиль

gimberov · 5 Июл 2020

Matew написал(а):
Как вы себе представляете ftp ссылку? Попахивает извращением нехилым

Никак. CSS это лишь стиль

ftp ссылка у меня логотип форума так загружен, вписал /image/logo.png
Так же этим методом вместо url, прописываю обложки узлов в ThemeHouse-Nodes,
Просто не совсем пониманию как в данном плагине. Изменить иконку.
Допустим вот код для изменения В extra.less

.fa-check-circle-o:before {
content: "\f05d";
}
\f05d замените на нужную Вам иконку.
Как мне в моём случае случае прописать эту иконку?

Skaiman · 5 Июл 2020

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

gimberov написал(а):
ftp ссылка у меня логотип форума так загружен, вписал /image/logo.png

так то /image/logo.png, это и есть url ссылка :) только внутренний

Skaiman · 6 Июл 2020

Для изменения иконки Font Awesome на изображение, можно использовать следующий код:

Less:

.username i:before {
    content: "";
    background: url('https://api.iconify.design/emojione:white-heavy-check-mark.svg') no-repeat center center / contain;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

Немного поправил код:

Less:

@verifiedIconSize: 1em; // переменная размера иконки
.username i:before {
    content: "";
    background: url('https://api.iconify.design/emojione:white-heavy-check-mark.svg') no-repeat center / contain; // изображение иконки
    display: inline-block;
    width: @verifiedIconSize; // ширина иконки, используем переменную
    height: @verifiedIconSize; // высота тконки, используем переменную
    vertical-align: -(@verifiedIconSize / 8); // выравнивание по высоте, 1/8 переменной
    z-index: 310; // отображение тултипа иконки выше тултипа информации о пользователе
}

CrazyHackGUT · 6 Июл 2020

Skaiman, в content тоже можно ссылку пихать, если что :)

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Я вот тут показывал на примере "галочки из ВК", как.

Skaiman · 6 Июл 2020

CrazyHackGUT написал(а):
тоже можно ссылку пихать, если что :)

ну так то я знаю :) я не хотел ни коем образом указать, что твой способ не правильный и если что, то как я сделал тоже правильно :) что бы иконка была ровнее с ником, а размер в em, делает иконку по размеру шрифта, рядом с которым иконка используется.

gimberov · 6 Июл 2020

Skaiman написал(а):
ну так то я знаю :) я не хотел ни коем образом указать, что твой способ не правильный и если что, то как я сделал тоже правильно :) что бы иконка была ровнее с ником.

Твой вариант оказался гораздо лучше.

А куда можно загрузить свой svg значок для вставки в код?

Для примера: Есть группа с банером Продавец, синие значки им будут выдаваться, после полной их проверки выполнение заказов. С возможностью заключать сделки без посредника. Золотой значок нарисовал, для тех кто покупает премиум на более 90дней+значимые бонусы.
Так вот: Есть ли способ где нибудь прописывать пользователей с данным значком?
Получиться ли здесь через запятую? .username[data-user-id="13"] i:before

[MMO] Verified Badge 2.2.1

MISTAKE

Skaiman

Deku

CrazyHackGUT

Atikin

Король шутов

Skaiman

S_Sirius

Matew

S_Sirius

Seaside

Matew

gimberov

Skaiman

Matew

gimberov

Skaiman

Skaiman

CrazyHackGUT

Skaiman

gimberov

Похожие темы

Мы ценим вашу конфиденциальность