• 79
  • 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;
}

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

Можешь почитать и вот эту статейку "Выводим ссылку на картинку "

mistakes

Это тоже интересно

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

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Облако тегов

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