Вёрстка от Колобдура

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

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


Вы здесь » Вёрстка от Колобдура » По HTML и CSS » Подфорумы и форумы на главной в две колонки не скриптом


Подфорумы и форумы на главной в две колонки не скриптом

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

1

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

Код
Код:
<!-- Подфорумы в две колонки. Версия 2. © Kolobdur -->
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/000e/14/cc/37182.css">
<!-- Настройка подфорумов в две колонки. Версия 2. © Kolobdur -->
<style>
/***** Убираем модераторов из форума родителя и подфорума *****/
#pun-index #pun-main .parent .modlist, #pun-index #pun-main .isub .modlist  {
  display: none !important;
}

/***** Отступ подфорумов от форума родителя *****/
#pun-index #pun-main .parent {margin-bottom: -10px;}

/***** Размер шрифта названия подфорума (можно добавить свой цвет) *****/
#pun-index.punbb #pun-main .isub td h3 a {font-size: 1em;}

/***** Иконка сообщений и ее размер *****/
#pun-index #pun-main .isub .tcr:after, 
#pun-index #pun-main .isub .tcr a:before, 
#pun-index #pun-main .isub.inew .tcr a:before {
  content: '\2709';
  font-size: 14px;
}

/***** Цвет иконок *****/
/* Старые сообщения */
#pun-index #pun-main .isub .tcr:after {color: green;}

/* Новые сообщения */
#pun-index #pun-main .isub.inew .tcr a:before {color: red;}

/* Нет сообщений */
#pun-index #pun-main .isub .tcr a:before {color: #557fae;}

/***** Цвет, фон, шрифт всплывающих сообщений *****/
#pun-index #pun-main .isub .tcl:hover ~ .tc2, 
#pun-index #pun-main .isub .tcl:hover ~ .tc3,
#pun-index #pun-main .isub .tcr a:after {
  background: #eee;
  font-size: 12px;
  color: black;
  font-family: serif, use-lang-def;
  font-weight: 400;
}

/***** Бордюры (для большинства дизайнов нужны правки) *****/
/* Убираем бордюры с ячеек */
#pun #pun-index #pun-main tr > td {border-bottom: 0 !important;border: 0;}

/* Бордюр у форумов снизу */
#pun-index #pun-main .hasicon tr:not(.parent):not(.isub) {
  border-bottom: solid 1px #eee;
}

/* Бордюр снизу подфорумов */
#pun-index #pun-main .isub + tr:not(.isub) {
  padding-top: 1px;
  margin-top: 10px;
  border-top: solid 1px #eee;
}

/***** Убрать для стиля Classic, Cobalt, EpicBlue, Lithium *****/
#pun-index #pun-main .hasicon tr td {padding: 0;}

/***** Перенести нужный подфорум в левую колонку *****/
#pun-index #pun-main #forum_f500.alt2[data-parent] {grid-column: 2 / 3;}
</style>

Ставить НТМЛ верх. Включить в Администрирование - Настройки - Режим отображения подфорумов: Подробно на главной..
Настройки вынес из основного кода и подписал что за что отвечают.

Описание и недостатки (желательно прочитать)

- Ширина колонок определяется самым длинным названием подфорума в данной Категории (смотри скриншоты).

- Из-за чередования класса alt подфорумы могут становится не по порядку и слева оставлять пустое место, пример:

https://forumupload.ru/uploads/0000/14/1c/23723/323519.png

Это лечится правкой для конкретного форума (правка стоит по умолчанию в настройках внизу):

/***** Перенести нужный подфорум в левую колонку *****/
#pun-index #pun-main #forum_f500.alt2[data-parent] {grid-column: 2 / 3;}

Где 500 - это ID данного подфорума. И получается вот так:

https://forumupload.ru/uploads/0000/14/1c/23723/624274.png

- Тестировалось на ряде стандартных дизайнов, примерно на первых 15, основная подгонка была под Community Blue. Есть проблемы с бордюром, поэтому бордюры вынесены в настройки. Вероятно с нестандартными дизайнами могут быть баги.

- Иконка - не картинка, а код мнемоники, можно поставить свой вариант (использовать CSS-код) - вынесено в настройки. Цвета тоже можно поставить свои, тоже вынесено в настройки.

- Описание в подфорумах не делать - поломает весь дизайн.

Скриншоты

https://forumupload.ru/uploads/0000/14/1c/23723/478445.png
https://forumupload.ru/uploads/0000/14/1c/23723/883404.png
https://i.imgur.com/9k6Du7O.png
https://i.imgur.com/gGnjKgW.png
https://i.imgur.com/f9cOUAz.png

Форумы в две колонки на главной странице.

0

2

Форумы в две колонки на главной. © Kolobdur

Ставить НТМЛ верх. Тестировалось со стандартными дизайнами. Адаптивность со стандартными дизайнами примерно 97-99%.

Не использовать совместно с кодом из первого поста: "Подфорумы в две колонки на главной странице". Для него будет другой код или правки.

Код
Код:
<!-- Форумы в две колонки на главной. © Kolobdur -->
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/000e/14/cc/87792.css">
<!-- Настройки форумов в две колонки на главной. © Kolobdur -->
<style>
@media screen and (min-width: 800px) {
/* Раскомментировать, если надо спрятать верхний бордюр у второго форума 
#pun-index #pun-main tbody tr:nth-child(2) td {border-top: none 0 transparent;}
*/

/* Раскомментировать если надо уменьшить thead
#pun-index #pun-main thead tr {
  grid-template-rows: 0;
  z-index: -1;
}
*/

/* Фон, цвет текста, размер текста, шрифт всплывающего при наведении блока Тем Сообщений */
#pun #pun-index #pun-main td.tcl:hover ~ .tc2, #pun #pun-index #pun-main td.tcl:hover ~ .tc3 {  
  background: #eee;
  font-size: 12px;
  color: black;
  font-family: serif, use-lang-def;
  font-weight: 400;
}
}
</style>
Скриншоты

https://forumupload.ru/uploads/0000/14/1c/23723/774838.png
https://forumupload.ru/uploads/0000/14/1c/23723/308846.png
https://forumupload.ru/uploads/0000/14/1c/23723/675202.png
https://forumupload.ru/uploads/0000/14/1c/23723/431904.png
https://forumupload.ru/uploads/0000/14/1c/23723/562932.png
https://forumupload.ru/uploads/0000/14/1c/23723/699730.png
https://forumupload.ru/uploads/0000/14/1c/23723/772479.png

0


Вы здесь » Вёрстка от Колобдура » По HTML и CSS » Подфорумы и форумы на главной в две колонки не скриптом