|
|
Дата: Среда, 10.01.2018, 01:31 | Сообщение # 1
|
Сообщений: 729
Статус: 
|
Думаю многие занимаются тематикой "кино" на системе uCoz. Для вас специально хочу предоставить красивый функциональный вид материала, который придаст вашему шаблону очень хорошею изюминку. Вид материала сделан в колонки, и тем самым выводит больше фильмов чем обычный вид. В нем присутствует изображение фильма, сверху доступна информация о просмотрах, сколько комментарий, и рейтинг. Как вы успели заметить в этот вид добавлен маленький колокольчик, который будет извещать вас об обновлении любимого фильма или сериала.
1. Скачиваем архив, папку img закиньте в корень своего сайта.
2. В таблицу стилей CSS:
Код
/*-------------------------------------*/
.mn_block {float:left;width: 265px;padding: 0px;height: 370px;position:relative;opacity:1.0;}
.mn_block:hover{ opacity:0.9;}
.mn_b_title {overflow:hidden;width: 263px;padding: 8px;position: absolute;bottom: 0px;}
.mn_block:hover .moveBg {background: rgba(0, 0, 0, 0.0);-o-transition:background .4s ease;-webkit-transition:background .4s ease;-moz-transition:background .4s ease;-ms-transition:background .4s ease;}
.uRelatedEntries {list-style: disc outside; margin-left: 10px;}
.uRelatedEntry {list-style: disc outside; margin-bottom: 2px;}
.uRelatedEntry a {font-size: 14px; color: #0047AA; text-shadow: 1px 1px 0px #eee;}
.uRelatedEntry a:hover {text-decoration: underline; color: #3B7EDD;}
.mn_play:hover {background: url(/img/play1.png) no-repeat #429cdb 0px -30px; height: 30px;}
.mn_read {background-position:0 0;}
.mn_comm {background-position:0 -200px;}
.mn_rate{background-position:0 -600px;padding:0 0 0 20px;}
.mn_rate:active {background-position:-1000px -600px;}
.mn_author{background-position:0 -600px;padding:0 0 0 20px;}
.mn_author:hoverbackground-position:-1000px -600px;}
.e-date {background-position:0 -300px;padding:0 0 0 20px;}
.e-date:hover {background-position:-1000px -300px;}
.mn_info {top: 0px; width: 100%; background: rgba(0,0,0,0.6); position: absolute; font: 10px/29px "PT Sans";}
.mn_play {float:left; background: url(/img/play1.png) no-repeat 0px 0px; width: 31px; height: 30px; display: inline-block; position: relative; z-index: 1000;}
.e-date {background:url(/img/details1.png) 0 -300px no-repeat;padding:0 0 0 20px;margin:0 10px 0 0;display:inline-block;height:20px;line-height:15px;}
.mn_read {background:url(/img/details1.png) 0 0 no-repeat;padding:0 0 0 20px;margin:0 10px 0 0;display:inline-block;height:15px;line-height:15px;color:#fff;text-decoration: none;}
.mn_author {background:url(/img/details3.png)0 -600px no-repeat;padding: 0 0 0 20px;margin: 0 10px 0 0;display: inline-block;height: 15px;line-height: 15px;color:#fff;text-decoration: none;position: relative;top: 4px;}
.mn_comm { line-height: 15px; margin: 0 10px 0 0; padding: 0 0 0 20px;display: inline-block;color:#fff;background: url(/img/details1.png) 0 -200px no-repeat;text-decoration: none;}
.mn_rate {background: url(/img/details1.png) 0 -600px no-repeat;padding: 0 0 0 20px;margin: 0 10px 0 0;display: inline-block;height: 15px;line-height: 15px;color:#fff;text-decoration: none;}
.typeContent {color: #f87979;text-align: center;}
.mn_more .str {background:url(/img/strs.png) 100% 0px;width: 12px;height: 27px;position:absolute;left: -12px;top: 20px;}
.com_bott {top: 89px;position: absolute;width: 220px;height: 21px;}
.mn_block:hover {background:#fff;}
.mn_block img, .mn_block a img {margin-bottom: 0px;height: 370px;width: 265px;}
.mn_block h2, .mn_block a h2 {text-shadow: 0px 0px 20px #000, 1px 1px 1px #9C383A;text-transform: uppercase;font: 900 15px "Arial Black", sans-serif;color: #fff;text-align: center;}
.mn_more {background: rgba(255, 255, 255, 0.93);display: none;font-size: 10px;height: 354px;padding: 8px;position: absolute;right: 0px;top: 0px;width: 218px;z-index: 1;}
.mn_m_title {color:#474747;margin-bottom: 8px;padding: 0px 0px 8px 30px;border-bottom: 1px dashed #999;font-weight: 900;}
.min_rating {position:relative;top: 40px;}
.min_rating span {float:left; font-size: 16px; margin-left: 5px;}
.u-star-rating-20 {float:left;}
.mn_m_title span {color:#929292; display:block;}
.mn_more .str {background:url(/img/strs.png) 100% 0px;width: 12px;height: 27px;position:absolute;left: -12px;top: 20px;}
.mn_block:hover .moveBg {background: rgba(0, 0, 0, 0.0);-o-transition:background .4s ease;-webkit-transition:background .4s ease;-moz-transition:background .4s ease;-ms-transition:background .4s ease;}
/*---------------------------------------------*/
3. Вид материала:
Код
<div class="mn_block">
<div id="#imgosv">
<div class="mn_author" title="Новенькое"></div>
<a href="$ENTRY_URL$" ><img src="$IMG_URL1$" title="$TITLE$"></a>
<div class="moveBg"></div>
<div class="mn_info" style="cursor: pointer;">
<div class="mn_play bt$ID$"></div><a style="text-decoration:none;cursor: default;"></a>
<a class="mn_comm" title="Комментарии" style="text-decoration:none;cursor: default;">$COMMENTS_NUM$</a>
<span class="mn_rate" title="Лайки" style="text-decoration:none;cursor: default;">$RATED$</span>
<span class="mn_read" title="Просмотры" style="text-decoration:none;cursor: default;">$READS$</span>
<?if($DATE$='Сегодня' or $DATE$='Вчера')?><div class="mn_author" title="Новенькое" style="padding: 0 0 0 20px;"></div><?endif?>
</div>
</div>
<div class="mn_b_title"><p></p></div>
<div class="mn_more pan$ID$" style="display: none;">
<div class="str"></div>
<div class="mn_m_title"><strong><font color="#f85c5c" size="4" style="font-size: 8pt;">Сейчас в кино</font></strong></div>
<div style="position:relative; overflow:hidden; height: 200px;">
<div id="news-id-512" style="display:inline;">
<font color="#000000"><noindex><b>Название: $TITLE$</b></noindex></font><hr>
<font color="#000000"><noindex><b>Дата выхода: $DATE$</b></noindex></font><hr>
<font color="#000000"><noindex><b>Возрастная категория: $AUTHOR_NAME$</b></noindex></font><hr>
<font color="#000000"><noindex><b>Категория: $CATEGORY_NAME$</b></noindex></font><hr>
<font color="#8b0000"><noindex><b>Добавил: $USERNAME$</b></noindex></font><hr>
</div>
<div class="com_bott" style="top: 180px;width: 200px;"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.bt$ID$').mouseover(function(){
$('.pan$ID$').fadeIn(0);
};).mouseleave(function(){
$('.pan$ID$').fadeOut(0);
};);
};);
</script>
</div>
Авторы вид материала: Milan_Shubin, waak
|
| |
|
|
|
Milan_Shubin
|
Дата: Четверг, 29.03.2018, 17:01 | Сообщение # 2
|
Сообщений: 3
Статус:
|
мда, а источник указать забыли? или к черту источник!  хотя-бы автора укажите если не трудно!)))) |
| |
|
|
|
|
Дата: Пятница, 30.03.2018, 00:03 | Сообщение # 3
|
|
Сообщений: 729
Статус:
|
Milan_Shubin, А кто автор то?, указать не проблема...... |
| |
|
|
|
Milan_Shubin
|
Дата: Пятница, 30.03.2018, 10:38 | Сообщение # 4
|
|
Сообщений: 3
Статус:
|
, ты быть его взял с моего бывшего сайта turbo-s?) автор я, и waak) |
| |
|
|
|
DalmatiN
|
Дата: Пятница, 30.03.2018, 18:07 | Сообщение # 5
|
Сообщений: 4
Статус:
|
Я этот вид материалов уже года два назад выдёргивал с сайта одного киношного и не уверен что вы авторы, максимум изменили или код переделали. |
| |
|
|
|
Milan_Shubin
|
Дата: Пятница, 30.03.2018, 18:10 | Сообщение # 6
|
|
Сообщений: 3
Статус:
|
amurkeys, Есть такой-же вид материалов но его версия 1 а это обновленный и чуть изменен v2, было добавлено типа описание, автор, и много другое точно не знаю что был! |
| |
|
|
|
|
Дата: Пятница, 30.03.2018, 20:48 | Сообщение # 7
|
|
Сообщений: 729
Статус:
|
Milan_Shubin, Спорить не буду, откуда брал не помню если честно, указать указал, думаю всё хорошо?. |
| |
|
|
