Все для DataLife Engine / DLE хаки / Хак для DLE / Хак дле красивый Вывод новостей в две колонки

Хак дле красивый Вывод новостей в две колонки



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

Возможности хак 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>


Как видно убраны все "ограничения" размеров новости.
Хак дле красивый Вывод новостей в две колонки
«Автор:» ПафНутиЙ ( dle-faq pro)

Советует скачать хак дле красивый Вывод новостей в две колонки

vyvod-novostey-v-2-kolonki.-prosto-i-krasivo.rar [23,97 Kb] (cкачиваний: 331)
  • 80

Комментарии 18

Андрей от 15 марта 2017 22:54
А это адаптивная верстка, на мобильных телефонах не криво будет смотреться?
Exorcist от 18 апреля 2012 00:09
Отправил Вам письмо, т.к. получался слишком длинный комментарий и не получалось его сюда отправить. Помогите пожалуйста.
dle9.com от 17 апреля 2012 21:47
Exorcist,
все не правильно сделали смотрите внимательно
первый способ Сообщение № :13 ниже Сообщение № :14
второй способ это разные способы и подходы
И ещё в half_story.tpl нужно код добавлять он выводит на главной поэтому не меняется
Exorcist от 17 апреля 2012 20:25
Скопировал два раза код из последнего Вашего сообщения, получилось:
<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">ADD: {author} - {date} | Views:
</div>
<div class="bl"></div><div class="br"></div>
[category=2]{include file="half_story.tpl"}[/category]
[category=3]{include file="half_story.tpl"}[/category]


Это в on_cat_story.tpl.

Новости как были в колонках не по категориям, так и есть... а вверху колонки еще вылезло: [/category][/category][/category][/category]
dle9.com от 17 апреля 2012 18:56
или перечислить если мало категорий изменив код

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

Например :
[category=1,2,3]{include file="half_story.tpl"}[/category]
dle9.com от 17 апреля 2012 18:55
получается так
[category=XX]<div style="width: 90%; float: left;">
.
.
         </div>
<div class="bl"></div><div class="br"></div>
</div>[/category]

скопировать два раза в шаблоне on_cat_story
Указать через запятую [category=XX] категории для вывода в первом и втором коде
dle9.com от 17 апреля 2012 18:51
Exorcist,
Зачем так заморачиваться, как не смотрел код большой получается
тут например уже используется выборка категорий
Попробуйте так в шаблон on_cat_story убрать выборку категорий тег [category=XX] [/category] скопировать код вывода информации и взять в тег [category=XX] [/category] изменить размер картинки на width: 90%
Exorcist от 17 апреля 2012 18:34
С отступом я разобрался и убрал... Теперь остался вопрос как вывести в одной колонке новости только определенной категории, а в другой колонке - новости другой категории?
Exorcist от 17 апреля 2012 15:40
Спасибо! "overflow: hidden; overflow: hidden;" теперь исчезло и новости отображаются в две колонки... Нов первой колонке после новости идет большой отступ теперь... И все-таки как сделать чтобы новости из одной категории отображались только в первой колонке, а из другой - во второй колонке? Предполагается только две категории для новостей.
dle9.com от 17 апреля 2012 06:56
Exorcist,
В пункте 3

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

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

удалите из кода это просто сноска ..
тогда overflow: hidden; overflow: hidden; не будет выходить
Добавить комментарий

Оставить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent