Современный облачный хостинг провайдер | Aéza
Контакты ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430
Разделы форума в виде баннеров

Разделы форума в виде баннеров

Обзор FAQ Обновления (1) Отзывы (1) Обсуждение
Maybebaby

Maybebaby

Проверенные
Сообщения
26
Реакции
39
Баллы
5,510
Пользователь Maybebaby разместил новый ресурс:

Разделы форума в виде баннеров - Отображение разделов в виде баннеров на главной странице форума

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

Итак, идем по пути Внешний вид - Шаблоны, и открываем шаблон EXTRA.css.

Добавляем туда такой код:
Код: 
/* Category-bunners */
#XenForo .nodeList .node.level_2 .nodeControls {
    display: none;
}
.category...
Нажмите для раскрытия...

Узнать больше об этом ресурсе...
 
Пользователь Maybebaby обновил ресурс Разделы форума в виде баннеров новой записью:

Перенос последних сообщений вниз

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

Код: 
/* Category-bunners */
#XenForo .nodeList .node.level_2 .nodeControls {
    display: none;
}
.category .nodeList .node.level_2 {
    float: left;
    width: 50%;
}
.category .nodeList .node.level_2:nth-child(2n+1) {
    clear: left;
}
.nodeList {
}
.nodeList:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.category .nodeList...
Нажмите для раскрытия...

Узнать больше об этом обновлении...
 
Предложил бы в полный размер скрины вывести в описании модификации, а описание и доп картинки перенести в закладку F.A.Q. имо так было бы удобнее)
Можно к обновлению картинку?)
 
Mercurial написал(а):
Предложил бы в полный размер скрины вывести в описании модификации, а описание и доп картинки перенести в закладку F.A.Q. имо так было бы удобнее)
Можно к обновлению картинку?)
Нажмите для раскрытия...
А есть же к обновлению картиночка вот тут
 
  • Мне нравится
Реакции: Hope
видать не доглядел) сорри
 
Mercurial написал(а):
видать не доглядел) сорри
Нажмите для раскрытия...
Ничего) Сделала картинки побольше, как вы порекомендовали. Дабы не посчитали за флуд, маленький совет-чит:
Чтобы увеличить или уменьшить высоту "баннеров" правим значение "25" тут:

Код: 
#forums .node.level_2 .nodeText {
    margin: 10px 10px 25px 20px;
    position: relative;
}
 
А как можно сделать чтобы в 3 колонки отображалось а не в 2 ?
 
#forums .category .level_2 .nodeInfo {
  1. border-bottom: 10px solid rgb(255, 255, 255); - 10 замените на 1
  2. border-left: 1px solid rgb(255, 255, 255)
Относительно
upload_2015-10-14_10-4-25.png

.nodeList .node_10 .forumNodeInfo {
  1. background: url(
    У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация
    ) no-repeat; в - repeat
.node .nodeList li:nth-child(odd) {
  1. clear: left;
  2. padding-right: 5px; пробуйте заменить на 0.
}
upload_2015-10-14_10-11-22.png

И вообще не айс получается с уже добавленными изменениями если брать уменьшенный вариант стиля ) Я тут сам долго мучился с ним .
upload_2015-10-14_10-8-7.png
 
Последнее редактирование:
Rommax написал(а):
#forums .category .level_2 .nodeInfo {
  1. border-bottom: 10px solid rgb(255, 255, 255); - 10 замените на 1
  2. border-left: 1px solid rgb(255, 255, 255)
Относительно
Посмотреть вложение 42589

.nodeList .node_10 .forumNodeInfo {
  1. background: url(
    У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация
    ) no-repeat; в - repeat
.node .nodeList li:nth-child(odd) {
  1. clear: left;
  2. padding-right: 5px; пробуйте заменить на 0.
}
Посмотреть вложение 42591

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

Может быть расширить форум ? (Как это сделать)
И как убрать белые полоски ?
 
Вопрос решен, для стиля Brivium - Zinc, как просили.
В EXTRA.css
Код: 
/* Разделы форума в виде баннеров ========================= */
/* Category-banners */
#XenForo .nodeList .node.level_2 .nodeControls {
  display: none;
}
.category .nodeList .node.level_2 {
  float: left;
  width: 50%;
}
.category .nodeList .node.level_2:nth-child(2n+1) {
  clear: left;
}
.nodeList {
}
.nodeList:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.category .nodeList .node.level_2 .nodeText {
  margin-right: 26px;
}
.category .nodeList .node.level_2 .nodeControls {
  right: 8px;
}
.category .nodeList .node.level_2:last-child:nth-child(2n+1) {
  width: 100%;
}
.category .nodeList .node.level_2:last-child:nth-child(2n+1) .nodeText {
  margin-right: 270px;
}
#forums .category .nodeList .categoryForumNodeInfo, #forums .category .nodeList .forumNodeInfo, #forums .category .nodeList .pageNodeInfo, #forums .category .nodeList .linkNodeInfo {
  background-color: #0B6678; /*white*/
  border-bottom: medium none;
}
.primaryContent a {
  white-space: nowrap;
}
.forum_list #forums {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: 0 none;
}
#forums .category .level_2 .nodeInfo {
  border-bottom: 1px solid rgb(26, 188, 156);
  border-left: 1px solid rgb(26, 188, 156);
}
#forums .category .level_2:nth-child(2n) .nodeInfo, #forums .category .level_2:last-child .nodeInfo {
  /*border-right: 1px solid rgb(255, 255, 255);*/
}
#forums .lastThreadTitle .prefix {
  margin: 2px 1px !important;
}
#forums .node.level_2 .nodeText {
  margin: 10px 10px 25px 20px;
  position: relative;
}
@media (min-width: @maxResponsiveMediumWidth) {
  {xen:helper clearfix, '.nodeList'}
  .node .nodeList li {
  float: left;
  width: 50%;
  box-sizing: border-box;
  }
  .node .nodeList li:nth-child(odd) {
  clear: left;
  padding-right: 0px;
  }
  .node .nodeList li:nth-child(even) {
  padding-left: 5px;
  }
  @media (max-width:1280px){
  .nodeList .node.category .node .nodeText {margin-right: 10px;}
  .nodeList .node.category .node .nodeLastPost, .nodeList .node.category .node .nodeControls {display: none;}
  }
}
/* END Category-banners */


/* Category-pics */
/*
.nodeList .node_1 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_2 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_3 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_4 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_5 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_6 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_7 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_8 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_9 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_10 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}

.nodeList .node_11 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_12 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_13 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_14 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}

.nodeList .node_15 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}

.nodeList .node_16 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}

.nodeList .node_17 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}

.nodeList .node_18 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}*/
/* END Category-pics */


.nodeList .categoryStrip .nodeTitle a:after {
  background-color: rgba(255, 255, 255, 0);
}

/* End Разделы форума в виде баннеров ========================= */

Код: 
/* Old node style off */
/*
.nodeStats.pairsInline {
display: block;
line-height: 20px;
max-width: 200px;
position: absolute;
right: 275px;
top: 7px;
}

.nodeStats.pairsInline dl, .nodeStats.pairsInline dt, .nodeStats.pairsInline dd {
display: block;
min-width: 90px;
text-align: center;
}

.nodeStats.pairsInline dt {
color: #a5cae4;
text-transform: uppercase;
}*/
/* End Old node style off */
Если не используются разные изображения, то фон можно и через CSS сделать, по этому тут код для картинок и закомментирован.
 
Mirovinger написал(а):
Вопрос решен, для стиля Brivium - Zinc, как просили.
В EXTRA.css
Код: 
/* Разделы форума в виде баннеров ========================= */
/* Category-banners */
#XenForo .nodeList .node.level_2 .nodeControls {
  display: none;
}
.category .nodeList .node.level_2 {
  float: left;
  width: 50%;
}
.category .nodeList .node.level_2:nth-child(2n+1) {
  clear: left;
}
.nodeList {
}
.nodeList:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.category .nodeList .node.level_2 .nodeText {
  margin-right: 26px;
}
.category .nodeList .node.level_2 .nodeControls {
  right: 8px;
}
.category .nodeList .node.level_2:last-child:nth-child(2n+1) {
  width: 100%;
}
.category .nodeList .node.level_2:last-child:nth-child(2n+1) .nodeText {
  margin-right: 270px;
}
#forums .category .nodeList .categoryForumNodeInfo, #forums .category .nodeList .forumNodeInfo, #forums .category .nodeList .pageNodeInfo, #forums .category .nodeList .linkNodeInfo {
  background-color: #0B6678; /*white*/
  border-bottom: medium none;
}
.primaryContent a {
  white-space: nowrap;
}
.forum_list #forums {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: 0 none;
}
#forums .category .level_2 .nodeInfo {
  border-bottom: 1px solid rgb(26, 188, 156);
  border-left: 1px solid rgb(26, 188, 156);
}
#forums .category .level_2:nth-child(2n) .nodeInfo, #forums .category .level_2:last-child .nodeInfo {
  /*border-right: 1px solid rgb(255, 255, 255);*/
}
#forums .lastThreadTitle .prefix {
  margin: 2px 1px !important;
}
#forums .node.level_2 .nodeText {
  margin: 10px 10px 25px 20px;
  position: relative;
}
@media (min-width: @maxResponsiveMediumWidth) {
  {xen:helper clearfix, '.nodeList'}
  .node .nodeList li {
  float: left;
  width: 50%;
  box-sizing: border-box;
  }
  .node .nodeList li:nth-child(odd) {
  clear: left;
  padding-right: 0px;
  }
  .node .nodeList li:nth-child(even) {
  padding-left: 5px;
  }
  @media (max-width:1280px){
  .nodeList .node.category .node .nodeText {margin-right: 10px;}
  .nodeList .node.category .node .nodeLastPost, .nodeList .node.category .node .nodeControls {display: none;}
  }
}
/* END Category-banners */


/* Category-pics */
/*
.nodeList .node_1 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_2 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_3 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_4 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_5 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_6 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_7 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_8 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_9 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_10 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}

.nodeList .node_11 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_12 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_13 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}
.nodeList .node_14 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}

.nodeList .node_15 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}

.nodeList .node_16 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}

.nodeList .node_17 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}

.nodeList .node_18 .forumNodeInfo {
  background: url("http://s58.radikal.ru/i162/1510/1b/9ffb62a21a27.png") no-repeat;
}*/
/* END Category-pics */


.nodeList .categoryStrip .nodeTitle a:after {
  background-color: rgba(255, 255, 255, 0);
}

/* End Разделы форума в виде баннеров ========================= */

Код: 
/* Old node style off */
/*
.nodeStats.pairsInline {
display: block;
line-height: 20px;
max-width: 200px;
position: absolute;
right: 275px;
top: 7px;
}

.nodeStats.pairsInline dl, .nodeStats.pairsInline dt, .nodeStats.pairsInline dd {
display: block;
min-width: 90px;
text-align: center;
}

.nodeStats.pairsInline dt {
color: #a5cae4;
text-transform: uppercase;
}*/
/* End Old node style off */
Если не используются разные изображения, то фон можно и через CSS сделать, по этому тут код для картинок и закомментирован.
Нажмите для раскрытия...
Я в будущем планирую в не которых разделах ставить разные фоны,так что картинки подойдут ) еще раз спасибо)
 
И тут можно немного подправить )
upload_2015-10-14_20-50-4.png

upload_2015-10-14_20-50-35.png
 
Rommax написал(а):
И тут можно немного подправить )
Посмотреть вложение 42636

Посмотреть вложение 42637
Нажмите для раскрытия...
Это уже не относится к данной теме, и дополнение было только установлено автором вопроса, но я внёс фикс для коррекции положения иконки.=)

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

scse.png


/* Category-bunners */
#XenForo .nodeList .node.level_2 .nodeControls {
display: none;
}
.category .nodeList .node.level_2 {
float: left;
width: 50%;
}
.category .nodeList .node.level_2:nth-child(2n+1) {
clear: left;
}
.nodeList {
}
.nodeList:after {
clear: both;
content: ".";
display: block;
height: auto;
visibility: hidden;
}
.category .nodeList .node.level_2 .nodeText {
margin-right: 26px;
}
.category .nodeList .node.level_2 .nodeControls {
right: 8px;
}
.category .nodeList .node.level_2:last-child:nth-child(2n+1) {
width: 100%;
}
.category .nodeList .node.level_2:last-child:nth-child(2n+1) .nodeText {
margin-right: 270px;
}
#forums .category .nodeList .categoryForumNodeInfo, #forums .category .nodeList .forumNodeInfo, #forums .category .nodeList .pageNodeInfo, #forums .category .nodeList .linkNodeInfo {
background-color: white;
border-bottom: medium none;
}
.primaryContent a {
white-space: nowrap;
}
.forum_list #forums {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
}
#forums .category .level_2 .nodeInfo {
border-bottom: 10px solid rgb(255, 255, 255);
border-left: 1px solid rgb(255, 255, 255);
}
#forums .category .level_2:nth-child(2n) .nodeInfo, #forums .category .level_2:last-child .nodeInfo {
border-right: 1px solid rgb(255, 255, 255);
}
#forums .lastThreadTitle .prefix {
margin: 2px 1px !important;
}
#forums .node.level_2 .nodeText {
margin: 10px 10px 25px 20px;
position: relative;
}
@media (min-width: @maxResponsiveMediumWidth) {
{xen:helper clearfix, '.nodeList'}
.node .nodeList li {
float: left;
width: 50%;
box-sizing: border-box;
}
.node .nodeList li:nth-child(odd) {
clear: left;
padding-right: 5px;
}
.node .nodeList li:nth-child(even) {
padding-left: 5px;
}
@media (max-width:1280px){
.nodeList .node.category .node .nodeText {margin-right: 10px;}
.nodeList .node.category .node .nodeLastPost, .nodeList .node.category .node .nodeControls {display: none;}
}
}
/* END Category-bunners */


/* Category-pics */
.nodeList .node_1 .forumNodeInfo {
background: url("http://cdn.fishki.net/upload/post/201508/17/1632459/3_02.jpg") no-repeat;
}
.nodeList .node_2 .forumNodeInfo {
background: url("http://img1.joyreactor.cc/pics/post/full/%D0%BA%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D1%8B%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-%D1%80%D1%8B%D1%86%D0%B0%D1%80%D1%8C-%D1%80%D1%8B%D1%86%D0%B0%D1%80%D0%B8-%D1%81%D1%80%D0%B5%D0%B4%D0%BD%D0%B5%D0%B2%D0%B5%D0%BA%D0%BE%D0%B2%D1%8C%D0%B5-921659.jpeg") no-repeat;
}
.nodeList .node_3 .forumNodeInfo {
background: url("ссылка на изображение") no-repeat;
}
.nodeList .node_4 .forumNodeInfo {
background: url("ссылка на изображение") no-repeat;
}
.nodeList .node_5 .forumNodeInfo {
background: url("ссылка на изображение") no-repeat;
}
.nodeList .node_6 .forumNodeInfo {
background: url("http://img0.joyreactor.cc/pics/post/full/art-%D0%BA%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D1%8B%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-%D1%81%D1%80%D0%B5%D0%B4%D0%BD%D0%B5%D0%B2%D0%B5%D0%BA%D0%BE%D0%B2%D1%8C%D0%B5-831386.jpeg") no-repeat;
}
.nodeList .node_7 .forumNodeInfo {
background: url("ссылка на изображение") no-repeat;
}
.nodeList .node_8 .forumNodeInfo {
background: url("ссылка на изображение") no-repeat;
}
.nodeList .node_9 .forumNodeInfo {
background: url("http://img0.joyreactor.cc/pics/post/full/art-%D0%BA%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D1%8B%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-%D1%81%D1%80%D0%B5%D0%B4%D0%BD%D0%B5%D0%B2%D0%B5%D0%BA%D0%BE%D0%B2%D1%8C%D0%B5-832736.jpeg") no-repeat;
}
.nodeList .node_10 .forumNodeInfo {
background: url("ссылка на изображение") no-repeat;
}
/* END Category-pics */
 
Что за дурацкая привычка использовать однострочный код для большого кода
 
Войдите или зарегистрируйтесь для ответа.
Современный облачный хостинг провайдер | Aéza
Контакты
ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430 г. Краснодар, ул. Маяковского 160, офис 2.4

Похожие темы

Селиванов
Кейс. Создание и раскрутка игровых сайтов.
Ответы
4
Просмотры
4K
Ярослав Марвин
Ярослав Марвин
Назад
Сверху Снизу