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

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

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

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

Предложения

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

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



Переключатель категорий вкладками

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

1

Переключатель Категорий вкладками
Скрипт добавляет кнопки для отображения одной категории разделов.
http://gerda.moy.su/_bd/0/42.png

Автор: Deff
Платформа: Mybb

Некая альтернатива "Подфорумам" для сокращения длины Главной страницы

Установка:
В самой нижней Категории создаём форум, видный на чтение всем группам пользователей и гостям
В Описание созданного форума вставляем следующий код...

для горизонтального переключения:
http://s7.uploads.ru/t/NLqxY.png

Код:
<style type="text/css">
.punbb #pun-cattab >ul,
.punbb #pun-cattab {
  border:red solid 0px;  
  padding:0;
  margin:0;
}
.punbb .category{ 
  margin-top: 0;
}
.punbb li.cattab {
  display: inline-block;
  position:relative;
  white-space: nowrap;
  padding:0;
  margin:0 -14px 0 0;
}
.punbb li.cattab a {
  display: inline-block;
  padding:10px 25px 10px 20px;
  font: normal normal 700 12.76px/normal Tahoma;
  border-top-right-radius:3px;  
  border-top-left-radius:15px;
  background-color:#8B8B8B;
  box-shadow:inset 2px 2px 10px #363636;
  color:#fff;
}
.punbb li.cattab a.active {
  background-color:#fff;
  box-shadow:inset 0 0 10px #7E7E7E, 2px 2px 3px #7E7E7E;
  color:#235A85;
}
.punbb li.cattab a:hover {
  color:#FC8686;
  text-shadow:1px 1px 0px #5D5D5D,0 0 5px #fff;
}
.punbb li.cattab a.new:before{
  font: normal normal 700 10px/normal Tahoma;
  position:absolute;
  right: 18px;
  top: 0;
  content: "New";
  color:#9DF2FF;
  text-shadow:1px 1px 0 #000;
}
.punbb li.cattab:last-child a.new:before{
  right: 8px;
}
</style>
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/58277.js"></script>

или этот для вертикального переключателя:
(см. скриншот 1)

Код:
<style type="text/css">
.punbb #pun-cattab >ul{
  border:transparent none 0px;  
}
.punbb #pun-cattab {
  background-color:#92B1E3;
  border:red solid 0px;
  width:auto;
  padding:0;
  margin:0;
  left:0;
  position:fixed;
  top:10px;
}
.punbb #pun-cattab > ul {
  border-top-right-radius:15px;
  border:transparent none 0!important;
  font: normal normal 700 17px/normal Georgia;
  background-color:#5A98FC;
}
.punbb #pun-cattab > ul:before{
  content: "Разделы";
  display:block;
  text-align:center;
  padding:8px;
  text-shadow:1px 1px 1px #000;
  color:#5DC4FF;
}

.punbb .category{ 
  margin-top: 0;
}
.punbb li.cattab {
  display: block;
  position:relative;
  padding:0;
  margin:1px 0;
}
.punbb li.cattab a {
  width:100%;
  max-width:170px;
  white-space: pre-wrap!important;
  word-wrap: break-word;
  word-break:break-all;
  display: inline-block;
  padding:10px 15px;
  font: normal normal 700 12.76px/normal Tahoma;
  border-radius:3px;  
  background-color: #5A98FC;
  box-shadow:inset 2px 2px 10px #363636;
  color:#fff;
}
.punbb li.cattab a.active {
  background-color:#fff;
  box-shadow:inset 0 0 10px #7E7E7E, 2px 2px 3px #7E7E7E;
  color:#235A85;
}
.punbb li.cattab a:hover {
  font: normal normal 700 12.76px/normal Tahoma;
  color:#FC8686;
  text-shadow:1px 1px 0px #5D5D5D,0 0 5px #fff;
}
.punbb li.cattab a.new:before{
  font: normal normal 700 10px/normal Tahoma;
  position:absolute;
  right: 7px;
  top:2px;
  content: "New";
  color:#9DF2FF;
  text-shadow:1px 1px 0 #000;
}
</style>
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/58277.js"></script>

Оформление можно подредактировать в стиле устанавливаемого кода.
Первый вариант более подходит для малого числа категорий, либо при "резиновом" сайте во всю ширину экрана.
Второй - для большого числа категорий или при фиксированной ширине полотна форума.

Добавлена Иконка для категорий с новыми сообщениями

Для теста или корректной работы перед установкой необходимо убрать "Скрипт сворачивания категорий", если он есть в наличии!


Вариант 3: Вертикальное меню для "резиновых" форумов. (Актуально при кол-ве категорий более 6)
http://s7.uploads.ru/t/KC0NM.png

Код:
<style type="text/css">
#pun {position: static;}
.punbb{
 width:auto;
 margin:0 auto auto 200px;
}
.punbb #pun-cattab >ul{
  border:transparent none 0px;  
}
.punbb #pun-cattab {
  background-color:#92B1E3;
  border:red solid 0px;
  width:auto;
  padding:0;
  margin:0;
  left:0;
  position:fixed;
  top:23%;
}
.punbb #pun-cattab > ul {
  border-top-right-radius:15px;
  border:transparent none 0!important;
  font: normal normal 700 17px/normal Georgia;
  background-color:#5A98FC;
}
.punbb #pun-cattab > ul:before{
  content: "Разделы";
  display:block;
  text-align:center;
  padding:8px;
  text-shadow:1px 1px 1px #000;
  color:#5DC4FF;
}

.punbb .category{ 
  margin-top: 0;
}
.punbb li.cattab {
  display: block;
  position:relative;
  padding:0;
  margin:1px 0;
}
.punbb li.cattab a {
  width:100%;
  max-width:170px;
  white-space: pre-wrap!important;
  word-wrap: break-word;
  word-break:break-all;
  display: inline-block;
  padding:10px 15px;
  font: normal normal 700 12.76px/normal Tahoma;
  border-radius:3px;  
  background-color: #5A98FC;
  box-shadow:inset 2px 2px 10px #363636;
  color:#fff;
}
.punbb li.cattab a.active {
  background-color:#fff;
  box-shadow:inset 0 0 10px #7E7E7E, 2px 2px 3px #7E7E7E;
  color:#235A85;
}
.punbb li.cattab a:hover {
  font: normal normal 700 12.76px/normal Tahoma;
  color:#FC8686;
  text-shadow:1px 1px 0px #5D5D5D,0 0 5px #fff;
}
.punbb li.cattab a.new:before{
  font: normal normal 700 10px/normal Tahoma;
  position:absolute;
  right: 7px;
  top:2px;
  content: "New";
  color:#9DF2FF;
  text-shadow:1px 1px 0 #000;
}
</style>
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/58277.js"></script>

Отступ от верха регулируется тут (можно ставить в % или px):

.punbb #pun-cattab {
  background-color:#92B1E3;
  width:auto;
  padding:0;
  margin:0;
  left:0;
  position:fixed;
  top:23%;
}

Совет: Удобней и симпатичней делать меньшее число категорий с б'ольшим количеством форумов, т.е вкладки категорий должны носить объединяющее название для группы форумов.
Имхо, смысла делать одну категорию на один форум - нет!

Отредактировано Герда (17.01.2014 00:00:11)

+1

2

Герда
Я на тестовом форуме  установил первый скрипт (для горизонтальных вкладок ).
Не могли бы Вы пояснить как настраивать цвета для вкладок (какой код за цвет какого компонента отвечает)?

0

3

Бармалей
В коде стиля ищем этот блок и изменяем цвета:

.punbb li.cattab a {
display: inline-block;
padding: 10px 25px 10px 20px; /*внутренние отступы*/
font: normal normal 700 12.76px/normal Tahoma;
border-top-right-radius: 3px; border-top-left-radius: 15px; /*скругленные углы*/
background-color: #8B8B8B; /*цвет*/
box-shadow: inset 2px 2px 10px #363636; /*тень*/
color: #fff; /*цвет текста*/
}

Для нажатых вкладок:

.punbb li.cattab a.active {
background-color: #fff; /*фон*/
box-shadow: inset 0 0 10px #7E7E7E, 2px 2px 3px #7E7E7E; /*тень*/
color: #235A85; /*цвет текста*/
}

.punbb li.cattab a:hover {
color: #FC8686; /*цвет при наведении*/
text-shadow: 1px 1px 0px #5D5D5D,0 0 5px #fff; /*тень*/
}

http://uploads.ru/i/K/Z/U/KZUwI.gif

+2

4

Бармалей написал(а):

Я на тестовом форуме  установил первый скрипт (для горизонтальных вкладок ).

Число категорий лучше сокращать, делая объединяющее название категорий для нескольких форумов (Будет симпатичней и расположение кнопок)
Ибо категория с единственным форумом смотриться не АЙС(Смысла совать один форум в одну категорию ? Теряется объединяющий смысл категорий), и вкладки спецом для длинных категорий, ибо короткие не центрируюся по верхнему краю

Отредактировано Deff (17.01.2014 14:09:56)

0

5

Deff
Это у меня тестовый форум, который практически не содержит форумов в категориях. Реальный форум  Proshowproducer.ru в каждой категории имеет по нескольку форумов. О реструктуризации думаем, но пjка такой вариант, т.к. все же лучше больше категорий, чем путаница и сваливание всего в одну кучу. Тем более, что вкладки и в двух строках хорошо смотрятся, за что Вам отдельное спасибо.

0

6

Бармалей
Простейшая Подкраска В Cкрипте:

Код:
<style type="text/css">
.punbb #pun-cattab >ul,
.punbb #pun-cattab {
  border:red solid 0px;  
  padding:0;
  margin:0;
}
.punbb .category{ 
  margin-top: 0;
}
.punbb li.cattab {
  display: inline-block;
  position:relative;
  white-space: nowrap;
  padding:0;
  margin:0 -14px 0 0;
}
.punbb li.cattab a {
  display: inline-block;
  padding:10px 25px 10px 20px;
  font: normal normal 700 12.76px/normal Tahoma;
  border-top-right-radius:3px;  
  border-top-left-radius:15px;
  background-color:#008CC8;
  box-shadow:inset 2px 2px 10px #363636;
  color:#fff;
}
.punbb li.cattab a.active {
  background-color:#fff;
  box-shadow:inset 0 0 10px #7E7E7E, 2px 2px 3px #7E7E7E;
  color:#235A85;
}
.punbb li.cattab a:hover {
  color:#FC8686;
  text-shadow:1px 1px 0px #5D5D5D,0 0 5px #fff;
}
.punbb li.cattab a.new:before{
  font: normal normal 700 10px/normal Tahoma;
  position:absolute;
  right: 18px;
  top: 0;
  content: "New";
  color:#9DF2FF;
  text-shadow:1px 1px 0 #000;
}
.punbb li.cattab:last-child a.new:before{
  right: 8px;
}
</style>
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/58277.js"></script>

Заменил единственный пункт

.punbb li.cattab a {
  display: inline-block;
  padding:10px 25px 10px 20px;
  font: normal normal 700 12.76px/normal Tahoma;
  border-top-right-radius:3px; 
  border-top-left-radius:15px;
  background-color:#008CC8;
  box-shadow:inset 2px 2px 10px #363636;
  color:#fff;
}

http://s7.uploads.ru/Q4sZ3.png

Отредактировано Deff (17.01.2014 14:24:07)

+1

7

Скрипт хороший, но было бы замечательно, если бы была еще и кнопка "Весь форум", чтобы видно было сразу все и пользователи могли выбирать...

0

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

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


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

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