ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Ищешь чем бы украсить свой форум или сайт к Хэллоуину? 🎃 Мы поможем нарядиться! 🎃

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Портфолио команды » Плиточная вёрстка списка топиков для форума "Кузнечик"


Плиточная вёрстка списка топиков для форума "Кузнечик"

Сообщений 1 страница 1 из 1

1

[html]<link rel="stylesheet" href="https://forumstatic.ru/files/0007/e3/f7/40249.css">
<div id="port-block1" class="saled">

<a class="tip" id="cover" title="Плиточная вёрстка списка топиков для форума Кузнечик">
  <div id="icon"></div>
  <img src="https://forumupload.ru/uploads/0007/e3/f7/6822/240195.jpg" class="postimg">
</a>

<div id="cover-block">
Дата: 14.12.2020<br>
Автор: <a href="https://forumd.ru/profile.php?id=2" target="_blank">Герда</a> & <a href="https://forumd.ru/profile.php?id=6774" target="_blank">satsana</a><br>
Платформа: MyBB<br>
Описание: Плиточная вёрстка списка топиков для форума "Кузнечик"<br>
<a id="store" href="https://domkyznechik.ru/search.php?action=show_recent" target="_blank">Сайт заказчика</a>
</div>

</div>

<div id="port-block2" class="saled">

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Список топиков (дизайн Зимняя ночь)"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/856694.jpg" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Список топиков (дизайн Зимний день)"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/737572.jpg" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Список топиков (дизайн Море)"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/379158.jpg" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Список топиков (дизайн Летняя ночь)"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/415809.jpg" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Список топиков (дизайн Летний день)"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/241126.jpg" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Активные темы (дизайн Зимняя ночь)"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/828539.jpg" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Активные темы (дизайн Море)"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/701268.jpg" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Активные темы (дизайн Зимний день)"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/415736.jpg" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Активные темы (дизайн Летняя ночь)"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/481293.jpg" class="postimg"></a></section>

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Активные темы (дизайн Летний день)"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/962903.jpg" class="postimg"></a></section>

</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]

подробное описание

ВЕРСТКА И СКРИПТЫ
Выполнена плиточная вёрстка списка топиков, активных тем и поиска. Выводится первая картинка из первого сообщения топика (для этого был использован и немного модифицирован вот этот скрипт), название топика, количество ответов и просмотров, аватар и ник автора последнего сообщения, а ещё дата и ссылка на последний пост в теме.

Плитки по цвету адаптированы под 5 разных стилей. Активные темы и темы в поиске отображаются похожим образом, только вместо просмотров, стоит ссылка с названием раздела где находится топик.

Установлена картинка по умолчанию для топиков, где нет изображения в первом сообщении.

Плитки меняют своё положение и адаптируются под разные разрешения экранов, вплоть до мобильных.

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
http://forumstatic.ru/files/0015/1e/ae/64347.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

+2

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Портфолио команды » Плиточная вёрстка списка топиков для форума "Кузнечик"