Вид материалов с полным постером новости для ucoz

hardy

Дата: Четверг, 21.07.2011, 20:47 | Сообщение # 1

Hardy всегда прав!

Сообщений: 1469

Красивый и легкий вид материалов для вашего сайта, предназначен для любых модулей вашего сайта ucozon.ru Используется небольшой стиль CCS3 и минимум кода HTML для полной легкости. Каркас сделан из таблицы.
Вывод информации происходит стандартно, так же и с выводом постера, описания, и информации о дате и пользователи автора.Вид новостей с полным постером для ucoz
Тематикой своим дизайном подходит под любой тип сайта, но желательно светлого цвета, вложены некоторые нововведения для удобства отображения картинки с эффективностью дизайна.
Данные стили могут не работать в браузере IE так как используется свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.Со значения hidden - Отображается только область внутри элемента, остальное будет скрыто.

Что встроено?
Обрезание скриншота под размер 200 px и показ его в 100% разрешение, пример смотрите скриншот
Можно использовать во многих модулях, так как есть условия на вывод скриншота из почти любой формы загрузки
Кнопка благодарности, повышает рейтинг материала, и при добавление страницы добавляет +1

Установка:
В таблицу стиля css вставляем сам стиль вида новостей:

Code

.blok_botom {background:#FFFBFF;padding:5px;border:1px solid #D6D7D6; border-radius: 0px 0px 5px 5px;}

  .obrez {
  max-height: 200px; !important;
  max-width: 200px;
  overflow: hidden;
  border: 1px solid #999;
  }

  .titleb {
   font-size:22px;
   font-weight:normal;
   border-left:7px solid #CCC;
   background:#F0F0F0;
   margin-top:5px;
   margin-bottom:1px;
   color:#005BBF;
   font-family:'Arial Narrow','Trebuchet MS',Arial, Helvetica, sans-serif;
   padding:4px;
   padding-left:19px;
   padding-right:60px;
   position:relative;
   display:block;
  }

В модуле котором хотим изменить вид, заходим через Панель управления, дизайн, вид материалов.
Удаляем там весь старый код и вставляем в замен, нижеприведенный:

Code

<div class="titleb"> <a href="$ENTRY_URL$"><b>$TITLE$</b></a><?if($MODER_PANEL$)?> $MODER_PANEL$<?endif?></div>
  <?if($MESSAGE$)?><div class="e-Message" style="text-align: left; clear: both; padding-top: 2px; padding-bottom: 2px;">
<div class="blok_botom">
<table class="e-details" style="padding: 6px 7px;" width="100%" height="100%"><tbody><tr><td width="150px">
<div class="obrez">
  <?if($OTHER1$)?><img src="$OTHER1$" alt="$TITLE$"><?else?>
  <?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" alt="$TITLE$"><?else?>
  <?if($IMG_URL1$)?><img src="$IMG_URL1$" alt="$TITLE$"><?else?><img src="http://ucozon.ru/SCRIN7/1/ryjrsght5.png" alt="$TITLE$"><?endif?><?endif?><?endif?><br></div>
</td><td style="text-align: left; vertical-align: top; padding-left: 15px; padding-top: 10px; letter-spacing: 0pt; word-spacing: 0pt;">
  $MESSAGE$<?endif?>
  <?if($ATTACHMENTS$)?><div class="eAttach">Прикрепления: $ATTACHMENTS$</div><?endif?></td></tr></tbody></table>
<table class="e-details" style="padding: 6px 7px; width: 100%;"><tbody><tr><td>
  <?if($CATEGORY_NAME$)?>Категория: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a><?endif?> Просмотров: $READS$
  <?if($USERNAME$)?>Добавил: <a href="$PROFILE_URL$">$USERNAME$</a><?endif?>
  <?if($COMMENTS_URL$)?>Комментарии: <a href="$COMMENTS_URL$"><?if($COMMENTS_NUM$=='0')?>Нет<?else?>$COMMENTS_NUM$<?endif?></a><?endif?>
  Дата: $DATE$
</td><td align="right"><?if($RATING$)?> <div align="right" style="padding-right: 10px;"><a style="text-decoration: none;" href="javascript://" id="golike" onclick="$.get('/news/0-0-5-$ID$-15-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка!',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успешно!',{w:270,h:60,t:8000})};});"><img align="absmiddle" style="margin-top: -3px; border: none" id="like_img" src="http://s20.ucoz.net/img/icon/thumbu.png"> <span id="num_like" title="Голосов">$RATED$</span></a></div> <?endif?></td></tr>
</tbody></table>
<br></div></div>

Остается настроить под свой цвет, и мелочи и можно пользоваться.
автор: mdbaner
сайт автора: http://ucozon.ru
при копирование уважайте труды автора и не забывайте писать сайт автора, что бы он мог ответить на вопросы пользователя.
Автор\Источник: ucozon.ru