Хаки и Скрипты Next Generation CMS

Интересный вариант оформления для плагина xnews на Bootstrap 4.1.1

irbees2008 irbees2008 Опубликовано - 24 - ноября Настройка плагинов
1074 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Вот нашел довольно интересный вариант для оформления плагина последних новостей xnews. Поскольку нашел только общий шаблон на bootstrap, то его еще надо адаптировать чем мы и займёмся.
Итак в данном варианте используется Bootstrap 4.1.1,так что смотрите чтобы были подключены стили и скрипты этой версии примерно так:

Код:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Далее добавляем блок туда где хотим его видеть , обычно в main.tpl
Код:
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<h4>Последние новости</h4>
<ul class="timeline" style="height: 400px;overflow-y: scroll;">
{{ callPlugin('xnews.show', {'categories' : '164', 'order' : 'last', 'count' : '14', 'template' : 'xnews2', 'cacheAge' : '180'}) }}
</ul>
</div>
</div>
</div>
Следующий шаг настройка шаблона плагина , идем в директорию вашсайт\шаблон\plugins\xnews\xnews2\, там два файла , в файле xnews.tpl оставляем только код
Код:
{% for entry in entries %}{{ entry }}{% endfor %}
В файле заменяем все на вот этот код
Код:
		<li>
<a target="_blank" href="{{ news.url.full }}" title="{{ news.title }}">{{ news.title }}</a>
<a href="#" class="float-right">{{ news.date }}</a>
<p>{{ news.short|truncateHTML(250,'...')|striptags }}</p>
</li>
Ну и в файл стилей добавляем стили оформления блока
Код:
ul.timeline {
list-style-type: none;
position: relative;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}

Вот и всё пользуемся.

Можешь почитать и вот эту статейку "Расширяем профиль юзера"

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3357 дней
  • Новостей: 546
  • Комменты: 254
  • Зарегистрированно : 574
  • Онлайн всего: [8]
  • Гости: [7]
  • Поисковики: [1] Google
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 30
  • Генерация страницы: 0.297сек
  • Потребление памяти: 5.152 Mb 
  •   яндекс.ћетрика