Похожие новости dle в две колонки и более.

Доброго времени суток, друзья. Сегодня на sdelaemblog.ru, поговорим о движке dle. А точнее о похожих новостях. В прошлом, я уже писал об этом, но один ответ порождает другой вопрос. А вопрос заключается в следующем: «Как вывести похожие новости DLE в две колонки, или более«. В статье о похожих записях wordpress, я давал пример, как можно осуществить подобное на wordpress. А в статье про DLE, это было упущено. Поэтому, сегодня я расскажу, как можно осуществить вывод похожих новостей в несколько колонок в DLE.

Похожие новости dle в две колонки и более.

Порывшись в интернете, я, если честно, был немного удивлен. На форумах и других различных ресурсах, на подобные вопросы, дают довольно интересные ответы. Но мне они показались слишком сложными. Я не понял просто, какой смысл в подобных действиях. Чтобы сделать вывод похожих новостей в несколько колонок, предлагают лезть в файлы движка, писать функции и тому подобные вещи. Это все конечно весело, но для чего, я не понял. Если кто знает, просветите, пожалуйста, в комментариях. :idea:

Мы, естественно пойдем другим путем. Без написания функций и тому подобных вещей.

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

Вывод похожих новостей DLE в две колонки.

Чтобы вывести похожие новости DLE в две колонки. Достаточно поработать над стилями списка, который используется для вывода.

Для начала, в настройках оптимизации запросов к базе данных DLE, необходимо включить отображение похожих новостей на сайте. Если конечно данная опция еще не включена.

Затем, в настройках вывода новостей DLE, желательно указать четное количество похожих новостей. То есть 2, 4 и тому подобные значения.

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

1
<li><a href="{link}">{title}</a></li>

Если же, мы используем код из этой статьи, то суть не меняется. Главное обратить внимание на присутствие тега li. Именно его стили и помогут нам, с выводом новостей в две колонки. Если же в файле relatednews.tpl нет тега li, и вывод происходит, например, с помощью блоков div, что маловероятно. Но все же. В этом случае придется редактировать стили блока div, а не элемента списка li. Что также сути не меняет.

Итак, открываем файл style.css в админке или на компьютере в текстовом редакторе — не имеет значения.

Нажимаем сочетание клавиш Ctrl+F, и в появившуюся форму поиска вводим .related ul li, после чего нажимаем «Enter». Если же у нас нет такого селектора — стоит проверить, какой селектор используется, для вывода похожих новостей. В этом поможет вот эта статья.

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

1
2
width:50%;
float:left;

Если некоторые из свойств уже есть. Их необходимо заменить на те, которые представлены в этой статье.

Теперь, вспомним, как это выглядит по умолчанию.

Вывод похожих новостей DLE в две колонки.

А вот, что должно было получиться, после редактирования стилей CSS.

Похожие новости dle в две колонки и более.

Вот таким не хитрым способом можно вывести похожие новости DLE в две колонки. Да, еще хочу сказать, что в ширине не обязательно использовать проценты. Ширину можно указать в пикселях.

Вывод похожих новостей DLE в несколько колонок.

Здесь все также просто. Единственное, что стоит изменить — это ширину. То есть, если для вывода в две колонки, мы указали ширину 50%. То для вывода трех колонок, необходимо указать 33%. То есть код будет выглядеть так:

1
2
width:33%;
float:left;

А результат должен быть таким:

Вывод похожих новостей в несколько колонок.

Ну а если нужно еще больше колонок. То дальше простая математика: для вывода четырех колонок, необходимо указать ширину 25%, для вывода пяти — 20%, и так далее. Надеюсь, это понятно.

P.S. Если вы используете код из моей статьи о выводе похожих новостей DLE с картинкой и описанием, у вас наверняка возникли трудности. Так как ширина изменилась, а колонка осталась одна. :-) Для того, чтобы все заработало, нужно из конструкции в файле relatednews.tpl удалить тег:

1
<hr />

И в стилях CSS, удалить:

1
hr{ clear: both; }

Тогда вывод постов изменится.

У меня на этом все. Я надеюсь, что стало понятней, как вывести похожие записи DLE в две колонки и более…

Удачи!

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

VN:F [1.9.22_1171]
Оценка статьи: 8.0/10 (2 голосов)
Автор: Михаил Веб Дата публикации: 30.05.2013