» » » Подсветка новостей и комментариев в DLE не вмешиваясь в php

Подсветка новостей и комментариев в DLE не вмешиваясь в php

12.02
9
14 013
Сегодняшняя статья будет посвящена довольно остро стоящей теме подсветки новостей и комментариев в DataLife Engine.
Я натыкался на много разных способов, но так или иначе все они по своей сути были хаками или модулями для 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--> думаю, объяснять тут ничего не нужно smile

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 - они будут с одинаковым оформлением smile

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)

Похожие материалы

Комментарии

Toonik
Toonik 13 февраля 2010 14:13
А скриптик где взять? (:
ПафНутиЙ
ПафНутиЙ 13 февраля 2010 14:18
Если речь идёт о библтотеке jQuery, то либо в архиве из предыдущего поста, либо с официального сайта.

P.S.
Даже как то и не подумал, что такой вопрос может возникнуть smile
JIexaman
JIexaman 3 марта 2010 23:31
Внимание всем. Нашёл небольшой и очень неприятный недочёт. В общем всё это работает отлично, пока в краткой новости нет списков ul, либо они есть и там чётное количество li, но если нечётное, то получается, что две новости подсвечиваются одинаково и нарушается весь порядок.

Думал думал, решил так:
Есть же и другой (ооочень редко используемый) тип списков - <dl><dt></dt></dl>

Я просто заменил: <ul><li></li></ul> на <dl><dt></dt></dl>

Всё довольно просто! Если что-то не так, есть недочёт - пишите.
ПафНутиЙ
ПафНутиЙ 4 марта 2010 07:10
Спасибо за найденный недочёт, материал поправил.
Так же пришлось поправить коментарий, т.к. что-то движок начал неправильно обрабатывать теги 'code', надо наверно обновиться smile
Jaffa
Jaffa 21 мая 2010 14:34
А можете подробнее подсказать как организовать подсветку комментариев с помощью первого способа....уже и сам мучился и в код этого блога лазил и не получается....
Все хочу сделать как у вас вид комментариев...
Пункт второй первого способа для комментариев не актуален, так как они не выводятся тегом на главную....
Заранее спасибо....(кстати смайлы в изменении коммента не работают у вас в гугле хроме) =)
ПафНутиЙ
ПафНутиЙ 21 мая 2010 14:51
Цитата: Jaffa
А можете подробнее подсказать как организовать подсветку комментариев с помощью первого способа....уже и сам мучился и в код этого блога лазил и не получается....


А библиотека jquery подключена правильно? адрес сайта есть?
Если в двух словах, то при работе jquery скрипта каждому второму элементу (dt в нашем случаи) присваивается дополнительный класс, а уже в CSS прописываются определённые стили для этого класса. вот и всё.

Цитата: Jaffa
Все хочу сделать как у вас вид комментариев...


как у меня вряд ли получится т.к. у меня помимо подсветки коментов установлена подсветка админских коментов и древовидные комментарии.

Цитата: Jaffa
Пункт второй первого способа для комментариев не актуален, так как они не выводятся тегом на главную....

это сделано, чтобы убрать лишние html-теги из контента, так что этот пункт скорее можно дополнить ещё некоторыми переменными (это для комментариев).
Jaffa
Jaffa 21 мая 2010 14:58
Цитата: ПафНутиЙ
А библиотека jquery подключена правильно?

Конечно smile я верстальщик, с ДЛЕ просто знаком недавно
Цитата: ПафНутиЙ
адрес сайта есть?

в разработке
Цитата: ПафНутиЙ
как у меня вряд ли получится т.к. у меня помимо подсветки коментов установлена подсветка админских коментов и древовидные комментарии.

знаю, это в планах smile
Цитата: ПафНутиЙ
это сделано, чтобы убрать лишние html-теги из контента, так что этот пункт скорее можно дополнить ещё некоторыми переменными (это для комментариев).

Будем пытаться, спасибо....
ПафНутиЙ
ПафНутиЙ 21 мая 2010 15:02
Забыл сказать - не обязательно использовать элементы списков, можно назначить выполнение скрипта и для любого другого элемента с определённым классом, так будет даже проще. чтото типа вот такой конструкции:
<script type="text/javascript">
$(document).ready(
  function()
  {
      $("div.content:even").addClass("alt");
  }
);
</script>

Но точно не уверен, т.к. у меня довольно скромные познания в jquery и проверить нет времени.
Jaffa
Jaffa 21 мая 2010 15:06
ПафНутиЙ,
Проверим....

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

Комментировать могут только зарегистрированные пользователи

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.