Все для web-мастеров и создания сайта. » DataLife Engine » Хак - DataLife Engine » Красивый вывод новостей в две колонки для Dle

Красивый вывод новостей в две колонки для Dle

  • Новость
  • Похожие новости
  • DLE похожие новости в 2 колонки
Admin в 11час. 10мин. пишет:
Красивый вывод новостей DLE


Удобный и приятный хак дле оформления своего сайта , позволяет выводить в две колонки новости без искажений и многими возможностями . которые каждый сможет настроить под свой сайт.

Возможности хак дле Вывод новостей в две колонки:
1. Выводит новости на главной странице в две колонки.
2. При переходе в категорию и т.п. в одну колонку.

Средства:
- Стандартные средства движка ДЛЕ+CSS+HTML (никаких скриптов и примочек).
- Удобные для вас редакторы или редактор.
- Прямые руки.

Известные проблемы:
1. Бывают длинные заголовки новостей (на 2 и более строчки).
2. Разное количество символов в {short-story} (от 1 до 1000+).
3. Изображения в теле новости (размер ограничен разумными пределами)

Все эти а так же специфические "проблемы" заставляющие новость менять высоту, думаю всем известны, и каждый борется с ними по своему.
1. Для начала открываем блокнот (я использую WeBuilder 2011) и создаём 2 пустых документа, сохраняем их как half_story.tpl - это будет шаблон для вывода коротких новостей на главную и on_cat_story.tpl это будет шаблон вывода коротких новостей во всех остальных местах.

2. Открываем шаблон shortstory.tpl и удаляем всё его содержимое, вместо него пишем:

[not-category=XX]{include file="half_story.tpl"}[/not-category]
[category=XX]{include file="on_cat_story.tpl"}[/category]

Из кода видно что этими строками мы подключаем в шаблон shortstory.tpl 2 других шаблона, где XX - номера ВСЕХ категорий через запятую, к которым будет применён вывод в 2 колонки. Теги [category=XX] и [not-category=XX] я использовал вместо [aviable=main] и [not-aviable=main] т.к. при использовании [aviable], при переходе например в каталог, новости будут отображаться в 2 колонки как на главной странице а нам требуется только в одну.

3. Переходим к half_story.tpl. вот HTML-код этого шаблона:

<div style="width: 50%; float: left;">
<div class="tl"></div><div class="tr"></div>
<div class="inside">
    <div style="overflow: hidden; height: 38px;"><h1>[full-link]{title}[/full-link]</h1> {approve}</div>
         <div class="news_author">{link-category}<br />Добавил: {author} - {date}<br /> Просмотров: <b>{views}</b> [edit]Редактировать[/edit]</div>
         <p class="tp"><b>Содержание новости<cite>{short-story}</cite></b></p>
         <div>{rating} &nbsp;  [com-link]Комментарии ({comments-num})[/com-link]</div>

         </div>
<div class="bl"></div><div class="br"></div>
</div>


- Для вывода в 2 колонки я заключил содержимое шаблона в
<!--scode1--><!--escode1--><div style="width: 50%; float: left;">.......</div><!--scode2--><!--escode2-->


- Для предотвращения изменения высоты новости я использовал фиксированную высоту для заголовка и
<!--scode1--><!--escode1-->overflow: hidden;<!--scode2--><!--escode2-->


- Для тега { short-story } я использовал всплывающую подсказку на CSS:

.tp {position:relative;text-indent:0;}
.tp b {
    font: bold 13px cursive;
    text-align: center;
    text-decoration: none;
}
.tp b cite {display:none; font: normal 13px cursive; margin-bottom: 10px;}

.tp b:hover cite {
   background:#fff;
   border:solid 1px #ccc;
   color:#000;
   display:block;
   padding:7px;
   position: absolute;
   top:0px;
   left:-11px;
   z-index:10;
   text-align:left;
   width:100%;
   text-decoration: none;
   font: normal 13px cursive;
   opacity: 0.9;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#cacaca, direction=135, strength=3)";
   filter: alpha(opacity=90, enabled=1) progid:DXImageTransform.Microsoft.Shadow(color=#cacaca, direction=135, strength=3);
}


Я использовал всплывающую подсказку на CSS т.к. просто не смог найти более простого и эффективного решения всплывающей подсказки, все мои поиски не увенчались успехом в деле отображения в хинте картинок и форматированного текста, когда при написании новости используются html-теги.

4. CSS-код для вывода новостей общий и для half_story.tpl и для on_cat_story.tpl:

.tl, .tr, .bl, .br {
    background-image: url("../images/news-corner.gif");
    height: 10px;
    font-size: 2px;
    }
.tl, .bl {
    margin-right: 10px;
    }
.tr, .br {
    margin-left: 10px;
    margin-top: -10px;
    margin-right: 10px;
    }
.tr {
    background-position: 100% 0;
    }
.bl {
    background-position: 0 -10px;
    }
.br {
    background-position: 100% -10px;
    margin-bottom: 10px;
    }
.inside {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background: #fff;
    padding-left: 10px;
    padding-right:10px;
    margin: 0 10px 0 0;
    }
.inside h1 {
    font: bold 16px tahoma;    
    text-decoration: none
}
.inside h1 a{
    font: bold 16px tahoma;    
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}

.inside h1 a:hover {
    text-decoration: underline;
}


5. Переходим к on_cat_story.tpl.
HTML-код не сильно отличается от half-story.tpl поэтому не буду на нём подробно останавливаться:

<div class="tl"></div><div class="tr"></div>
<div class="inside">      
         <div class="news_title">{link-category} - [full-link]{title}[/full-link] {approve}</div>
         <div class="news_author">Добавил: {author} - {date} | Просмотров: <b>{views}</b> [edit]Редактировать[/edit]</div>
         <div class="news_content">{short-story} <br /><br />[full-link]<b>Подробне...</b>[/full-link]<br /><br /></div>
         <div class="news_fut">{rating} &nbsp;  [com-link]Комментарии ({comments-num})[/com-link]
      </div>
</div>
<div class="bl"></div><div class="br"></div>


Как видно убраны все "ограничения" размеров новости.

Автор: ПафНутиЙ

Внимание!!! Перед началом изменения файлов движка, обязательно сделайте резервные копии изменяемых файлов!!!
Инструкция и Установка внутри архива

Скачать:
Внимание! У вас нет прав для просмотра скрытого текста.

Новый вид topnews

DLE похожие новости в 2 колонки


Новый вид вывода популярных новостей с небольшим пред просмотром для Dle.

Шаблон Ecolog для Dle 9.5

Красивый вывод новостей DLE


Отличный шаблон от студии CENTROARTs подойдет для городского портала.

Вид модельного окна в стиле Windows 7

DLE похожие новости в 2 колонки


Модельное окно в стиле Windows 7 для Dle.


Хак для LogicBoard DLE Edition - Меню форума

Красивый вывод новостей DLE


Доработка и адаптация меню для популярного форума LogicBoard DLE Edition

Увеличение картинки при наведении курсора

DLE похожие новости в 2 колонки


Как можно сделать интересный эффект увеличения картинки при наведении на него курсора.




Красивый вывод новостей DLE 0 DLE похожие новости в 2 колонки
Просмотров: 554Дата: 26.10.11
  • Комментарии
  • Вконтакте
  • FaceBook
Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Яndex Апдейты
Красивый вывод новостей DLEАпдейты Яndex тИЦ
27.12.2012DLE похожие новости в 2 колонки07.12.2012Красивый вывод новостей DLE20.11.2012

DLE похожие новости в 2 колонкиАпдейты Яndex выдачи
06.01.2013Красивый вывод новостей DLE29.12.2012DLE похожие новости в 2 колонки26.12.2012

Красивый вывод новостей DLEАпдейты ЯКаталога
31.12.2012DLE похожие новости в 2 колонки28.12.2012Красивый вывод новостей DLE26.12.2012

DLE похожие новости в 2 колонкиАпдейты Google
08.11.2012Красивый вывод новостей DLE02.08.2012DLE похожие новости в 2 колонки03.05.2012
Кто Оnline
Юзеры: (Красивый вывод новостей DLE 0)
Гости: (DLE похожие новости в 2 колонки 3)
Красивый вывод новостей DLEDLE похожие новости в 2 колонкиКрасивый вывод новостей DLE
Боты: (DLE похожие новости в 2 колонки1)
Красивый вывод новостей DLE
Всего на сайте: (DLE похожие новости в 2 колонки 4)
Календарь
«    Январь 2013    »
Пн Вт Ср Чт Пт Сб Вс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

Какая у вас CMS ?

Datalife Engine
Joomla
Ucoz
Drupal
Wordpress
Другая