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

Хак дле вывод Новости в две три четыре и т.д. колонки

Хак дле вывод Новости в две три четыре и т.д. колонки


Удобный и простой хак дле dle позволит сделать вывод "Новости в две, три, четыре и т.д. колонки" для Dle.

Сделаем мы это с помощью быстрого jQuery, причем код сократится до 1 строчки, что конечно хорошо и влияет на скорость загрузки страницы.

Установка:
1. Код в shortstory.tpl должен иметь примерно такой вид:

<div class="news">содержание shortstory и всякие теги,главное тут - "обёртка" всего содержимого shortstory.tpl</div>


2. Обязательные стили в CSS:

.news.float {    float: left;    width: 30%; //значение зависит от желаемого количества колонок (например для 5ти колонок нужно указать 18-20%)    }.clr {    clear: both;    height: 0;    overflow: hidden;    }


3. Ну и самое главное - jQuery-код:

<script type="text/javascript">jQuery(function($) {    $(".news").addClass("float").filter(":nth-child(3n)").after('<div class="clr"></div>');});</script>


Так же понадобится дописать ко всем блокам с классом news дополнительный класс, а потом дописываем после каждого третьего блока пустой div с слассом clr - нужно это, чтобы новости имели ровное горизонтальное положение, а не плавали так, как им захочется. Если не понятно можно взглянуть в любой TPL.

Чтобы настроить?
Достаточно - заменить цифру три в строке :nth-child(3n) на желаемую, и в CSS заменить width: 30%; на нужное значение (как правило методом подбора).

Рекомендуем скачать хак вывод новости в две три четыре и т.д. колонки

novosti-v-dve-tri-chetyre-i-t.d.-kolonki.rar [20,46 Kb] (cкачиваний: 206)
  • 0
Добавить комментарий

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

    • 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