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

Объявление

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

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

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

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

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

Подробнее

Мийрон

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

Подробнее

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

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

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

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

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

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

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

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



Слайдер форумов в категориях

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

1

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

<a class="tip" id="cover" title="Слайдер форумов в категориях">
  <div id="icon"></div>
  <img src="https://forumupload.ru/uploads/0007/e3/f7/2/151331.gif" class="postimg">
</a>

<div id="cover-block">
Дата: 30.09.2020<br>
Автор: <a href="/profile.php?id=6774" target="_blank">satsana</a><br>
Бесплатный скрипт<br>
Описание: Превращение категорий в горизонтальный слайдер для форумов.
</div>

</div>

<style>
.punbb .topicpost .post-content .spoiler-box {
border: 1px solid #26af33;
background-color: rgba(38,175,51,0.1);
}
.punbb .post-content .spoiler-box > div:hover {background-color: rgba(38,175,51,0.6);}
.punbb .post-content .spoiler-box > div {background-color: rgba(38,175,51,0.3);}
.post-content .spoiler-box > div.visible {background-color: rgba(38,175,51,0.8); color: #fff !important;}
#pun .punbb .post-content hr {border: 3px solid #279933;}
.post-content td {background-color: rgb(0,0,0,0.5) !important;}
.visible .quote-box {background-color: rgba(0,0,0,0.5);}
</style>[/html]

код и описание

Все коды стилей ставятся в Администрирование > Свой стиль или HTML-верх между тегов <style>

Код:
<style>
тут коды
</style>

Код:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.


Скрипт
Скрипт устанавливаем в HTML-низ.

Вариант 1. Прокрутка останавливается при достижении конца:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Вариант 2. Прокрутка по кругу:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.


Настройки стиля
1. Ставим форумы в строчку
Для начала нужно поставить коды, которые позволят "превратить" категорию в слайдер

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

2. Блочная верстка форумов
Затем надо сделать блочную верстку форумов на главной, чтобы поправить отображение форумов, задать их ширину и т.д.

Подробнее о блочной верстке форумов вы можете почитать тут: Стиль разделов форума на главной (MyBB) [Герда]
Там вы найдете ответы на все вопросы про "Украшательства" форумов и как расставить контент ячеек внутри форума-блока.

Вот код, который необходимо поставить для форумов

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

3. Добавляем в категории стрелки

Стрелки вставляются через селекторы .catleft и .catright в заголовках категорий. Если они у вас задействованы (для иконок, картинок или еще чего-то), надо будет что-то придумать.
Также многие стили по умолчанию скрывают catright и catleft. На всякий случай я постаралась подобрать такой код, чтобы они точно отобразились. Но если пользуетесь функцией "Свой стиль", лучше убедиться, что у вас просто нет кодов, скрывающих этот селектор (или найти и удалить их).

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.


Настройки скрипта

var leftMargin = 40;

отступ блока с форумом

var blockWidth = 600;

полная ширина блока (включая отступ)

Изменение начального слайда
Если нужно поменять начальную позицию слайдера для определенных категорий, сожно добавлять такие строки в конец скрипта:

$('.category-10')[0].dataset.start = 1;

Красное - селектор конкретной категории. Как узнать кникальный селектор можно посмотреть здесь: Дизайн отдельных категорий и заголовков категорий
Синее - номер форума, на котором должен открыться слайдер, нумерация начинается с 0
После них скрипту придется нужно переместиться в новое положение слайдов, поэтому добавляем после наших кодов:

Код:
$('.category').each(function() {
  $(this).find('tbody tr').first().css('margin-left', (leftMargin - $(this)[0].dataset.start * blockWidth) + 'px');
});
Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+1

2

Прошу прощения если не увидела в описании, а можно ли сделать чтобы слайдер был для одной конкретной категории?

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

"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

0

3

Automation Baby
да, просто нужно во ВСЕХ кодах (и в скрипте, и в стиле) вместо селектора .category ставить уникальный селектор конкретной категории: Дизайн отдельных категорий и заголовков категорий

ну, и там, где стрелки, нужно дописать его:

.punbb #pun-main .category-1 div.catleft,
.punbb #pun-main .category-1 div.catright {

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

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+1

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

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


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

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