Перейти к содержанию

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


Рекомендуемые сообщения

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

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

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

 

 

 

Ссылка на комментарий
Поделиться на другие сайты

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 колонки

Ссылка на комментарий
Поделиться на другие сайты

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

Ссылка на комментарий
Поделиться на другие сайты

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

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

Screenshot_7.png

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

 

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

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

Ссылка на комментарий
Поделиться на другие сайты

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

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

Ссылка на комментарий
Поделиться на другие сайты

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

В шаблоне 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. и еще там один закрывающий тег лишний, но отредактировать не могу к сожалению. 

Ссылка на комментарий
Поделиться на другие сайты

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

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

2 колонки

Screenshot_8.png

3 колонки

Screenshot_7.png

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

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

Ссылка на комментарий
Поделиться на другие сайты

  • 8 месяцев спустя...

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

Ссылка на комментарий
Поделиться на другие сайты

1 час назад, Андрей Гнатенко сказал:

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

Спойлер

59add00e72abd_2017-09-051_12_17.png.dccdd636eec623c02483ac90d090aced.png

 

Ссылка на комментарий
Поделиться на другие сайты

  • 1 год спустя...

А на 4.4 работать должно? Проверял может кто?

Ссылка на комментарий
Поделиться на другие сайты

Только что, Maiden8 сказал:

А на 4.4 работать должно? Проверял может кто?

Все робит .

Ссылка на комментарий
Поделиться на другие сайты

Может я не понимаю чего то? Сделайте мне плиз, ну может платно я хз.

Ссылка на комментарий
Поделиться на другие сайты

В 15.12.2016 в 02:24, Silence сказал:

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

И что это, откуда она берется, самого изображения то нету.

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...