Первый
Стандартные стили форумов от сервиса были разработаны более 15 лет назад, на тот момент адаптивность не была предусмотрена. Мобильный стиль был создан и добавлен в сервис около 10 лет назад как универсальное решение для работоспособности старых стилей на узких экранах мобильных устройств, стремительно набирающих популярность в тот период. К сожалению, пришлось прибегнуть к использованию "костылей", дабы мобильный стиль отображался максимально естественно на старых стилях от сервиса, что привело к проблемам, например, совместная настройка с собственным стилем оформления стала весьма затруднительной. Поэтому простыми методами что-либо изменить в мобильном стиле оказывается не простой задачей. Администраторы форумов, при разработке собственных стилей оформления, предпочитают не использовать стандартный мобильный стиль, а разработать адаптивность на этапе создания собственного стиля. Инструкций, как сделать свой мобильный стиль, к сожалению, не существует, поскольку это индивидуальное решение под каждый стиль. Для его создания необходимо обладать хотя бы базовыми знаниями в CSS.
Иконки в мобильной версии выбраны не случайно: они позволяют существенно сэкономить пространство на устройствах с экранами малого размера. Иконки были подобраны с учётом интуитивного восприятия, опираясь на опыт популярных сайтов того времени, использующих аналогичные иконки. Использование текста вместе с иконками невозможно по простой причине — текст будет выходить за пределы видимой области, что нарушит удобство отображения до такого состояния:
(и это без длиннющих слов Сообщения и Администрирование)
Некоторые администраторы форумов создают мобильный стиль на основе существующего, либо заказывают разработку и интеграцию индивидуального мобильного стиля у дизайнеров.
Однако, есть возможность заменить спрайт с иконками на собственный. Сам спрайт с иконками выглядит следующим образом:
Спрайт состоит из нескольких изображений, помещенных в одно. Каждая из иконок размерами примерно 48 x 48 (px).
Для замены стандартного спрайта на собственный есть такой код (вставлять в Администрирование - Формы, поле HTML-верх):
<style>
@media screen and (max-width: 540px) {
#pun-ulinks, #pun-navlinks .container li a, #pun-navlinks .container li a:hover {
background-image: url(url_на_ваш_спрайт) !important;
}
}
</style>
Для сборки спрайта со своими иконками необходимо создать (собрать) его через любой графический редактор (Photoshop, GIMP, Inkscape, CorelDraw, etc).
Или каждую иконку отдельно. К примеру, для замены иконки Главной страницы форума:
<style>
@media screen and (max-width: 540px) {
#pun-navlinks #navindex a, #pun-navlinks #navindex a:hover {
background-image: url(https://forumupload.ru/uploads/0000/14/1c/15830/427500.png) !important;
background-position: center !important;
background-size: contain;
}
}
</style>
Для замены иконки страницы Участников:
<style>
@media screen and (max-width: 540px) {
#pun-navlinks #navuserlist a, #pun-navlinks #navuserlist a:hover {
background-image: url(https://forumupload.ru/uploads/0000/14/1c/15830/451762.png) !important;
background-position: center !important;
background-size: contain;
}
}
</style>
Для замены иконки страницы Регистрации будет такой код:
<style>
@media screen and (max-width: 540px) {
#pun-navlinks #navregister a, #pun-navlinks #navregister a:hover {
background-image: url(адрес_на_картинку_иконки) !important;
background-position: center !important;
background-size: contain;
}
}
<style>
(тут уже ищите подходящую иконку самостоятельно)
и так далее.
