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

Рубрика: Хаки для 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 Вывод новостей в три колонки красивым методом
Представляем на dle9.com красивый и удобный метод вывода в три колонки, как в полной новости так и короткой. Отличной будет смотреться при выводе на сайте с большим количеством картинок, видеороликов и обоев. При установке DLE хак вывод новости в три колонки красивым методом, важно знать, что место под заголовок зависит от разницы высоты для картинок и высоты блока. В результате мы имеем симпатично оформленные новости в три колонки с учетом размера заголовков и картинок.

Установка dle хак Вывод новостей в три колонки красивым методом
В shortstory.tpl добавляем:

<div style="width:33%;float:left;">
    <div class="short-story">
            <div class="img-size">{short-story}</div>
                <div class="clr"> </div>
                    <div id="catitle">[full-link]{title}[/full-link]</div>
    </div>
</div>


Сразу замечу , что у нас размер колонки: 743px, который влияет на ширину новостей не имеющих фиксированной ширины.

По порядку:

div style="width:33%;float:left" - задает относительную ширину новости по отношению к колонке контента и выравнивает новости по левому краю
div class="short-story" - блок короткой новости
div class="img-size" - класс для задания стиля картинкам
div class="clr" - убираем наложение картинок на текст
div id="catitle" - класс для оформления стиля заголовка


Теперь самое интересное! Добавляем оформление в style.css :

.short-story {
    border: solid 1px #353535;
    border-radius: 8px;    
    margin: 15px 15px 10px 10px;
    height: 290px;
    overflow: hidden;
    background: #353535;
    box-shadow: 2px 2px 2px #888;
}

border: solid 1px #353535; - бордер для новости
border-radius: 8px; - радиус углов бордера
margin: 15px 15px 10px 10px; - отступы новостей, зависит от ширины колонки
height: 290px; - высота блока новостей. нужна в том случае, если мы хотим использовать длинный заголовок в несколько строк. В обратном случае если не прописать железно высоту, то блоки новостей в нижних рядах не будут выводиться ровно в столбик а как попало из-за разницы высоты блоков.
overflow: hidden; - обрезаем содержимое новостей если оно вылазит за заданные границы
background: #353535; - задаем темный фон для новостей
box-shadow: 2px 2px 2px #888; - добавляем тень

Устанавливаем фиксированную высоту для картинок:

.img-size img {
    height: 250px;
}


Добавляем оформление для заголовков новостей:

#catitle {
    font-weight: bold;
    font-size: 13px;        
    text-align: center;
    padding: 10px 0;
    margin: 2px 0 0 0;
}

#catitle a {
    color: #ffd40b;
    text-shadow: 0 1px 1px #949494;
}

Версии DataLife Engine 9.x
/Инструкция и Установка внутри архива/

Рекомендует из категории закачать хаки для DLE, хак Вывод новостей в три колонки красивым методом
  • 60
Рубрика: DLE хаки » Хак для DLE
Ранее » Хак Доступ Гл редакторам в полной новости при модерации« Далее Хаки для DLE Красочный слайдеры 18 вариантов - ДЕМО
Добавление комментарияОставить комментарий
  • № :10
  • 23 августа 2013 10:24
хак хорош для сайтов про кино. другое применение найти трудно.
  • № :9
  • 2 февраля 2013 19:14
kinoskat,
проверяйте на стандартных Gemini
и прочитайте комментария
  • № :8
  • 2 февраля 2013 17:28
ужасно до безобразия, на какой шаблон это вобще реально натянуть то?
  • № :7
  • 24 декабря 2012 07:28
MotorKA,
Всегда пожалуйста winked
  • № :6
  • 24 декабря 2012 00:03
dle9,
Спасибо огромное! Совсем забыл про эти функции.

В общем всё получилось! Навигацию ещё не проверял, пока оставил такой вывод только на главной.

Сайт крутой! fellow
  • № :5
  • 23 декабря 2012 17:20
MotorKA,
Так и должно, нормально будет при выводе 15 или 18 новостей хотя подправить можно, в шаблоне navigation.tpl добавить в самом начале или найти класс стилей с помощью его создать отступление
<div class="clr"></div> или <div></div> 


Если надо только на главной в shortstory.tpl
[aviable=main] сюда хак с изменением текст [/aviable]

будет выводить текст заключенный в теги, только на главной

[not-aviable=main] сюда хак без изменения текст [/not-aviable]
т.е. запрещаем не выводить на главной, а на всех других выводить

ПС читайте в движке дле Documentation readme.chm там все есть
  • № :4
  • 23 декабря 2012 16:22
в хаке нашёл косяк. поставил на дефолтный синий шаблон, всё выводится красиво, но если новости выводтся предположем в 3 колонки, а на странице 16 новостей, то навигация (navigation.tpl) выводится сбоку нижней (16-ой) новости... как исправить не понял...

И хотель бы конечно, что бы новости в таком виде выводились только на главной.

И если хочется новости как на скрине, то удобнее использовать хак "вывод картинки тегом".
  • № :3
  • 23 декабря 2012 08:11
На 9.7 пойдет,
советую сначала на дефолном шаблоне проверить, иногда стили как .short-story особенно если в вашем шаблоне есть похожий одинаковый стиль, могут исказить отображение.

Хотелось тоже бы узнать, что плохого в хаке,
чаще всего ошибка в установке или не понимании использования.
  • № :2
  • 23 декабря 2012 00:14
Hell-Boy, что отстойного? В чём косяк? Хочу поставить на 9.7 пойдёт?
  • № :1
  • 18 декабря 2012 23:44
Отстой !! !