InstantVideo. Дизайн и юзабельность.

Опубликовано:
Редактировалось: 1 раз — сегодня в 12:10
Просмотров: 2699
+6
Голосов: 6

Всем доброго дня. Как вы все знаете, есть такой прекрасный компонент, как 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;

Ну а теперь пробуем и смотрим, будут другие варианты, буду рад увидеть.

Комментарии (1)
Letsgo #
: +1
Да чуть не забыл) кроме замены вида, еще попробуйте теперь вывести меню категорий видео в горизонтальном виде, увидите результат, изменение затрагивает и его тоже.

Голосуем

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