DLE – новости в две колонки полностью на css

dle two columns blocks shortstory - DLE - новости в две колонки  полностью на css
DLE — записи в две колонки

Каких-то особенностей, мешающих или наоборот — помогающих создать короткие новости в две колонки нет. Разметка осуществляется лишь средствами базового HTML и CSS.

Текст статьи ниже в 2019 более не актуален т.к. существуют такие технологии, как CSS Flexbox и более совершенное его развитие CSS Grid

Две части кода — одной мы оборачиваем наш shortstory блок с новостью, а второй мы добавляем в файл стилей. Скриншот выше с уже существующего проекта. Позиционирование в две колонки. Далее инструкция:

В шаблон короткой новости templates/{THEME}/shortstory.tpl в контейнер, формирующий короткую новость добавить идентификатор newwws

<div id="newwws">
<h3>[full-link]{title}[/full-link]</h3>
<div id ="cat"><strong>Раздел: </strong>{link-category}  </div>
<div id="over">{short-story}</div>

<p>Просмотров: <b>{views}</b> •  {favorites}    [full-link]<b>Скачать</b>[/full-link]</p>
</div>

В файл стилей: templates/{THEME}/css/style.css.tpl, добавить код:

#newwws{
display:inline-block;
width: 48%; /*Примерное число. На него влияют padding и margin*/
}

#over{ 
height:276px; /*Картинка 150рх + текст, после которой все будет обрезаться  */
overflow: hidden; /*Не показывать текст, который не влез в 276px.*/
}

Если не задать обрезку текста тегом height, то в зависимости от его объема, высотка блока будет меняться, что не есть хорошо и придется для каждого поста подгонять его вручную. А самое забавное — на разных разрешениях экранов все это может перекосить.

Дополнительно по теме

Разработка шаблона на дополнительных полях

Похожие записи


PHP — простой ротатор баннеров, ротатор для DLE и WordPress
Аналог на javascriptАналог на PHP для больших кодов Очень простой ротатор кода на PHP. Сначала мы объявляем простой двумерный массив...
Как изменить пароль пользователя CMS DLE и WordPress через SQL-запрос
Перебираю старые статьи с целью их оптимизации и наткнулся на эту. В принципе, способ подойдет для любой системы на любом...
Полный гайд по миграции с CMS DLE на WordPress
Данный сайт в апреле 2019 года полностью переехал на CMS WordPress и в июне, после завершения всех правок (а их...
DLE – быстрый переезд на хостинг не используя инсталятор
Установка движка DLE на хостинг происходит через специальный файл — инсталятор, в котором необходимо заполнить все поля (имя базы данных,...
DLE — монетизируем загруженные в новостях файлы через отдельный домен
Как много у вас загруженных файлов (приложений к постам) не считая картинок? У меня много и придумал способ их монетизировать!...

0 комментариев на «“DLE – новости в две колонки полностью на css”»

  1. Цитата: павел
    Отличное решение! Все работает! Спасибо!

    Спасибо, пользуйтесь на здоровье!

Добавить комментарий