2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии

Отличный вид материалов для uCoz

Виды материалов 2013-Янв-29 Scriptoza 4.5k 0

Заменяем вид материалов каталога файлов на этот код
Код
<div class="news">
<div class="news_l">
  <h2><a href="$ENTRY_URL$" style="font: italic 18px Georgia,Serif;">$TITLE$</a></h2>
  <div class="img_news">
  <?if($IMG_URL1$)?><a title="Смотреть изображение новости $TITLE$" href="$IMG_URL1$" class="highslide" onclick="return hs.expand(this)"> <img src="$IMG_URL1$" alt="$TITLE$"></a><?else?><img src="http://oyama-do.ru/images/net_izobrazhenija.png" alt="$TITLE$"></a><?endif?>
  </div>
  <div id="files"><p class="message"><?if(len($MESSAGE$)>350)?><?substr($MESSAGE$,0,350)?>...<?else?>$MESSAGE$<?endif?></p></div>
  <div class="clear"></div>
</div>
<div class="news_r">
<div class="date" title="$WDAY$ в $TIME$">$DATE$</div>
<ul>
  <li><img src="/images/user.png" alt=""/><a href="$PROFILE_URL$" title="автор материала">$USERNAME$</a></li>
  <?if($CATEGORY_NAME$)?><li><img src="http://oyama-do.ru/images/cat.png" alt=""/><a href="$SECTION_URL$" title="Катигория $CATEGORY_NAME$">$SECTION_NAME$</a></li><?endif?>
  <li><img src="http://oyama-do.ru/images/comm.png" alt=""/><a href="$COMMENTS_URL$" title="комментариев">$COMMENTS_NUM$</a></li>
  <li><img src="http://oyama-do.ru/images/eye.png" alt=""/><span title="просмотров">$READS$</span></li>
</ul>
</div>
</div><!--/news-->
<style type="text/css" media="all">  
  @import url(http://oyama-do.ru/highslide/highslide.css);  
  </style>  
  <script type='text/javascript' src='http://oyama-do.ru/highslide/highslide.js'></script>  
  <script type='text/javascript' src='http://oyama-do.ru/highslide/include_highslide.js'></script>
  <script type="text/javascript">  
  hs.graphicsDir = 'http://oyama-do.ru/highslide/graphics/';  
  </script>

в CSS:
Код
/* style news */
.clear {
  clear:both;
}
.news {
  width:auto;  
  position:relative;
  margin-bottom:10px;
  padding:15px;
  background:#fff;
  border:1px solid #d3d3d3;
  font-family:helvetica, arial, sans-serif;
}
.news_l {
  padding-right:145px;
  min-height:150px auto;
}
.news_r {
  width:140px;box-shadow: 0px 0px 20px #0a2840 inset;
  height:100%;
  background:#f4f4f4;
  position:absolute;
  top:0;
  right:0;
  text-align:center;
}
.news h2 {
  margin:0;
  background:url(http://oyama-do.ru/images/stripe.png) 0px 7px repeat;
  height:20px;
  overflow:hidden;
  margin:10px 0 15px 0;
  position:relative;
}
.news h2 a {
  background-color: #fff;  
  width:auto;  
  margin: -1px 0px 0px 5px;  
  position: absolute;
  text-decoration:none;
  color:#89a0af; /*цвет заголовка новости*/
  font-size:16px;
}
.news h2 span a {
  padding-right:0;
}
.img_news {
  float:left;
  display:inline-block;
  margin:0 14px 5px 0;
  padding:5px;
  background:#EDF1F2;
  border:1px solid #DDE1E2;
}

.img_news img {
  width:220px;
height:100px;
  border:1px solid #DDE1E2;
}
.message {
  padding:0 0 10px 0;
  margin:0;
  font-size:12px;
  line-height:19px;
  text-align:justify;
}
.news_r .date {
  display:inline-block;
  position:relative;
  font-size:13px;
  padding:7px 10px 4px 10px;
  margin:18px 0 -5px 0;
  background:#6099bf; /*цвет блока с датой*/
  border:1px solid #fff;border-radius: 5px;box-shadow: 0 0 5px #40310a;
  color:#fff;
  text-align:center;
}
.news_r ul {
  list-style:none;
  margin:0;
  padding:0;
  text-align:left;
  width:100px;
  margin:18px auto 0 auto;
  font-size:12px;
}
.news_r ul li {
  padding:3px 0 3px 5px;
  border-bottom:1px dotted #BEBEBE;
}
.news_r ul li img {
  margin-right:10px;
  position:relative;
  top:4px;
}
.news_r ul li a, .news_r ul li span {
  color:#707070;
  text-decoration:none;
  }

Вот и всё! Не забудьте сказать спасибо!
Источник: oyama-do.ru
0 комментариев
avatar