Вывод подфорумов в 2 или 3 колонки (столбца)

Posted 14 декабря, 20168 yr

Подскажите на IPS 4.1 как решить вопрос вывода подфорумов в 2 или 3 колонки?

Попытался сделать при помощи for но не выходит, пока не совсем понимаю как работает шаблонизатор IPS, поэтому прошу помощи.

Искал но ничего подобного не нашел только для версии 3.*

Цитата

Silence
1

14 декабря, 20168 yr

comment_117986

Go to : ACP > Customization > Themes > Ur theme > HTML & CSS Codes > forums > front > index > forumRow и найти :

{{if $forum->hasChildren()}}
				<ul class="ipsDataItem_subList ipsList_inline">
					{{foreach $forum->children() as $subforum}}
						<li class="{{if \IPS\forums\Topic::containerUnread( $subforum )}}ipsDataItem_unread{{endif}}">
							<a href="{$subforum->url()}">{{if \IPS\forums\Topic::containerUnread( $subforum )}}<span class='ipsItemStatus ipsItemStatus_tiny {{if !\IPS\forums\Topic::containerUnread( $subforum ) && !$subforum->redirect_on}}ipsItemStatus_read{{endif}}'><i class="fa fa-circle"></i></span>&nbsp;{{endif}}{$subforum->_title}</a>
						</li>
					{{endforeach}}
				</ul>
			{{endif}}

Удалит его и найти:

{{if $forum->description}}
				<div class="ipsDataItem_meta ipsType_richText">{$forum->description|raw}</div>
			{{endif}}

затем вставить этот код:

{{if $forum->hasChildren()}}
					<ol class='ipsList_inline ipsType_small subforums2'>
{{foreach $forum->children() as $subforum}}</ol>
<ol class='ipsList_inline ipsType_small subforums3'>
{{if \IPS\forums\Topic::containerUnread( $subforum )}}
<li class='unread'>
{{endif}}
{{if !\IPS\forums\Topic::containerUnread( $subforum )}}
<li>
{{endif}}
{{endforeach}}
</ol>
<ol class='ipsList_inline ipsType_small subforums'>
{{foreach $forum->children() as $subforum}}</ol>
<ol class='ipsList_inline ipsType_small subforums1'>
{{if \IPS\forums\Topic::containerUnread( $subforum )}}<li class='unread'>
{{endif}}
{{if !\IPS\forums\Topic::containerUnread( $subforum )}}
<li>
{{endif}}
<a href="{$subforum->url()}">{$subforum->_title}</a></li>
{{endforeach}}</ol>
			{{endif}}

Перейти к custom.css и вставить этот код:

ol.subforums1 {
  
  margin-top: 3px;
  float: left;
  width: 33%;
  
}
ol.subforums1 li {
  
  background: url('http://ваш–форум/subforum_vechis.png') no-repeat 0 50%;
  padding: 0 15px 0 15px;
  margin: 0;
  float: left;
  
}
.subforums1 li.unread { 
  font-weight: bold; 
  background-image: url('http://ваш–форум/subforum_now.png'); 
}
ol.subforums2 {
  
  width: 33%;
  overflow: hidden;
  
}
ol.subforums2 li {
  
  background: url('http://ваш–форум/subforum_vechis.png') no-repeat 0 50%;
  padding: 0 15px 0 15px;
  margin: 0;
  float: left;
  
}
.subforums2 li.unread { 
  font-weight: bold; 
  background-image: url('http://ваш–форум/subforum_now.png'); 
}
ol.subforums3 {
  width: 33%;
  overflow: hidden;
}
ol.subforums3 li {
  background: url('http://ваш–форум/subforum_vechis.png') no-repeat 0 50%;
  padding: 0 15px 0 15px;
  margin: 0;
  float: left;
}
.subforums3 li.unread { 
  font-weight: bold;
  background-image: url('http://ваш–форум/subforum_now.png'); 
}

Для того, чтобы изменить образ чтения подфорума вы должны изменить эту ссылку везде, где вы нашли его на верхней CSS код:

http://ваш–форум/subforum_vechis.png

И изменить образ непрочитанных подфорума вы должны изменить эту ссылку везде, где вы нашли его на верхней CSS код:

http://ваш–форум/subforum_now.png

.ipsDataItem_subList{ overflow: hidden; }
 
        html[dir="ltr"] .ipsApp .ipsDataItem_subList,
        html[dir="rtl"] .ipsApp .ipsDataItem_subList{
            background: none;
            line-height: 220%;
            padding-left: 0 !important;
            padding-right: 0 !important;
            padding-bottom: 4px;
        }
        
        .ipsDataItem_subList li{
            float: left;
            width: calc(100% / 1 - 5px);
        }
 
        html[dir="rtl"].ipsDataItem_subList li{ float: right; }
        
        .ipsDataItem_subList li a:after{ display: none; }
    
        html[dir="rtl"] .ipsDataItem_subList.ipsList_inline > li{ margin-left: 0; padding-bottom: 4px;}

width: calc(100% / 1 - 5px); = 1 изменить столбец 1 по 2 для 2 или 3 колонки для 3 колонки

Цитата

ram108 and fearrr
2

14 декабря, 20168 yr

Author

comment_117988

Silence, благодарю, выглядит неплохо.

Цитата

Silence
1

15 декабря, 20168 yr

Author

comment_118018

Рано я обрадовался.

Стал проверять добавил больше 3х подфорумов происходит такая бяка..

Да и вообще посмотрел на код вывода, там какой-то бред. Я вчера просто с тяжелой головой не заметил..

Даже если убрать мои иконки, и просто заглянуть в html который генерируется, там какая-то несвязанная структура получается.

И код css который содержит width: calc(100% / 1 - 5px); не работает

Цитата

15 декабря, 20168 yr

Author

comment_118023

Потому что ipsDataItem_subList ни один тег не содержит этот класс.

Элемент точнее

Цитата

15 декабря, 20168 yr

Author

comment_118025

Пришлось сделать заново. Все куда проще...

В шаблоне forums/front/index/forumRow.phtml

{{if $forum->hasChildren()}}
	{{$chunk = 3;}}
	{{$chunked = array_chunk($forum->children(), $chunk, true);}}
	{{foreach $chunked as $chunk}}
      <ul class='subforum'>
        {{foreach $chunk as $subforum}}
        	{{if \IPS\forums\Topic::containerUnread($subforum)}}
              <li class='unread'>
                {{endif}}
                {{if !\IPS\forums\Topic::containerUnread($subforum)}}
              <li>
                {{endif}}
                <a href="{$subforum->url()}">{$subforum->_title}</a></li>
        	  </li>
      	{{endforeach}}
      </ul>
	{{endforeach}}
{{endif}}

В custom.css

.subforum{
    list-style: none;
    margin: 0;
    padding: 0;
}
.subforum li{
    width: calc(100%/3 - 1%);
    float: left;
}

Ну там уже для .unread стили думаю понятно что нужно определить, кому надо иконки добавить fontawesome или через background

p.s. и еще там один закрывающий тег лишний, но отредактировать не могу к сожалению.

Цитата

ram108
1

15 декабря, 20168 yr

Author

comment_118030

Вот последний вариант который я оставил, если кому-то интересно.

Выглядит это так:

2 колонки

3 колонки

Выкладываю на gist, т.к. тут уже и так много кода, плюс нельзя редактировать свои сообщения. Надеюсь это не нарушает правила.

https://gist.github.com/fearrr/34b7bfa6b120c88d23a9fec2d31229fb

Цитата

ram108
1

4 сентября, 20177 yr

comment_135836

Прошу прощения, подскажите, а где именно вы активируете вывод в 2 колонки подфорумы, просто мне нужно этио отключить, а где включал найти не могу, где - то в админке вроде

Цитата