• 1998
  • 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.Вот и все пользуемся

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

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

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

Облако тегов

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