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, хак Вывод новостей в три колонки красивым методом

DLE-hak-Vyvod-novostey-v-tri-kolonki.rar [33,25 Kb] (cкачиваний: 328)