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

Рубрика: Хаки для DLE » Хак DLE 11.2, 11.1, 11.0, 10.6, 10.5, 10.4, 10.3, 10.2, 10.1, 10.0, 9.8, 9.7, 9.6, 9.5, 9.4, 9.3, 9.2, 9.0
Хак дле красивый Вывод новостей в две колонки

Удобный и приятный хак 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)

Советует скачать хак дле красивый Вывод новостей в две колонки
  • 80
Рубрика: DLE хаки » Хак для DLE
Ранее » Решение yandex некорректные ссылки облака тегов« Далее Хак JQmenu Выпадающее боковое меню для DLE
Добавление комментарияОставить комментарий
  • № :17
  • 18 апреля 2012 00:09
Отправил Вам письмо, т.к. получался слишком длинный комментарий и не получалось его сюда отправить. Помогите пожалуйста.
  • № :16
  • 17 апреля 2012 21:47
Exorcist,
все не правильно сделали смотрите внимательно
первый способ Сообщение № :13 ниже Сообщение № :14
второй способ это разные способы и подходы
И ещё в half_story.tpl нужно код добавлять он выводит на главной поэтому не меняется
  • № :15
  • 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]
  • № :14
  • 17 апреля 2012 18:56
или перечислить если мало категорий изменив код

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

Например :
[category=1,2,3]{include file="half_story.tpl"}[/category]
  • № :13
  • 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] категории для вывода в первом и втором коде
  • № :12
  • 17 апреля 2012 18:51
Exorcist,
Зачем так заморачиваться, как не смотрел код большой получается
тут например уже используется выборка категорий
Попробуйте так в шаблон on_cat_story убрать выборку категорий тег [category=XX] [/category] скопировать код вывода информации и взять в тег [category=XX] [/category] изменить размер картинки на width: 90%
  • № :11
  • 17 апреля 2012 18:34
С отступом я разобрался и убрал... Теперь остался вопрос как вывести в одной колонке новости только определенной категории, а в другой колонке - новости другой категории?
  • № :10
  • 17 апреля 2012 15:40
Спасибо! "overflow: hidden; overflow: hidden;" теперь исчезло и новости отображаются в две колонки... Нов первой колонке после новости идет большой отступ теперь... И все-таки как сделать чтобы новости из одной категории отображались только в первой колонке, а из другой - во второй колонке? Предполагается только две категории для новостей.
  • № :9
  • 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; не будет выходить
  • № :8
  • 16 апреля 2012 20:29
Сделал все по инструкции, получилось не совсем... В первой колонке только одна новость, а во второй остальные три. И еще во второй колонке в самом верху вылезло: ".......overflow: hidden; overflow: hidden; overflow: hidden; overflow: hidden; ".
И еще вопрос, как сделать, чтобы в первой колонке выводились новости только одной категории, а во второй колонке - другой категории?
  • № :7
  • 22 марта 2012 00:45
всё работает. только колонки не как на скрине
  • № :6
  • 31 января 2012 18:09
andronson,
Содержание краткой новости будет уменьшаться в 2 раза?

Будут производится все действия как обычно . если уменьшается .. значит будет уменьшаться .
"- Для тега { short-story } я использовал всплывающую подсказку на CSS:" - это в какой файл нужно вставить и вместо чего и 4 пункт?

В любой использующийся CSS стиль файл , разницы нет в какой, заменять не чего не надо ...если конечно в стилях не идут аналогичные настройки .
  • № :5
  • 31 января 2012 15:54
dle9,
Содержание краткой новости будет уменьшаться в 2 раза?
"- Для тега { short-story } я использовал всплывающую подсказку на CSS:" - это в какой файл нужно вставить и вместо чего и 4 пункт?
  • № :4
  • 31 января 2012 12:27
andronson,
Посмотрите теги в инструкциях к движку есть такой
[aviable=main] Сюда код который выводится только на главной [/aviable]
[not-aviable=main]Здесь что не нужно выводить на главной [/not-aviable]

Вставить нужно в файл для вывода информации
По шаманьте может получится как Вам надо !
  • № :3
  • 31 января 2012 09:45
dle9,
у меня другая ситуация, нужно что бы в категориях были две или более колонок, а на главной одна колонка.
  • № :2
  • 30 января 2012 23:12
andronson
Их и не должно быть
Создайте файлы ,добавьте туда код и все ...
  • № :1
  • 30 января 2012 22:53
У меня нет half_story.tpl, half_story.tpl и on_cat_story.tpl
как быть в этом случае?