Акция! Дизайн «MyBB Technical Support»
[html]<link rel="stylesheet" href="http://gerda.moy.su/MyBB_files/important/rus-port.css">
<div id="port-block1" class="saled">
<a class="tip" id="cover" title="Адаптивный дизайн для форума мобильной игры Кузнечик">
<div id="icon"></div>
<img src="http://gerda.moy.su/MyBB_files/FD/Kyz/Kyz_COVER.jpg" class="postimg">
</a>
<div id="cover-block">
Дата: 05.2020<br>
Автор: <a href="/profile.php?id=6784" target="_blank">Bruksa</a> & <a href="/profile.php?id=6774" target="_blank">satsana</a><br>
Описание: Адаптивный дизайн для форума мобильной игры Кузнечик<br>
<a id="store" href="http://domkyznechik.ru/" target="_blank">Сайт заказчика</a>
</div>
</div>
<div id="port-block2" class="saled">
<a class="tip" title="Список тем: светлый дизайн"><img src="http://gerda.moy.su/MyBB_files/FD/Kyz/Kyz_1.jpg" class="postimg"></a>
<a class="tip" title="Список тем: темный дизайн"><img src="http://gerda.moy.su/MyBB_files/FD/Kyz/Kyz_3.jpg" class="postimg"></a>
<a class="tip" title="Список тем: голубой дизайн"><img src="http://gerda.moy.su/MyBB_files/FD/Kyz/Kyz_4.jpg" class="postimg"></a>
<a class="tip" title="Мобильное отображение списка тем: светлый дизайн"><img src="http://gerda.moy.su/MyBB_files/FD/Kyz/Kyz_5.jpg" class="postimg"></a>
<a class="tip" title="Мобильное отображение списка тем: темный дизайн"><img src="http://gerda.moy.su/MyBB_files/FD/Kyz/Kyz_6.jpg" class="postimg"></a>
<a class="tip" title="Мобильное отображение списка тем: голубой дизайн"><img src="http://gerda.moy.su/MyBB_files/FD/Kyz/Kyz_7.jpg" class="postimg"></a>
<a class="tip" title="Страница топика: светлый дизайн"><img src="http://gerda.moy.su/MyBB_files/FD/Kyz/Kyz_8.jpg" class="postimg"></a>
<a class="tip" title="Страница топика: темный дизайн"><img src="http://gerda.moy.su/MyBB_files/FD/Kyz/Kyz_9.jpg" class="postimg"></a>
<a class="tip" title="Страница топика: голубой дизайн"><img src="http://gerda.moy.su/MyBB_files/FD/Kyz/Kyz_10.jpg" class="postimg"></a>
</div>
<style>
.punbb .topicpost .post-content .spoiler-box {
border: 1px solid #e63737;
background-color: rgba(230,55,55,0.1);
}
.punbb .post-content .spoiler-box > div:hover {background-color: rgba(230,55,55,0.6);}
.punbb .post-content .spoiler-box > div {background-color: rgba(230,55,55,0.3);}
.post-content .spoiler-box > div.visible {background-color: rgba(230,55,55,0.8); color: #fff !important;}
</style>[/html]
ИДЕЯ ПРОЕКТА И ГРАФИКА
Дизайн разрабатывался для форума, посвященного мобильной игре "Загадочный дом".
По идеям заказчика движок форума был полностью переработан под мобильные устройства и планшеты, чтобы интерфейсом форума было удобно пользоваться игрокам мобильного приложения.Разработан макет интерфейса, удобный для пользователей мобильных устройств. Создано оформление форума в трех цветовых решениях: светлый, темный и "морской".
ВЕРСТКА И СКРИПТЫ
Код дизайна адаптивный на 4 варианта ширины монитора.Главная страница форума представляет собой только логотип и слайдер.
Переключения по разделам (форумам) осуществляется при помощи индивидуально разработанного слайдера, отображающегося на всех страницах форума.
Слайдер автоматически создает новые слайды при добавлении новых разделов форума и отображает количество новых непрочитанных сообщений в разделе.
Слайдер адаптирован под планшеты: слайды можно листать не только стрелочками, но ещё и движением пальца.
Также слайдер имеет опцию кастомизации фоновой картинки.Создано индивидуальное меню, работающее в том числе и в админке.
Стили форума переключаются при помощи индивидуально разработанного скрипта, добавляющего новые классы стилизации - таким образом, в отличие от стандартных для форумов mybb переключателей, не требуется хранить отдельные файлы стилей для других дизайнов, и любые правки производятся просто и быстро.Создан виджет отображения последнего сообщения на форуме с выводом аватарки автора (ссылающейся на профиль), индикатором онлайн автора сообщения, ссылкой на сообщение и выводом содержимого последнего сообщения.
По клику на строчку топика в списке тем происходит переход к последнему сообщению темы, что удобно для пользователей мобильных устройств.
