• Страница 1 из 1
  • 1
Современный вид материала для uCoz
Kentos311Дата: Вторник, 09.01.2018, 13:47 | Сообщение # 1
Сообщений: 729
Статус:

Для вас хочу предоставить очень простенький и красивый вид материала. Данный вид отлично подойдет для стандартного дизайна системы uCoz, вид легко поддается любому редактированию, и ширине, цвете, или более других массовых изменений. Вид материала - очень хорошо и настроен под светлые дизайна сайта, он выводит самую необходимую информацию для гостей вашего ресурса. Это изображение материала, название его, название очень хорошо расположено, и имеет свой выделенный оттенок по цвету. Также краткое описание что очень даже удобно, сколько просмотров было на данный материал, в каком он разделе, в какой он категории добавлен, просмотры, и сколько было загрузок. Кнопка скачать очень удобно расположена, при наведении на неё она будет изменять цвет, что очень даже удобно.

Установка:

1. Вид материала вставить:
Код
<div class="mini_vid clr">  
  <div class="mini_vid_title"><a href="$ENTRY_URL$">$TITLE$</a></div>  
  <div class="mini_vid_img"><a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$"></a></div>  
  <div class="mini_vid_message_detali">  
  <div class="mini_vid_detali2">  
<span>Раздел: <a href="$SECTION_URL$">$SECTION_NAME$</a></span> |  
<span>Категория: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></span>  
  </div>  
  <div class="mini_vid_message">$MESSAGE$</div>  
  <div class="mini_vid_detali">  
<span>Просмотров: $READS$</span> |  
<span>Загрузок: $LOADS$</span>  
  <span class="dalee"><a href="$ENTRY_URL$">Скачать</a></span>  
  </div>  
  </div>  
</div>


2. В таблицу стилей CSS вставить:
Код
.mini_vid {  
  margin-bottom: 10px;  
  height: 200px;  
  border-bottom: solid #EDEDED;  
}  

.mini_vid_title {  
  height: 35px;  
  line-height: 34px;  
  padding-left: 10px;  
  background-color: #4E453C;  
  margin-bottom: 5px;  
  border-radius: 3px;  
}  

.mini_vid_title a {  
  color: #fff;  
  font-size: 16px;  
  background-color: #322C26;  
  padding: 0 10px 3px 10px;  
  border-radius: 3px;  
  -webkit-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px;  
  -moz-box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px;  
  box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5), rgba(255,255,255,0.16) 0px 1px 0px, rgba(255,255,255,0.05) 0px 0px 0px 1px;  
}  

.mini_vid_title a:hover {  

}  

.mini_vid_img {  
  width: 250px;  
  height: 150px;  
  display: inline-block;  
  float: left;  
}  

.mini_vid_img img {  
  width: 250px;  
  height: 150px;  
  border-radius: 3px;  
}  

.mini_vid_message_detali {  
  float: right;  
  width: 430px;  
}  

.mini_vid_message {  
  text-align: justify;  
  height: 90px;  
  overflow: hidden;  
  line-height: 135%;  
  margin: 5px 0;  
}  

.mini_vid_detali2 {  
  background-color: #ccc;  
  border-radius: 3px;  
  padding: 0 0 0 7px;  
  font-size: 12px;  
  height: 25px;  
  line-height: 25px;  
  color: #000;  
}  

.mini_vid_detali2 a {  
  color: #fff;  
}  

.mini_vid_detali {  
  background-color: #ccc;  
  border-radius: 3px;  
  padding: 0 0 0 7px;  
  font-size: 12px;  
  height: 25px;  
  line-height: 25px;  
  color: #000;  
}  

.mini_vid_detali a {  
  color: #fff;  
}  

.dalee {  
  float: right;  
}  

.dalee a {  
  display: block;  
  color: #fff;  
  background-color: #4E453C;  
  border-radius: 3px;  
  padding: 0 10px;  
}  

.dalee a:hover {  
background-color: #f27935;  
  text-decoration: none;  
}


Автор: Дмитрий Николаев

Современный вид материала для uCoz
Прикрепления: 1520866.png (130.0 Kb)
 
  • Страница 1 из 1
  • 1
Поиск: