Хотите, чтобы новости на Вашем сайте были красивы и опрятны? Чтобы картинки были всегда одного размера, а не маленькая в 1, большая во 2, на пол страницы в 5 и так далее? Тогда читаем этот топик и набираемся информации(Возможно не новое, но делал для себя сам на основе кода одного шаблона).
Для начала берем шаблон(паблик, свой), здесь взят «protube 2 версия». Определяемся какой размер в краткой новости нам нужен. Здесь будут взяты: shortstory-150x200; fullstory-300x420;
1. Открывем shortstory.tpl выбранного шаблона.
Код:
<div id="shortstory">
<div class="content clear">
<h1 class="title_h">[full-link]{title}[/full-link] {approve}</h1>
{short-story}[edit-date]<br />
<span class="copy"><i>Новость отредактировал <font color="red"><b>{editor}</b></font> - {edit-date}</i></span>[edit-reason]
<div class="quote">Причина: {edit-reason}</div>
[/edit-reason]<br />
[/edit-date] </div>
<div class="clear2"></div>
<div class="clear">
<div class="left"> {rating} </div>
</div>
</div>
<div class="shortstory-bottom">[full-link]Скачать[/full-link]
<div class="view">ПРОСМОТРОВ: {views}</div>
</div>
Нам нужны вот эти строки:
Код:
<div class="content clear">
<h1 class="title_h">[full-link]{title}[/full-link] {approve}</h1>
{short-story}[edit-date]<br />
<span class="copy"><i>Новость отредактировал <font color="red"><b>{editor}</b></font> - {edit-date}</i></span>[edit-reason]
<div class="quote">Причина: {edit-reason}</div>
[/edit-reason]<br />
[/edit-date] </div>
<div class="clear2"></div>
<div class="clear">
Здесь мы видим, что тег "{short-story}" стоит в . Значит нам нужен css стиль «content».
2. Заходим в css и ищем стили с content.
Вот что нам нужно:
Код:
.#shortstory .content { padding-bottom: 1em; }
#shortstory .content img {
margin-right: 1em;
margin-bottom: 0.5em;
}
Теперь нам надо добавить стиль картинки к этому блоку.
Ниже добавляем:
Код:
#shortstory .content img:first-child {
display: block !important;
float: left;
width: 150px; /* здесь размер ширины изображения в краткой новости. */
height: 200px; /* Здесь размер высоты изображения в краткой новости. */
}
У нас должно получиться:
Код:
#shortstory .content { padding-bottom: 1em; }
#shortstory .content img {
margin-right: 1em;
margin-bottom: 0.5em;
}
#shortstory .content img:first-child {
display: block !important;
float: left;
width: 150px; /* здесь размер ширины изображения в краткой новости. */
height: 200px; /* Здесь размер высоты изображения в краткой новости. */
}
3. Смотрим картинки в краткий новостях. Они автоматически уменьшаются до выбранной высоты и ширины в CSS стиле #shortstory .content img:first-child.
Теперь смотрим полную новости и видим, что… Картинки тоже уменьшаются, но вдруг нам надо в полной новости другие размеры картинок, что мы делаем? Если Вам все равно, не читайте дальше, но если Вам это важно, то читаем.
1. Смотрим код полной новости.
Код:
{poll}
<div id="shortstory">
<div class="date">{date} | {link-category} | [edit]<img src="{THEME}/images/edit.gif" alt="Редактировать новость" width="16" height="16" align="absmiddle" />[/edit]</div>
<h1 class="title_h">{title}</h1>
<div class="content clear">
{full-story}
<div align="center">{pages}</div>
</div>
<div class="clear2"></div>
<div class="detail clear">
<div class="left">{rating}</div>
</div>
</div>
<div class="comm-header"><div class="right-comm">Комментарии ({comments-num})</div><h2>User Comments</h2></div>
Здесь нам нужно:
Код:
<div class="content clear">
{full-story}
<div align="center">{pages}</div>
</div>
2. Тег {full-story} заключаем в
У нас должно получиться следующие:
Код:
<div class="content clear">
<div class="content_full">{full-story}</div>
<div align="center">{pages}</div>
</div>
Теперь в CSS ниже нашего #shortstory .content img:first-child добавляем:
Код:
#shortstory .content_full img:first-child {
display: block !important;
float: left;
width: 300px; /* здесь размер ширины изображения в краткой новости. */
height: 420px; /* Здесь размер высоты изображения в краткой новости. */
}
У нас должно получиться следующие:
HTML:
#shortstory .content { padding-bottom: 1em; }
#shortstory .content img {
margin-right: 1em;
margin-bottom: 0.5em;
}
#shortstory .content img:first-child {
display: block !important;
float: left;
width: 150px; /* здесь размер ширины изображения в краткой новости. */
height: 200px; /* Здесь размер высоты изображения в краткой новости. */
}
#shortstory .content_full img:first-child {
display: block !important;
float: left;
width: 300px; /* здесь размер ширины изображения в краткой новости. */
height: 420px; /* Здесь размер высоты изображения в краткой новости. */
}
Скачать шаблон PROTUBE можно здесь:
Для просмотра ссылки Войди или Зарегистрируйся.
Ссылка на шаблон взята от сюда:
Для просмотра ссылки Войди или Зарегистрируйся.
Финальный результат здесь:
Для просмотра ссылки Войди или Зарегистрируйся.
DONATE to NULLED!
