Как изменить вид видео роликов в компоненте InstantVideo

Letsgo

Опубликовано: 2015-03-12T04:19:21+03:00

Редактировалось: 3 раза — последний сегодня в 14:52

Просмотров: 4116

Голосов: 0

Доброго дня. Сегодня попробую вам рассказать, как изменить вид видео роликов в компонент InstantVideo для Instantcms. Это достаточно простой вопрос, для того, кто уже знаком близко со стилями css? но зачастую возникают вопросы от тех, кто знаком с этим мало и хотел бы переработать их вид под себя. на самом деле это очень просто и сейчас мы пройдёмся по этому моменту. Код ролика находится в стиле invideo.css надеюсь вы уже установили notepad+++ которым мы и будем редактировать вид роликов.

Как изменить вид видео роликов в компоненте InstantVideo

Берём изначальный код.

Код PHP:

.sort_list li {
	list-style: none outside none;
    margin: 0 0 15px 7px;
    clear: both;
    display: block;
    overflow: hidden;
}
.sort_list li:hover {
    border-right: 1px dashed #CCC;
}
.sort_list li .thumb img {
    width:193px;
    border: none;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.sort_list .thumb {
    background:transparent none repeat scroll 0 0;
    float: left;
    margin: 0 15px 0 0;
    height:109px;
    overflow:hidden;
    width:193px;
    position:relative;
    text-decoration:none !important;
}
.sort_list li p {
	font-size:11px;
    margin: 5px 0 0 0;
}
.sort_list li .list_description {
    margin: 5px 0 0 0;
}
.sort_list li div.li_descr {
    overflow: hidden;
}
.sort_list li h5 {
    font-size:14px;
}
.sort {
	clear:both;
	display:block;
	position:relative;
	margin: 5px 0 0;
	padding: 0px;
}
.sort li {
	display:block;
	float:left;
	height:168px;
    margin: 0 6px 0 0;
    padding: 4px;
	position:relative;
	width:211px;
	line-height:14px;
	list-style: none outside none;
}
.sort li:hover, .mov_selected {
	-moz-box-shadow:0 1px 3px rgba(0, 0, 0, .5), inset 0 -1px 0 #fff;
	-ms-box-shadow:0 1px 3px rgba(0, 0, 0, .5), inset 0 -1px 0 #fff;
	-o-box-shadow:0 1px 3px rgba(0, 0, 0, .5), inset 0 -1px 0 #fff;
	-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .5), inset 0 -1px 0 #fff;
	box-shadow:0 1px 3px rgba(0, 0, 0, .5), inset 0 -1px 0 #fff;
	background-image:-moz-linear-gradient(top, #fff 0, #f0f0f0 100%);
	background-image:-ms-linear-gradient(top, #fff 0, #f0f0f0 100%);
	background-image:-o-linear-gradient(top, #fff 0, #f0f0f0 100%);
	background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100%, #f0f0f0));
	background-image:-webkit-linear-gradient(top, #fff 0, #f0f0f0 100%);
	background-image:linear-gradient(to bottom, #fff 0, #f0f0f0 100%);
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#f0f0f0)
}
.sort li p {
	font-size:11px;
}
.sort li .thumb {
background:transparent none repeat scroll 0 0;
display:block;
height:109px;
overflow:hidden;
position:relative;
text-decoration:none !important;
}
.sort li .thumb img {
width:211px;
border: none;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
li.cb, .cb {
border:0 none !important;
clear:both !important;
float:none !important;
height:0 !important;
margin:0 !important;
padding:0 !important;
}
.thumb .duration {
background: #000;
bottom:2px;
color:#FFF !important;
display:inline-block;
font-size:11px;
padding:0 4px;
opacity: 0.75;
position:absolute;
right:3px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
.thumb_hover {
height:109px;
left:0;
position:absolute;
background-color: transparent;
background-position: center center !important;
background-repeat: no-repeat;
top:0;
width:193px;
}
.thumb:hover .thumb_hover {
background:transparent url("../images/video/thumb_hover.png") no-repeat scroll 0 0;
}
 
.sort li h5 {
height:28px;
overflow:hidden;
margin:5px 0 3px;
clear:both;
font-size:12px;
}

Сейчас он даёт обычный вид роликов, который есть на сайте. Но попробуем с ним разобраться. Итак для начала первое это

Код PHP:

.sort li {
	display:block;
	float:left;
	height:168px;
    margin: 0 6px 0 0;
    padding: 4px;
	position:relative;
	width:211px;
	line-height:14px;
	list-style: none outside none;
}

Это код даёт размер самого ролика со всей информацией. То есть высота указана 168 пикселей, ширина 211 пикселей. Его можно изменить под себя размером, например если указать проценты ширину и высоту уже auto/ Тогда ширина будет от размеров в процентах, а высота в зависимости от длины всей информации. но это зачастую неверно, так как где то будет чуть длиньше ролик, где то меньше и будет раскоряка. Значит надо обязательно вывести высоту.

Попробуем изменить

.sort_list li {
max-width: 247px;
min-width: 245px;
width: 23%;
float: left;
height: auto;
margin: 10px 5px;
padding: 5px;
position: relative;
line-height: 12px;
-webkit-transition: all 0.7s;
transition: all 0.7s;
background: #FFF;
list-style: none;
border: 1px solid #C1C0C0;
}

Каким будет вид ролика? Вот скрин

Это я бы назвал небольшими роликами в ширину, когда картинка находится слева, а справа находится описание и прочая информация. Но тогда меняется и остальное. Чтобы размер шрифта подходил, а также размер картинки.

Оформление стилей картинки будет следующим

.sort_list .thumb {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
float: left;
margin: 0px 0px 0px 0px;
height: 80px;
overflow: hidden;
width: 102px;
position: relative;
text-decoration: none !important;
padding: 0px 1px;
}

.sort_list li .thumb img {
width: 142px;
border: none;
height: 120px;
margin: -20px -20px;
}

А как было раньше? было вот так

Код PHP:

.sort li .thumb {
background:transparent none repeat scroll 0 0;
display:block;
height:109px;
overflow:hidden;
position:relative;
text-decoration:none !important;
}
.sort li .thumb img {
width:211px;
border: none;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

Что изменено? Сами размеры картинки, плюс сделано так, чтобы края, которые обычно у картинок черные были спрятаны от вида и картинка имела нормальный вид. Вот скрины нормального вида и как могло быть.

Дальше нам надо изменить размеры шрифта

Код PHP:

.sort_list li h5 {
overflow: hidden;
margin: 0px;
padding: 1px 3px 5px 10px;
font-size: 10pt;
line-height: 14px;
text-decoration: none !important;
height: 37px;
font-weight: bold;
bottom: 0px;
}

Я прописываю размеры новые и отступы, а также ставлю изменяю высоту блока названия ролика. Для сравнения старый код

Код PHP:

.sort li h5 {
height:28px;
overflow:hidden;
margin:5px 0 3px;
clear:both;
font-size:12px;
}

Теперь возьмёмся за отображение длительности видео ролика

.sort_list .thumb .duration {
color: #EEE;
display: inline-block;
font-size: 8pt;
padding: 2px 3px;
left: 0px;
width: 100%;
box-sizing: border-box;
z-index: 1;
background: rgba(0, 0, 0, 0.6);
}

Получается вот такой вот вид. Плюс я добавляю фоном прозрачный чёрный, чтобы немного просвечивала картинка. Если хотите сплошной фон то бекграунд лучше поставить #222 например.

Дальше по названию категории. Я считаю это вредным и убираю из файлы модуля название категории вообще. Это ни к чему. Остаётся теперь информация о ролике, просмотры и прочее

там будет вот такой код.

.sort_list li p {
font-size: 8pt;
margin: 0px;
padding: 2px 3px;
top: 0px;
width: 100%;
color: #191919;
box-sizing: border-box;
text-align: right;
}

Сравнив стандартный вид и на скрине, вы можете увидеть, как изменилось отображение.

Как было дефолтно

Как стало

Что должно теперь быть? Смотрим как был стандартный ролик и каким стал он после изменения стиля. Таким образом вы можете делать любой вид роликов, просто сравнивайте код, пользуйтес

Нужна картинка на... Рецензия - Разработка...

Комментарии (0)

Нет комментариев. Ваш будет первым!

Добавить комментарий

Как изменить вид видео роликов в компоненте InstantVideo

Голосуем

Корзина товаров

Комментарии

Новое в магазине

Instant CMS - клуб сайтов На InstantCMS

© 2022 все права защищены