» »

Красивый вид материалов файлов CSTA для ucoz


Красивый вид материалов файлов CSTA для ucoz

По своим характеристикам и функциональностью он может подойти как и к файлам так и каталогу новостей. Немного о коде, он Красиво по дизайну выполнен, серый вид чем то похожий на extm, красиво буде смотреться на серых и белых шаблонов сайта. Увеличение картинки в нем не предусмотрено, так как она так будит все хорошо отражать. Но если нужно то можно поставить.
Приступаем к установке:

Код
<style type="text/css" media="all">
@import url(http://zornet.ru/highslide/highslide.css);
</style>
  <script type='text/javascript' src='http://zornet.ru/highslide/highslide.js'></script>  
<script type="text/javascript" src="http://zornet.ru/zornet_ru4/include_highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'http://zornet.ru/highslide/graphics/';
</script>  
<style>  
  .viewn_loop {margin-bottom:7px;}  
  .viewn_t,  
  .viewn_t2 {padding:0 10px 0 0; background:url(http://zornet.ru/CSS-ZORNET/vaccser/ds/viewn_t_bg.png) no-repeat right -34px;}  
  .viewn_t_in {height:34px; background:url(http://zornet.ru/CSS-ZORNET/vaccser/ds/viewn_t_bg.png) no-repeat 0 0;}  
  .viewn_title {height:16px; padding:9px 0 0 12px; overflow:hidden; font-size:13px; font-weight:bold; color:#009900;}  
  .viewn_title a {color:000000; text-decoration:none;}  
  .viewn_title a:hover {text-decoration:underline;}  
  .viewn_c {background:url(http://zornet.ru/CSS-ZORNET/vaccser/ds/viewn_c_bg.png) repeat-y 0 0;}  
  .viewn_c_in {padding:0 3px; overflow:hidden; background:url(http://zornet.ru/CSS-ZORNET/vaccser/ds/viewn_c_bg.png) repeat-y right 0;}  
  .viewn_c_in2 {padding:5px; background:#ededed;}  
  .viewn_detail {overflow:hidden; padding:0 2px; margin:-3px 0 0 0; color:#232323; text-shadow:1px 1px 1px #fff;}  
  .viewn_detail a {color:#FF9900; text-shadow:1px 1px 1px #fff; text-decoration:none;}  
  .viewn_detail a:hover {text-decoration:underline;}  
  .v_detail_b {margin-bottom:-5px;}  
  .right {float:right;}  
  .hr_v {height:3px; margin:3px 0; border-left:1px solid #7c7c7c; border-right:1px solid #7c7c7c; background:url(http://www.csomsk.ru/21-11-10/punktir_x_grey.png) repeat-x 0 1px;}  
  .viewn_cont {overflow:hidden; padding:0 2px;}  
  .viewn_cont img {max-width:100%;}  
  .viewn_cont img[align="left"] {display:block; float:left; margin:0 10px 10px 0;}  
  .viewn_cont img[align="right"] {display:block; float:right; margin:0 0 10px 10px;}  
  .viewn_l {width:155px; height:208px; padding:5px; float:left; margin:0 10px 0 0; overflow:hidden; background:url(http://www.csomsk.ru/21-11-10/viewn_img_border_bg.png) no-repeat 0 0;}  
  .viewn_l img {width:155px !important; height:208px !important; vertical-align:top;}  
  .viewn_r {overflow:hidden; color:#232323; text-shadow:1px 1px 1px #fff;}  
  .hr_v2 {height:1px; margin:5px -6px; border-top:1px solid #fff;border-bottom:1px solid #fff; background:#7c7c7c;}  
  .viewn_b {height:6px; display:block; padding:0 10px 0 0; background:url(http://zornet.ru/CSS-ZORNET/vaccser/ds/viewn_b_bg.png) no-repeat right -6px;}  
  .viewn_b b {height:6px; display:block; background:url(http://zornet.ru/CSS-ZORNET/vaccser/ds/viewn_b_bg.png) no-repeat 0 0;}  

  .viewn_b2 {height:6px; display:block; padding:0 10px 0 0; background:url(http://zornet.ru/CSS-ZORNET/vaccser/ds/viewn_b2_bg.png) no-repeat right -6px;}  
  .viewn_b2 b {height:6px; display:block; background:url(http://zornet.ru/CSS-ZORNET/vaccser/ds/viewn_b2_bg.png) no-repeat 0 0;}  
</style>  
<div class="viewn_loop">  
  <div class="viewn_t">  
  <div class="viewn_t_in">  
  <h4 class="viewn_title"> <a href="$ENTRY_URL$">$TITLE$</a>$MODER_PANEL$</h4>  
  </div>  
  </div>  
  <div class="viewn_c">  
  <div class="viewn_c_in">  
  <div class="viewn_c_in2">  
  <div class="viewn_detail">  
  <div class="right">Pievienoja: <a href="$PROFILE_URL$" target="_blank"><b>$USERNAME$</b></a> » Datums: <span title="$TIME$">$DATE$</span></div>  
  Kategorija: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a>  
  </div>  
  <div class="hr_v"></div>  
  <div class="viewn_cont">  
  <div class="viewn_l"><?if($IMG_URL1$)?><a title=" $TITLE$" href="$IMG_URL1$" class="highslide" onclick="return hs.expand(this)"><img src="$IMG_URL1$" width="155" height="208" alt="$TITLE$"></a><?endif?> </div>  
  <div class="viewn_r">  
  $MESSAGE$  
  </div>  
  </div>  
  <div class="hr_v2"></div>  
  <div class="viewn_detail v_detail_b">  

  <div class="right"> <div><?$RSTARS$('17',' http://zornet.ru/CSS-ZORNET/vaccser/rating.png ','1','float')?> </div></div>  
  Apskatīts: $READS$ | <?if($LOADS$)?>Lejuplādēts: $LOADS$ |<?endif?> Коmentāri: $COMMENTS_NUM$  
  </div>  
  </div>  
  </div>  
  </div>  
  <b class="viewn_b"><b></b></b>  
  </div>


Далее добавляем этот код в вид материалов каталога файлов:

16.04.2012 Просмотров: 1552 Комментарий: (12)

Поделиться в социальных сетях

Материал разместил

Комментарий: 11
avatar
Fil9wa 02.08.2014 03:331
0
Как картинку поставить норм ?
avatar
Fil9wa 08.08.2014 14:042
0
Спасибо
Kosten
Kosten 23.09.2014 20:533
0
В стилях меняем желтый цвет на свой.
Сопрано
Сопрано 04.01.2016 19:384
0
Старый вид, который прошел наверно все тематики,но здесь вы зря выставили желтый оттенок, но все можно изменить за секунды в самом коде.
Kvint
Kvint 04.01.2016 20:125
0
Вот понять не могу, точно знаю сайт с какого этот вид был взят. Но некоторые пишут, что он был адаптирован.
nikolla76
nikolla76 04.01.2016 20:236
0
Да это говорили и писали потому, что раньше адаптацию ставили под свои ссылки а сам код системный, такая реклама была.
Kosten
Kosten 04.01.2016 21:1211
0
Но кто то думаю все равно меняется но не без этого.
AnTron
AnTron 04.01.2016 20:347
0
Так явно под изображение рамку нужно меньше делать. И тогда вы сами увидите совергенно другой стиль.
FeStemBer
FeStemBer 04.01.2016 20:508
0
Все правильно написано, так как самна фотошоп переделан само окно, его сразу не по высоте выставили, это было заметно.
Kosten
Kosten 04.01.2016 21:1110
0
Но как вижу не один ты только ровнял и уменьшал, тоже приходилось и здесь соглашусь, намного лучше.
csretven
csretven 04.01.2016 21:029
0
Если не нашел вид который тебе нужен, всегда этот выручит. Так как он всегда под дизайн и по теме подходил.
avatar