Инструкция Баннеры пользователей по средствам простого css

Kaori

Местный
Сообщения
120
Симпатии
85
Баллы
28
#1
Идем в настройки групп пользователей
В пункте "Оформление баннера пользователя:" Выбираем "Другой, используя своё имя CSS-класса:"
Прописываем в нем userBanner my-style
1.png
Далее открываем EXTRA.CSS вашего скина и добавляем в него
Код:
.userBanner.my-style
{
color: white;
background-color: green;
}
Где color цвет текста в background-color цвет фона

Так же можно добавить параметр рамки
Код:
.userBanner.my-style
{
color: white;
background-color: green;
border-color: green;
}
2.png

Именно таким образом можно оформить абсолютно любой баннер пользователя, при минимальных знаниях css)
 

ROOT

Пользователь
Сообщения
0
Симпатии
49
Баллы
12
#2
Зачем в свободное общение, надо было ресурс сделать
 

ROOT

Пользователь
Сообщения
0
Симпатии
49
Баллы
12
#4
А так можно?)
Ладно, пусть висит) Следующие гайды в ресурсы скину)
Есть ресурсы мануалов, там можно без файла добавлять, как бы это вроде не юмор :) да и в ресурсе для гостей не доступны полные материаллы, пусть регистрируются :)
 

Nayn

Проверенный
Сообщения
26
Симпатии
11
Баллы
3
#5
Полезный гайд, особенно когда стиль не стандартный нужно в EXTRA пихать.
 

Squirrel

Пользователь
Сообщения
1
Симпатии
0
Баллы
1
#7
Переделываю за инвалидами)
cMfvWH1o.jpg
Как эти ленточки сделать красивыми а не такими тупыми квадратами
Все изображения надо загружать на наш форум!
 
Последнее редактирование модератором:

KinoMan

Проверенный
Сообщения
20
Симпатии
1
Баллы
3
#9
подскажите если вставляю
.userBanner.my
{
color: white;
background-color: green;
}
то не чего не меняется css не добовлеется
 

Skaiman

[SVG]ADD-ONS ™
Разработчик
Сообщения
5.909
Симпатии
5.628
Баллы
266
#10
Куда всчтавляешь? В настройках группы указываешь класс?
 

KinoMan

Проверенный
Сообщения
20
Симпатии
1
Баллы
3
#11
Куда всчтавляешь? В настройках группы указываешь класс?
  • Другой, использующий своё имя CSS-класса: вставляю userBanner.my и ноль реакции
ели ставить так
.userBanner.my-style
{
color: white;
background-color: green;
}
то применяется а как другие стили ставить
 

Kirill36

Проверенный
Сообщения
52
Симпатии
2
Баллы
8
#15
Приветствую! никто не знает как вывести баннер пользователей картинкой?
 

Unsubdued

Администратор
Сообщения
3.818
Симпатии
8.030
Баллы
266
#16
Kirill36, вместо
Код:
.userBanner.my-style
{
color: white;
background-color: green;
}
написать

Код:
.userBanner.my-style
{
background-image: url (путь до картинки);
}
 

Kirill36

Проверенный
Сообщения
52
Симпатии
2
Баллы
8
#17
Kirill36, вместо
Код:
.userBanner.my-style
{
color: white;
background-color: green;
}
написать

Код:
.userBanner.my-style
{
background-image: url (путь до картинки);
}
Спасибо! Сейчас буду пробовать
[doublepost=1487670753][/doublepost]
Kirill36, вместо
Код:
.userBanner.my-style
{
color: white;
background-color: green;
}
написать

Код:
.userBanner.my-style
{
background-image: url (путь до картинки);
}
Что то не вышло.

upload_2017-2-21_11-52-28.png
[doublepost=1487671058][/doublepost]
Kirill36, вместо
Код:
.userBanner.my-style
{
color: white;
background-color: green;
}
написать

Код:
.userBanner.my-style
{
background-image: url (путь до картинки);
}
Убрал пробел после url, но теперь вот так
upload_2017-2-21_11-57-35.png
 

Skaiman

[SVG]ADD-ONS ™
Разработчик
Сообщения
5.909
Симпатии
5.628
Баллы
266
#19
Там не достаточно указать картинку на фон, приблизительно так должно быть:
Код:
.userBanner.bannerStaff {
    display: block;
    color: rgba(0,0,0,0)!important;
    background: rgba(0,0,0,0) url(@imagePath/xenforo/banner_staff.png) no-repeat center!important;
    border: none!important;
    box-shadow: none!important;
    margin-bottom: 0!important;   
    font-size: 1px;
    height: 40px;
}
Цвет шрифта, прозрачный и размером 1px, что б не видно было, картинка фона не должна повторяться и должна находиться по центру, убираем дефолтные бордюры и тень баннера, указываем высоту, равную высоте картинки.
 

Kirill36

Проверенный
Сообщения
52
Симпатии
2
Баллы
8
#20
Там не достаточно указать картинку на фон, приблизительно так должно быть:
Код:
.userBanner.bannerStaff {
    display: block;
    color: rgba(0,0,0,0)!important;
    background: rgba(0,0,0,0) url(@imagePath/xenforo/banner_staff.png) no-repeat center!important;
    border: none!important;
    box-shadow: none!important;
    margin-bottom: 0!important;  
    font-size: 1px;
    height: 40px;
}
Цвет шрифта, прозрачный и размером 1px, что б не видно было, картинка фона не должна повторяться и должна находиться по центру, убираем дефолтные бордюры и тень баннера, указываем высоту, равную высоте картинки.
Уже близко. Но вот что получилось

upload_2017-2-21_14-4-43.png
 
Вверх Снизу