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

Опубликовано:
Редактировалось: 3 раза — последний 14 августа 2018
Просмотров: 2832
0
Голосов: 0
Доброго дня. Сегодня попробую вам рассказать, как изменить вид видео роликов в компонент InstantVideo для Instantcms. Это достаточно простой вопрос, для того, кто уже знаком близко со стилями css? но зачастую возникают вопросы от тех, кто знаком с этим мало и хотел бы переработать их вид под себя. на самом деле это очень просто и сейчас мы пройдёмся по этому моменту. Код ролика находится в стиле invideo.css надеюсь вы уже установили notepad+++ которым мы и будем редактировать вид роликов.

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


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

Код PHP:
  1. .sort_list li {
  2. list-style: none outside none;
  3. margin: 0 0 15px 7px;
  4. clear: both;
  5. display: block;
  6. overflow: hidden;
  7. }
  8. .sort_list li:hover {
  9. border-right: 1px dashed #CCC;
  10. }
  11. .sort_list li .thumb img {
  12. width:193px;
  13. border: none;
  14. border-radius: 4px;
  15. -moz-border-radius: 4px;
  16. -webkit-border-radius: 4px;
  17. }
  18. .sort_list .thumb {
  19. background:transparent none repeat scroll 0 0;
  20. float: left;
  21. margin: 0 15px 0 0;
  22. height:109px;
  23. overflow:hidden;
  24. width:193px;
  25. position:relative;
  26. text-decoration:none !important;
  27. }
  28. .sort_list li p {
  29. font-size:11px;
  30. margin: 5px 0 0 0;
  31. }
  32. .sort_list li .list_description {
  33. margin: 5px 0 0 0;
  34. }
  35. .sort_list li div.li_descr {
  36. overflow: hidden;
  37. }
  38. .sort_list li h5 {
  39. font-size:14px;
  40. }
  41. .sort {
  42. clear:both;
  43. display:block;
  44. position:relative;
  45. margin: 5px 0 0;
  46. padding: 0px;
  47. }
  48. .sort li {
  49. display:block;
  50. float:left;
  51. height:168px;
  52. margin: 0 6px 0 0;
  53. padding: 4px;
  54. position:relative;
  55. width:211px;
  56. line-height:14px;
  57. list-style: none outside none;
  58. }
  59. .sort li:hover, .mov_selected {
  60. -moz-box-shadow:0 1px 3px rgba(0, 0, 0, .5), inset 0 -1px 0 #fff;
  61. -ms-box-shadow:0 1px 3px rgba(0, 0, 0, .5), inset 0 -1px 0 #fff;
  62. -o-box-shadow:0 1px 3px rgba(0, 0, 0, .5), inset 0 -1px 0 #fff;
  63. -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .5), inset 0 -1px 0 #fff;
  64. box-shadow:0 1px 3px rgba(0, 0, 0, .5), inset 0 -1px 0 #fff;
  65. background-image:-moz-linear-gradient(top, #fff 0, #f0f0f0 100%);
  66. background-image:-ms-linear-gradient(top, #fff 0, #f0f0f0 100%);
  67. background-image:-o-linear-gradient(top, #fff 0, #f0f0f0 100%);
  68. background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100%, #f0f0f0));
  69. background-image:-webkit-linear-gradient(top, #fff 0, #f0f0f0 100%);
  70. background-image:linear-gradient(to bottom, #fff 0, #f0f0f0 100%);
  71. filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#f0f0f0)
  72. }
  73. .sort li p {
  74. font-size:11px;
  75. }
  76. .sort li .thumb {
  77. background:transparent none repeat scroll 0 0;
  78. display:block;
  79. height:109px;
  80. overflow:hidden;
  81. position:relative;
  82. text-decoration:none !important;
  83. }
  84. .sort li .thumb img {
  85. width:211px;
  86. border: none;
  87. border-radius: 4px;
  88. -moz-border-radius: 4px;
  89. -webkit-border-radius: 4px;
  90. }
  91. li.cb, .cb {
  92. border:0 none !important;
  93. clear:both !important;
  94. float:none !important;
  95. height:0 !important;
  96. margin:0 !important;
  97. padding:0 !important;
  98. }
  99. .thumb .duration {
  100. background: #000;
  101. bottom:2px;
  102. color:#FFF !important;
  103. display:inline-block;
  104. font-size:11px;
  105. padding:0 4px;
  106. opacity: 0.75;
  107. position:absolute;
  108. right:3px;
  109. border-radius: 2px;
  110. -moz-border-radius: 2px;
  111. -webkit-border-radius: 2px;
  112. }
  113. .thumb_hover {
  114. height:109px;
  115. left:0;
  116. position:absolute;
  117. background-color: transparent;
  118. background-position: center center !important;
  119. background-repeat: no-repeat;
  120. top:0;
  121. width:193px;
  122. }
  123. .thumb:hover .thumb_hover {
  124. background:transparent url("../images/video/thumb_hover.png") no-repeat scroll 0 0;
  125. }
  126.  
  127. .sort li h5 {
  128. height:28px;
  129. overflow:hidden;
  130. margin:5px 0 3px;
  131. clear:both;
  132. font-size:12px;
  133. }
Сейчас он даёт обычный вид роликов, который есть на сайте. Но попробуем с ним разобраться. Итак для начала первое это

Код PHP:
  1. .sort li {
  2. display:block;
  3. float:left;
  4. height:168px;
  5. margin: 0 6px 0 0;
  6. padding: 4px;
  7. position:relative;
  8. width:211px;
  9. line-height:14px;
  10. list-style: none outside none;
  11. }
Это код даёт размер самого ролика со всей информацией. То есть высота указана 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:
  1. .sort li .thumb {
  2. background:transparent none repeat scroll 0 0;
  3. display:block;
  4. height:109px;
  5. overflow:hidden;
  6. position:relative;
  7. text-decoration:none !important;
  8. }
  9. .sort li .thumb img {
  10. width:211px;
  11. border: none;
  12. border-radius: 4px;
  13. -moz-border-radius: 4px;
  14. -webkit-border-radius: 4px;
  15. }
Что изменено? Сами размеры картинки, плюс сделано так, чтобы края, которые обычно у картинок черные были спрятаны от вида и картинка имела нормальный вид. Вот скрины нормального вида и как могло быть.



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

Код PHP:
  1. .sort_list li h5 {
  2. overflow: hidden;
  3. margin: 0px;
  4. padding: 1px 3px 5px 10px;
  5. font-size: 10pt;
  6. line-height: 14px;
  7. text-decoration: none !important;
  8. height: 37px;
  9. font-weight: bold;
  10. bottom: 0px;
  11. }
Я прописываю размеры новые и отступы, а также ставлю изменяю высоту блока названия ролика. Для сравнения старый код

Код PHP:
  1. .sort li h5 {
  2. height:28px;
  3. overflow:hidden;
  4. margin:5px 0 3px;
  5. clear:both;
  6. font-size:12px;
  7. }
  8.  
Теперь возьмёмся за отображение длительности видео ролика

.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;
}

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

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

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


Как стало

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


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

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

Голосуем

Самый нужный компонент