| 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
|
| |
| |
