Подсветка новостей и комментариев в DLE не вмешиваясь в php
12.02
9
Сегодняшняя статья будет посвящена довольно остро стоящей теме подсветки новостей и комментариев в DataLife Engine.19 109
Я натыкался на много разных способов, но так или иначе все они по своей сути были хаками или модулями для DLE, требовали вмешательства в php-код движка и были привязаны к ID новости или коментария. Я же покажу Вам 2 способа подсветки новостей и комментариев не затрагивающих php и реализуемых в шаблоне независимо от версии DLE. В качестве развлечений можно смотреть фильмы онлайн.
Первый способ:(на jQuery).
Суть метода подсказана небольшим скриптом, подсвечивающим каждую вторую строку таблицы или элементы списка <!--scode1--><!--escode1--><li><!--scode2--><!--escode2--> (это уже как настроить скрипт).
- UPD: Но мы будем использовать редкоприменяемые списки - списки определений: <!--scode1--><!--escode1--><dl><dt></dt></dl><!--scode2--><!--escode2-->, за подсказку спасибо пользователю JIexaman.
1. Для начала подключим библиотеку jquery и пропишем наш маленький скрипт в main.tpl:
Перед тегом <!--scode1--><!--escode1--></head><!--scode2--><!--escode2--> пишем:
<script type="text/javascript" src="{THEME}/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function()
{
$(".content dt:even").addClass("alt");
}
);
</script>Данный скрипт будет искать блок с классом <!--scode1--><!--escode1-->content<!--scode2--><!--escode2--> и добавлять класс <!--scode1--><!--escode1-->alt<!--scode2--><!--escode2--> к каждому второму элементу списка.
только не забываем ставить свой путь к библиотеке.
2. дальше в main.tpl ищем тег <!--scode1--><!--escode1-->{content}<!--scode2--><!--escode2-->
и заменяем его на вот такую конструкцию:
[aviable=main|cat]<dl class="content">[/aviable]
{content}
[aviable=main|cat]</dl>[/aviable]Добавляем теги <!--scode1--><!--escode1-->[aviable]<!--scode2--><!--escode2--> для того чтобы ублать элементы <!--scode1--><!--escode1--><dl><!--scode2--><!--escode2--> с тех страниц на которых они не нужны.
3. Открываем shortstory.tpl и в самом верху пишем <!--scode1--><!--escode1--><dt><!--scode2--><!--escode2-->, а в самом низу пишем <!--scode1--><!--escode1--></dt><!--scode2--><!--escode2--> думаю, объяснять тут ничего не нужно
4. Ну а теперь самое интересное - CSS:
Пусть содержимое shortstory.tpl у нас выглядит вот так:
<dt>
<div class="news">
{short-story}
</div>
</dt>т.е. блоку с новостью мы присвоили класс <!--scode1--><!--escode1-->news<!--scode2--><!--escode2-->, с ним и будем работать.
Пишем в css-файл:
.news {
border: solid 1px #323232;
padding: 10px;
background: #eeeeec;
}
.alt .news {
borde-colorr: #ccc;
background: #fff;
} как видно из кода для блока с классом <!--scode1--><!--escode1-->news<!--scode2--><!--escode2--> задана обводка почти чёрного цвета и серый фон. в то же время если этот блок будет находиться внутри блока с классом<!--scode1--><!--escode1--> alt <!--scode2--><!--escode2-->, то он получит белый фон и серую обводку, а так как класс <!--scode1--><!--escode1-->alt<!--scode2--><!--escode2--> присваивается у нас яваскриптом для каждого второго элемента <!--scode1--><!--escode1--><dt><!--scode2--><!--escode2--> требуемый эффект мы получили.
Аналогичным способом можно подсвечивать и коментарии.
К плюсам данного спопоба можно отнести независимость от ID новости, к минусам - сам яваскрипт.
Второй способ:(только CSS).
Сразу оговорюсь что данный способ привязан к ID новости или коментария и если подряд будут идти 2 новости с чётным или нечётным ID - они будут с одинаковым оформлением
1. Добавляем класс к новости
Как известно, чтобы вывести ID новости в шаблон надо вставить тег <!--scode1--><!--escode1-->{news-id}<!--scode2--><!--escode2-->, добавим этот тег в класс <!--scode1--><!--escode1--><div class="news id{news-id}"><!--scode2--><!--escode2-->.
2. CSS
Для "подсветки" новости мы будем использовать селекторы атрибутов
В итоге наш css-код будет выглядить так:
.news {
border: solid 1px #323232;
padding: 10px;
background: #eeeeec;
}
.news div[class$="1"], .news div[class$="3"], .news div[class$="5"], .news div[class$="7"], .news div[class$="9"] {
background: #fff;
border-color: #ccc;
}т.е. для блоков имеющих класс <!--scode1--><!--escode1-->news<!--scode2--><!--escode2--> и если их класс оканчиваестя цифрами 1,3,5,7,9 мы назначили другой стиль. В результате получили требуемы эффект.
По аналогии делается и подсветка коментариев.
Вот собственно и всё.
Дальше, как обычно, включаем воображение, знания CSS и HTML и делаем свой сайт более интересным.
Обновлено: 17 января 2011
(Заменил списки li на списки dt)
(Заменил списки li на списки dt)
Комментарии
Добавить комментарий
Комментировать могут только зарегистрированные пользователи