Choose the avatar size on latest. Default value is small (25px). To see the changes applied, refresh the page with ctrl+F5 or cmd+shift+R.
topic avatars size
Choose the avatar size on topics. Default value is 45px. To see the changes applied, refresh the page with ctrl+F5 or cmd+shift+R.
header avatars size
Choose the avatar size on header. Default value is 32px. To see the changes applied, refresh the page with ctrl+F5 or cmd+shift+R.
header height
Choose the height of the header. The choice must be made based on the header_avatars_size + 10px. For example, if the header_avatars_size is set to 90px, the header should be 100px. Default value is 60px.
margin top
Choose the distance in px from the header. Default value is 0px.
avatars border radius
Choose the border-radius of the avatars on the site. The setting will be applied to all avatars, including the one on the header and the one on the user-card. 0% corresponds to a square shape, 50% to a rounded shape. Default value at 50%
mobile avatars size
Choose the avatar size on topics on Mobile. Min value is 45px (default), max value is 80px. To see the changes applied, refresh the page with ctrl+F5 or cmd+shift+R.
Extra details:
latest avatar size changes the avatar size on the /latest page. All the avatars will be visible up to the medium size. From large onwards, only the avatar of the last user who wrote on the topic will be displayed.
header avatar size works well up to the 60px size. For avatars of a larger size, the height of the header must be increased (header height) and consequently, the margin-top that distances the header from the other elements of the page must also increase (margin top).
The position (in height) of the notification bubble (topics and PMs) has remained unchanged. These bubbles will only move horizontally following the avatar size.
Development History
This theme component was written taking inspiration from the guides
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 не подсвечивался вместе с остальным содержимым…
