loading...

Авторизация ...

Имя пользователя :
Пароль :
я всё забыл!

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

Написал ПафНутиЙ, 16 февраля 2010 | 17 комментариев | рейтинг новости не нравится   +10   нравится Версия для печати
Сегодняшняя статья будет посвящена довольно остро стоящей теме подсветки новостей и комментариев в DataLife Engine.
Я натыкался на много разных способов, но так или иначе все они по своей сути были хаками или модулями для DLE, требовали вмешательства в php-код движка и были привязаны к ID новости или коментария. Я же покажу Вам 2 способа подсветки новостей и комментариев не затрагивающих php и реализуемых в шаблоне независимо от версии DLE.

Первый способ:(на jQuery).

Суть метода подсказана небольшим скриптом, подсвечивающим каждую вторую строку таблицы или элементы списка LI (это уже как настроить скрипт).

1. Для начала подключим библиотеку jquery и пропишем наш маленький скрипт в main.tpl:

Перед тегом
</head>
пишем:
<script type="text/javascript" src="/templates/Simple/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(
  function()
  {
      $(".content li:even").addClass("alt");
  }
);
</script>

Данный скрипт будет искать блок с классом content и добавлять класс alt к каждому второму элементу списка.
только не забываем ставить свой путь к библиотеке.


2. дальше в main.tpl ищем тег
{content}

и заменяем его на вот такую конструкцию:
[aviable=main|cat]<ul class="content">[/aviable]
{content}
[aviable=main|cat]</ul>[/aviable]


Добавляем теги aviable для того чтобы ублать элементы ul с тех страниц на которых они не нужны.

3. Открываем shortstory.tpl и в самом верху пишем
<li>
, а в самом низу пишем
</li>
думаю, объяснять тут ничего не нужно smile

4. Ну а теперь самое интересное - CSS:

Пусть содержимое shortstory.tpl у нас выглядит вот так:

<li>
<div class="news">
{short-story}
</div>
</li>


т.е. блоку с новостью мы присвоили класс news, с ним и будем работать.
Пишем в css-файл:
.news {
    border: solid 1px #323232;
    padding:  10px;
    background: #eeeeec;
}
.alt .news {
    borde-colorr: #ccc;
    background: #fff;
}


как видно из кода для блока с классом news задана обводка почти чёрного цвета и серый фон. в то же время если этот блок будет находиться внутри блока с классом alt, то он получит белый фон и серую обводку, а так как класс alt присваивается у нас яваскриптом для каждого второго элемента li требуемый эффект мы получили.

Аналогичным способом можно подсвечивать и коментарии.

К плюсам данного спопоба можно отнести независимость от ID новости, к минусам - сам яваскрипт, всётак лишние 55кб smile .



Второй способ:(только CSS).

Сразу оговорюсь что данный способ привязан к ID новости или коментария и если подряд будут идти 2 новости с чётным или нечётным ID - они будут с одинаковым оформлением smile

1. Добавляем класс к новости

Как известно, чтобы вывести ID новости в шаблон надо вставить тег
{news-id}
, добавим этот тег в класс
<div class="news 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/


Отблагодарили: Werther, mitrushi, GRS

Комментарии пользователей

  Экспорт комментариев в RSS
 Сортировать по рейтингу, по дате

Написал PROFF84, 16 февраля 2010 в 18:15 плохой комментарий   0   хороший комментарий
Новостей: 9, комментариев: 52, Пользователи
Карма:
Для изменения комментариев в первом способе:

2. дальше в main.tpl ищем тег
{content}


и заменяем его на вот такую конструкцию:
[aviable=showfull|lastcomments][/aviable]
{content}
[aviable=showfull|lastcomments][/aviable]


ПафНутиЙ СПАСИБО ТЕБЕ! все гениальное просто! + в репу тебе!

Написал ПафНутиЙ, 17 февраля 2010 в 00:49 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
Наздоровье :)
Я вообще, если честно, не понимаю, почему раньше никто не додумался.
Пусть не все знают про селекторы атрибутов, но про яваскрипт для подсветки строк таблицы много кому известно.

P.S.
Наверняка щас ктонить начнёт кричать, что способ давно известный :)

Написал rainbowsix, 16 февраля 2010 в 20:10 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 39, Пользователи
Карма:
Что-то через второй способ не получается.

Написал ПафНутиЙ, 17 февраля 2010 в 00:44 плохой комментарий   +1   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
rainbowsix,
не получается с коментариями?
для коментов нужно подставлять
{comment-id}
вместо
{news-id}

Думал это элементарно.....

Написал [kep], 17 февраля 2010 в 06:58 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
Посредством css в комментариях не работает. Все одного цвета. Что-то делаю не так?

Делал так:
1. В comments.tpl в самом верху поставил
<div class="news id{comment-id}">

В низу
</div>

2. Открыл style.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;
}

Написал ПафНутиЙ, 17 февраля 2010 в 07:53 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
Для коментов нужно использовать вот такую конструкцию:
<div class="news">
<div class="id{comment-id}">
{comment}
</div>
</div>

т.е. таким образом, чтобы div с классом (comment-id) находился внутри div`a с классом news, не знаю чем это вызвано, походу особенность двига.
Рабочий пример тут:
_http://demo.pafnuty.name/main/13-lorem-ipsum-chasto-chasto-chasto.html
(выберите шаблон L5)

Написал [kep], 17 февраля 2010 в 08:38 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
ПафНутиЙ,
Не подскажите почему нельзя сделать так:
<div class="news">
<div class="id{comment-id}">
<--шаблон комментариев-->
</div>
</div>

т.е. дивы должны только облегать тег (comment) и никак по-другому?

p.s. проблема исчерпана

Написал ПафНутиЙ, 17 февраля 2010 в 10:59 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
<div class="news">
<div class="id{comment-id}">
<--шаблон комментариев-->
</div>
</div>

так не обязательно делать, т.е. не обязательно добавлять 2 лишних дива, можно дописать
id{comment-id}
к какомунибудь уже имеющемуся диву внутри другого :)

Написал rainbowsix, 17 февраля 2010 в 15:50 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 39, Пользователи
Карма:
Цитата: ПафНутиЙ
rainbowsix,
не получается с коментариями?
для коментов нужно подставлять
{comment-id}
вместо
{news-id}

Думал это элементарно.....


Для новостей, одним цветом всё :)

Написал ПафНутиЙ, 17 февраля 2010 в 19:50 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
<div class="news">
<div class="id{news-id}">
<--шаблон shortstory-->
</div>
</div>

попробуй так.
Ну а вообще конечно на jQuery лучше...

Написал CKBAD, 17 февраля 2010 в 15:59 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 79, Пользователи
Карма:
демка рабочая есть ?

Написал Maxton222, 18 февраля 2010 в 19:38 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 12, Пользователи
Карма:
Покажите кто-нибудь, как выглядит.

Написал PROFF84, 18 февраля 2010 в 21:23 плохой комментарий   0   хороший комментарий
Новостей: 9, комментариев: 52, Пользователи
Карма:
демка - разноцветные комменты этого сайта!

Написал ПафНутиЙ, 19 февраля 2010 в 03:05 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
Цитата: ПафНутиЙ
Рабочий пример тут:
_http://demo.pafnuty.name/main/13-lorem-ipsum-chasto-chasto-chasto.html
(выберите шаблон L5)


Написал MTFX, 27 февраля 2010 в 17:44 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 11, Пользователи
Карма:
невпечетлило ao

Написал JIexaman, 3 марта 2010 в 22:48 плохой комментарий   0   хороший комментарий
Новостей: 1, комментариев: 5, Пользователи
Карма:
Внимание всем. Нашёл небольшой и очень неприятный недочёт. В общем всё это работает отлично, пока в краткой новости нет списков ul, либо они есть и там чётное количество li, но если нечётное, то получается, что две новости подсвечиваются одинаково и нарушается весь порядок.

Проблему я решил так:
Есть же и другой (ооочень редко используемый) тип списков -


Проство везде, где встречается ul меняем на dl, а li меняем на dt.
Готово!

Написал Mek, 16 марта 2010 в 10:08 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 36, Пользователи
Карма:
Как первый вариант адаптировать для комментариев?

Информация



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

[removed][removed] [removed] (adsbygoogle = window.adsbygoogle || []).push({}); [removed]