Хаки и Скрипты Next Generation CMS : Верстка, Интерфейс, html : Делаем вывод новостей в 3 колонки

irbees2008 Опубликовано - 5 - апреля Верстка

Автор: --------------
Адаптировал: irbees2008
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

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

Код:

1<div style="width:33%;float:left;">
2    <div class="short-story">
3            <div class="img-size">{short-story}</div>
4                <div class="clr"> </div>
5                    <div id="catitle">[full-link]{title}[/full-link]</div>
6    </div>
7</div>

2. поясняю

div style="width:33%;float:left" - задает относительную ширину новости по отношению к колонке контента и выравнивает новости по левому краю
div class="short-story" - блок короткой новости
div class="img-size" - класс для задания стиля картинкам
div class="clr" - убираем наложение картинок на текст
div id="catitle" - класс для оформления стиля заголовка

3.задаем стили нашему блоку т.е. в css добавляем или заменяем старые стили если классы совпадают

Код:

1.short-story {
2    border: solid 1px #353535;
3    border-radius: 8px;    
4    margin: 15px 15px 10px 10px;
5    height: 290px;
6    overflow: hidden;
7    background: #353535;
8    box-shadow: 2px 2px 2px #888;
9}

border: solid 1px #353535; - бордер для новости
border-radius: 8px; - радиус углов бордера
margin: 15px 15px 10px 10px; - отступы новостей, зависит от ширины колонки
height: 290px; - высота блока новостей. нужна в том случае, если мы хотим использовать длинный заголовок в несколько строк. В обратном случае если не прописать железно высоту, то блоки новостей в нижних рядах не будут выводиться ровно в столбик а как попало из-за разницы высоты блоков.
overflow: hidden; - обрезаем содержимое новостей если оно вылазит за заданные границы
background: #353535; - задаем темный фон для новостей
box-shadow: 2px 2px 2px #888; - добавляем тень

А для желающих изменить стиль есть онлайн генераторы стилей
4.Задаём фиксированную высоту картинками

Код:

1.img-size img {
2    height: 250px;
3}

5.Добавляем оформление для заголовков :

Код:

01#catitle {
02    font-weight: bold;
03    font-size: 13px;        
04    text-align: center;
05    padding: 10px 0;
06    margin: 2px 0 0 0;
07}
08 
09#catitle a {
10    color: #ffd40b;
11    text-shadow: 0 1px 1px #949494;
12}

6.Вот и все пользуемся

Можешь почитать и вот эту статейку "Установка и настройка плагина "auth_basic""

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

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