PomoRde.NET

Официальный сайт

Хаки DataLife Engine

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

20 май, 2013 0
Недавно мне понадобилось сделать на DLE вывод в 3 колонки. Разумеется все хотелось сделать красиво и с минимумом кода. А так как мне нужно было использовать 3 колонки еще и в статических новостях, то делать 2 разных кода желания не было.

Пример как это выглядит:
Вывод новостей в три колонки в DLE


Приступим делать вывод новостей в 3 колонки:

Для начала вот вам код который нужно поместить в файл "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]Вывод новостей в три колонки в DLE[/full-link]</div>
</div>
</div>


Немного поясню. Я решил делать не фиксированную ширину каждой выводимой новости, так как завтра или может после завтра понадобится вывод сделать в 4 колонки и будет мороки больше.

Следующий шаг.

Что бы в DLE вывод новостей в 3 колонки был красивый, нужно вставить CSS код в ваш 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;
}


Поподробнее для тех кто не очень хорошо разбирается в CSS:

border: solid 1px #353535; - тут написано что рамка вокруг блока новости будет 1 пиксель и цвет у нее будет #353535.

border-radius: 8px; - тут написано что радиус углов у рамки 8 пикселей.

margin: 15px 15px 10px 10px; - тут написано отступы новостей.

height: 290px; - тут написано что высота новости будет 290 пикселей.

overflow: hidden; - тут написано что нужно обрезать лишнее что в новости выходит за пределы размера.

background: #353535; - а тут написано о том что фон новости будет #353535; цветом.

box-shadow: 2px 2px 2px #888; - Это добавляет тень. Добавляет хороший эфект.

Дальше нам нужно установить фиксированную картинку в новости. Вставляем еще немного кода в CSS:

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


Это тут все означает что картинка будет в высоту 250 пикселей в ширину она будет в соотношении такая же как и есть, но обрезанная если будет выходить за рамки нужного.

Дальше немного оформим текст в новости. Нужно еще немного вставить в CSS:

#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;
}


В общем если вы сделали все по моей инструкции то у вас сейчас должны новости в DLE выводиться в 3 колонки. Если что то не так то пишите коменты давайте разбираться вместе.
Прокомментировать
  • 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
Введите код с картинки:*
Кликните на изображение чтобы обновить код, если он неразборчив