Берём изначальный код.
Код 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; } clear:both; display:block; position:relative; margin: 5px 0 0; padding: 0px; } 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; } -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) } font-size:11px; } background:transparent none repeat scroll 0 0; display:block; height:109px; overflow:hidden; position:relative; text-decoration:none !important; } 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; } height:28px; overflow:hidden; margin:5px 0 3px; clear:both; font-size:12px; }
Код PHP:
Это код даёт размер самого ролика со всей информацией. То есть высота указана 168 пикселей, ширина 211 пикселей. Его можно изменить под себя размером, например если указать проценты ширину и высоту уже auto/ Тогда ширина будет от размеров в процентах, а высота в зависимости от длины всей информации. но это зачастую неверно, так как где то будет чуть длиньше ролик, где то меньше и будет раскоряка. Значит надо обязательно вывести высоту.
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_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:
Что изменено? Сами размеры картинки, плюс сделано так, чтобы края, которые обычно у картинок черные были спрятаны от вида и картинка имела нормальный вид. Вот скрины нормального вида и как могло быть.
background:transparent none repeat scroll 0 0; display:block; height:109px; overflow:hidden; position:relative; text-decoration:none !important; } 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:
Теперь возьмёмся за отображение длительности видео ролика
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;
}
Сравнив стандартный вид и на скрине, вы можете увидеть, как изменилось отображение.
Как было дефолтно
Как стало
Что должно теперь быть? Смотрим как был стандартный ролик и каким стал он после изменения стиля. Таким образом вы можете делать любой вид роликов, просто сравнивайте код, пользуйтес