Никнейм на аватарке

[Rommax]

Всем добра и мира. Прошу перенести тему в нужный раздел если создаю не там .
Хотелось сделать чтобы ник был на аватаре а не под ним. То есть полупрозрачный фон и никнейм пользователя. вот как на втором скрине . Просто тем самым у меня бы был полностью заполненный аватаром блок инфы о пользователе .

 

[Litnat]

В теории:

• Засунуть строку с никнеймом в блок с аватаркой
• Задать аватарке position: relative
• Задать нику position: absolute
• А там дальше подравнивать на своё усмотрение

 

[tnAnGel]

Проще сразу картинку генерировать с ником, а ник удалить с формы. Был тут плагин, который генерирует картинку по первым 2м буквам ника. Вот его за основу можно было бы взять

 

[Skaiman]

.messageUserBlock {
    position: relative;
}
.messageUserBlock a.username {
    position: absolute;
    text-align: center;
    top: 93px; left: 0; bottom: 0; right: 0;
}

изменяй только значение top, это будет отступ сверху

 

[Rommax]

Очень даже ) то что хотел ) добавил код в extra

Только еще момент ...
Можно ли сделать так чтобы если ширина страницы достигает определенного размера то изменения что берутся через extra отменялись ? То есть я не смог разобраться с @media.
Вот что получается

 

[Skaiman]

так попробуй добавить

<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth) {
        .Responsive .messageUserBlock {
            position: relative;
        }
        .Responsive .messageUserBlock a.username {
            position: absolute;
            text-align: left;
            top: 20px; left: 70px; bottom: 0; right: 0;
        }
    }
</xen:if>

можно менять отступ сверху - top и слева - left

 

[Rommax]

Cпасибо )