05:01 Подсветка новостей и комментариев в DLE не вмешиваясь в php | |
| Сегодняшняя статья будет посвящена довольно остро стоящей теме подсветки новостей и комментариев в DataLife Engine. Я натыкался на много разных способов, но так или иначе все они по своей сути были хаками или модулями для DLE, требовали вмешательства в php-код движка и были привязаны к ID новости или коментария. Я же покажу Вам 2 способа подсветки новостей и комментариев не затрагивающих php и реализуемых в шаблоне независимо от версии DLE. Первый способ:(на jQuery). Суть метода подсказана небольшим скриптом, подсвечивающим каждую вторую строку таблицы или элементы списка LI (это уже как настроить скрипт). 1. Для начала подключим библиотеку jquery и пропишем наш маленький скрипт в main.tpl: Перед тегом пишем: <script type="text/javascript" src="/templates/Simple/js/jquery.js"> <script type="text/javascript"> $(document).ready( function() { $(".content li:even").addClass("alt"); } ); Данный скрипт будет искать блок с классом content и добавлять класс alt к каждому второму элементу списка. только не забываем ставить свой путь к библиотеке. 2. дальше в main.tpl ищем тег {content} и заменяем его на вот такую конструкцию: [aviable=main|cat]
{content} [aviable=main|cat] Добавляем теги aviable для того чтобы ублать элементы ul с тех страниц на которых они не нужны. 3. Открываем shortstory.tpl и в самом верху пишем  4. Ну а теперь самое интересное - CSS: Пусть содержимое shortstory.tpl у нас выглядит вот так: {short-story} т.е. блоку с новостью мы присвоили класс news, с ним и будем работать. Пишем в css-файл: .news { border: solid 1px #323232; padding: 10px; background: #eeeeec; } .alt .news { borde-colorr: #ccc; background: #fff; } как видно из кода для блока с классом news задана обводка почти чёрного цвета и серый фон. в то же время если этот блок будет находиться внутри блока с классом alt, то он получит белый фон и серую обводку, а так как класс alt присваивается у нас яваскриптом для каждого второго элемента li требуемый эффект мы получили. Аналогичным способом можно подсвечивать и коментарии. К плюсам данного спопоба можно отнести независимость от ID новости, к минусам - сам яваскрипт, всётак лишние 55кб Второй способ:(только CSS). Сразу оговорюсь что данный способ привязан к ID новости или коментария и если подряд будут идти 2 новости с чётным или нечётным ID - они будут с одинаковым оформлением 1. Добавляем класс к новости Как известно, чтобы вывести ID новости в шаблон надо вставить тег {news-id}, добавим этот тег в класс . 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; } т.е. для блоков имеющих класс news и если их класс оканчиваестя цифрами 1,3,5,7,9 мы назначили другой стиль. В результате получили требуемы эффект. По аналогии делается и подсветка коментариев. Вот собственно и всё. Дальше, как обычно, включаем воображение, знания CSS и HTML и делаем свой сайт более интересным. Источник: _http://pafnuty.name/ | |
|
| |
| Всего комментариев: 0 | |