Среда , 14 Ноябрь 2018
Home / Vbulletin 4 / Vbulletin 4 | Как разделить форум на 2 колонки используя только css

Vbulletin 4 | Как разделить форум на 2 колонки используя только css

Иногда просматривая некоторые сайты построенные на Vbulletin 4, можно увидеть, что на некоторых форумах (особенно западных) идет разделения списков разделов в 2 колонки. Где то используются плагины, где то используется правка шаблонов. Мы же с вами попробуем сделать это при помощи css. Не используя ни плагинов не чего иного. Может это и не правильно, так как быстро не отключить если не понравилось, но с другой стороны, меньше плагинов — меньше дырок.

Автор: Алексей Раков

Я не собираюсь учить вас CSS в этой статье! Вы должны все же иметь некоторые базовые знания о том, что такое каскадные таблицы стилей,чтобы вы могли изменить это для любого стиля.

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

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

Что нужно сделать?

Откройте additional.css шаблон вашего стиля и добавьте код приведенный ниже в самый низ, после всех определений, если вы не понимаете почему, прочтите документацию по css. В будующем вам будут полезны любые знания.

.forumhead + .childforum .L2:first-child .forumrow, .forumhead + .L2 .forumrow {
  border-top: 0;
}
.forumrow .table {
  height: 100px;
}
ol.childforum {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
}
.childforum li.forumbit_post {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
  clear:none;
}
#forums .L1 .L2 {
  clear:none;
}
.forumbit_post .forumrow .forumlastpost {
  clear:both;
  width:95%;
}
.forumbit_post .forumlastpost .lastpostby {
  display: block;
  float: left;
}
.forumbit_post .forumlastpost .lastpostdate {
  display: block;
  float: right;
}
.forumbit_post .forumlastpost .lastposttitle {
  display: block;
  float: left;
}
.forumbit_post .foruminfo {
  clear:right;
  float:left;
  min-width:50%;
  width:70%;
}
.forumbit_post .forumstats, .forumbit_post .forumstats_2 {
  width:20%;
}

Эта концепция так же может быть применена к любому из ваших стилей. Например вы можете изминить список субфорумов на главной странице, добавив всего лишь несколько строк:

.subforums ol.subforumlist  {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
}
.subforumlist li.subforum {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
  clear:none;
}
/* to remove the commas */
.commalist li.subforum:after {
    content:"";
}

Ну вот, как бы и все, пробуйте экспериментируйте и наслаждайтесь.

Рейтинг статьи

0%

Рейтинг

Поставьте оценку данному материалу

User Rating: 5 ( 1 votes)

About artscripts

Check Also

восстановление vbulletin часть 6

Взломали форум — начинаем восстанавливать (Часть 6)

Настала время заменить все файлы Vbulletin форума новой копией. Для этого скачаем новый zip архив …

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.