Хаки и Скрипты Next Generation CMS

Делаем вывод новостей в 3 колонки

irbees2008 irbees2008 Опубликовано - 5 - апреля Верстка
3518 - 0
  • Автор: --------------
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Итак начнем,все очень просто:
1.В news.short вставляем

Код:
<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>
2. поясняю
  1. div style="width:33%;float:left" - задает относительную ширину новости по отношению к колонке контента и выравнивает новости по левому краю
  2. div class="short-story" - блок короткой новости
  3. div class="img-size" - класс для задания стиля картинкам
  4. div class="clr" - убираем наложение картинок на текст
  5. div id="catitle" - класс для оформления стиля заголовка
3.задаем стили нашему блоку т.е. в 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;
}
  1. border: solid 1px #353535; - бордер для новости
  2. border-radius: 8px; - радиус углов бордера
  3. margin: 15px 15px 10px 10px; - отступы новостей, зависит от ширины колонки
  4. height: 290px; - высота блока новостей. нужна в том случае, если мы хотим использовать длинный заголовок в несколько строк. В обратном случае если не прописать железно высоту, то блоки новостей в нижних рядах не будут выводиться ровно в столбик а как попало из-за разницы высоты блоков.
  5. overflow: hidden; - обрезаем содержимое новостей если оно вылазит за заданные границы
  6. background: #353535; - задаем темный фон для новостей
  7. box-shadow: 2px 2px 2px #888; - добавляем тень
А для желающих изменить стиль есть онлайн генераторы стилей
4.Задаём фиксированную высоту картинками
Код:
.img-size img {
height: 250px;
}
5.Добавляем оформление для заголовков :
Код:
#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;
}
6.Вот и все пользуемся

Можешь почитать и вот эту статейку "Многие помнят теле заставку"

Опрос

Ваше мнение

TWIG -что это?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4612 дней
  • Новостей: 568
  • Комменты: 257
  • Зарегистрированно : 673
  • Онлайн всего: [36]
  • Гости: [35]
  • Поисковики: [1] Google
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 29
  • Генерация страницы: 0.57сек
  • Потребление памяти: 5.348 Mb 
  •   Яндекс.Метрика