Выберите размер аватара на странице latest. Значение по умолчанию — small (25px). Чтобы увидеть изменения, обновите страницу, нажав ctrl+F5 или cmd+shift+R.
topic avatars size
Выберите размер аватаров в темах. Значение по умолчанию — 45px. Чтобы увидеть изменения, обновите страницу, нажав ctrl+F5 или cmd+shift+R.
header avatars size
Выберите размер аватаров в заголовке. Значение по умолчанию — 32px. Чтобы увидеть изменения, обновите страницу, нажав ctrl+F5 или cmd+shift+R.
header height
Выберите высоту заголовка. Выбор должен основываться на значении header_avatars_size + 10px. Например, если header_avatars_size установлен в 90px, высота заголовка должна быть 100px. Значение по умолчанию — 60px.
margin top
Выберите расстояние в пикселях от заголовка. Значение по умолчанию — 0px.
avatars border radius
Выберите border-radius аватаров на сайте. Настройка применяется ко всем аватарам, включая аватар в заголовке и аватар в карточке пользователя. 0% соответствует квадратной форме, 50% — округлой. Значение по умолчанию — 50%.
mobile avatars size
Выберите размер аватаров в темах на мобильных устройствах. Минимальное значение — 45px (по умолчанию), максимальное — 80px. Чтобы увидеть изменения, обновите страницу, нажав ctrl+F5 или cmd+shift+R.
Дополнительные сведения:
latest avatar size изменяет размер аватара на странице /latest. Все аватары будут отображаться до размера medium. Начиная с large, будет отображаться только аватар последнего пользователя, написавшего в теме.
header avatar size хорошо работает до размера 60px. Для аватаров большего размера необходимо увеличить высоту заголовка (header height) и, соответственно, увеличить margin top, который определяет расстояние от заголовка до других элементов страницы.
Позиция (по высоте) пузырька уведомлений (темы и ЛС) осталась без изменений. Эти пузырьки будут перемещаться только горизонтально в зависимости от размера аватара.
История разработки
Этот компонент темы был написан с вдохновением от руководств
How would I go about changing the size of the topic avatar on mobile with this? 80px looks pretty good on desktop, but obnoxious on mobile. I tried changing .topic-avatar width but it just shifts the text and the avatar stays the same.
Очень круто! Жаль, что нельзя установить размер аватара темы на 53
Также относится ли это к аватарам в div-элементе topic-poster, который встречается в некоторых раскладках категорий на главной странице? Похоже, что нет, но было бы здорово, если бы это работало.
@dax Я обнаружил небольшую проблему, которая конфликтует с плагином Quick Messages.
Следующий CSS-код также затрагивает значок уведомлений плагина Quick Messages:
.d-header-icons .unread-private-messages {
right: auto;
left: -10%; /* <--- это и есть причина */
}
Может быть, добавить какой-нибудь элемент #… к CSS-селектору?
Спасибо, Даниэла, у меня есть ещё одно предложение. Было бы здорово, если бы была возможность оставить аватарки ответов включёнными для размеров large или extra_large, чтобы я мог уменьшить их размер через CSS. Или же добавить опцию для уменьшения размера аватарок ответов в самом плагине. Я пытаюсь добиться этого, но, конечно, увеличенная аватарка получается размытой из-за масштабирования аватарки среднего размера.
@Dax Единственная проблема, которую я сейчас замечаю, касается заголовка, который имеет более темный цвет. При наведении курсора цвет меняется на белый, что отлично работает на кнопке поиска и в гамбургер-меню, но когда аватар установлен на немного больший размер, область наведения становится меньше самого аватара. Подскажите, как это исправить?
Отличный компонент.
Он позволяет легко управлять размером и пропорциями вашего аватара, не изменяя CSS вашей темы (что может вызвать проблемы при обновлении темы).
@dax Возможно, я не очень хорошо объяснил. Речь идет не о цвете, а о размере контейнера. Если навести курсор на свой значок аватара в правом верхнем углу страницы здесь, на meta, появится цветной квадрат с свойством :hover, и этот квадрат больше, чем сам аватар.
Однако, если я увеличу аватар с помощью этого плагина, размер квадрата :hover становится меньше, чем аватар, и это выглядит немного странно.
При изменении высоты этого div-элемента необходимо также переместить два других значка. По этой причине я предпочёл не делать этого. Пока я просто делаю цвет div-элемента прозрачным при наведении курсора.
Кстати, мне удалось добиться довольно эффектного результата в CSS, добавив состояние :hover для аватара (белая рамка). Теперь осталось только сделать так, чтобы фон элемента li не подсвечивался вместе с остальным содержимым…
Хостится у нас? Компоненты тем доступны для использования в наших планах Standard, Business и Enterprise.
