XF 2.0 userBanner под аваторкой

[DREDD]

Прошу извинения за прошлую тему у Hope.

И так, мне нужно сделать, вот так вот: .

Буду благодарен за подробное объяснение, т.к. я в этом деле новичок. Заранее спасибо.

 

[MxR]

В Extra.less

.curatorBanner {
    width:ЖЕЛАЕМАЯ_ШИРИНА{ИЛИ ПРОСТО 100%};
    background-color:#1c86ee;
    border-radius:5px;
    padding: 8px 0px 8px 0px;
    color:white;
}

В стиле баннера(Редактирование групп) > Другой, использующий своё имя CSS-класса > Помещаем наш класс curatorBanner
Стоит добавить к Классу если вас интересует тень.

-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);

Так это был мой код, и моя вариация как это сделать. Но по аватарке которую вы сюда закинули я нашел реальный форум и данного пользователя.
На том форуме это реализовано вот так:

.userBanner {
    display: block;
    height: 30px;
    margin: 5px 0;
    line-height: 30px;
    border-radius: 2px;
    color: #f5f5f5;
    text-align: center;
    font-weight: 600;
}

Код выше прописывается один раз, он задает форуму и стиль.
А дальше вы уже для каждой группы прописываете цвет:

.curatorBanner {
    background-color:#1c86ee;
}

 

[Mirovinger]

Less для кастомных баннеров групп

 

[nictic123]

MxR, подскажите, пожалуйста, а как бы поднять немного текст?

Использую этот код

.userBanner {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
border-radius: 2px;
color: #f5f5f5;
text-align: center;
font-weight: 600;
}

 

[Skaiman]

line-height

А лучше не делать фиксированную высоту, только отступами, padding