Всем доброго дня. Как вы все знаете, есть такой прекрасный компонент, как InstantVideo, многие его используют на сайтах InstantCMS, так вот естественно, что инструмент, это инструмент, а есть еще такая вещь, как дизайн и юзабельность, в некоторых моментах, меня не устраивал вид самого видеоролика, в плане того, что все скомпоновано хорошо, но некуда вставить рекламу. При просмотре страницы, где непосредственно находится сам компонент видео и роликов, в глаза бросается такой момент, что нельзя ставить справа в сайдбар (позиция может называться иначе), так вот ставить модули нельзя, так как теряется вид, а во вторых перейдите на страницу канала и вы увидите вообще непорядок.
Поэтому я решил переделать внешний вид, при этом, сделанное мной не является думаю лучшим вариантом, если кто то предложит лучшую компоновку, то я буду признателен. Дезерит пока не дошел до этог о к сожалению, питая своими шаблонами сотни желающих сделать суперсоциальные сети.
Что должно получиться у нас? Вот такой вот вид
Кто не разглядел может посмотреть тут например
Образец видео онлайн
Итак поехали делать. Для начала скачиваем файл
Вид видео файл
Далее открываем стиль, в котором у вас находятся видео стиль. Находим в нем video_cat_list и меняем на
l.video_cat_list {
margin: 0 0 5px 0;
overflow: hidden;
padding:0 0 0 10px;
}
ul.video_cat_list li.video_cat_item {
float: left;
margin: 5px;
width: 120px;
height: 24px;
background: #57aebf; /* Old browsers */
display: block;
text-decoration: none;
text-align: center;
line-height: 24px;
font-size: 12px;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-khtml-border-radius:10px;
}
ul.video_cat_list li.video_cat_item :hover{
background: #f48270; /* Old browsers */
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-khtml-border-radius:10px;
}
ul.video_cat_list li.video_cat_item a{
color: #fff;
}
ul.video_cat_list li.video_cat_item a:hover{
color: #fff;
}
Далее делаем в стиле видео
.lea_player {
background: none repeat scroll 0 0 #FFFFFF;
padding: 5px;
position: relative;
overflow:hidden;
width: 480px;
Ну а теперь пробуем и смотрим, будут другие варианты, буду рад увидеть.
