Tyumenn (14 Январь 2016 - 17:15) писал:
Вот сайт
http://www.ovenbits.com/
На нем видеофон на первом экране, нужно сделать примерно также.
Подскажите, как это реализовать?
Здравствуйте! Перед внесением изменений, создайте бэкап!!!
В шаблоне html замените строку
<div id="header" class="borderless">
на:
<div id="header" class="borderless" style="background: url(http://s3.spruto.org/embed/player.swf" type="video/swf margin: 0 auto; ) repeat-y,">
затем в шаблоне main.css замените строки:
#video_bg {
position: fixed;
top: 0;
left: 0;
z-index: -1000;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
на:
#video_bg {
position: absolute;
top: 0;
margin: 0 auto;
z-index: -1000;
width: 100%;
}
строки:
#header {
position: relative;
z-index: 99;
background-color: #ffffff;
}
на:
#header {
position: relative;
z-index: 99;
background-color: #ffffff;
height: 750px;
}
и
.header_top {
width: 100%;
margin: 10px auto 0px auto;
min-height: 40px;
background-color: #f5f5f5;
max-width: 1200px;
}
замените на:
.header_top {
width: 100%;
margin: 10px auto 0px auto;
min-height: 40px;
max-width: 1200px;
}
Затем настроим адаптивность: в шаблоне main.css:
замените строки:
@media only screen and (max-width: 480px) {
h2 {font-size: 24px;}
.inner {width:80%; }
на:
@media only screen and (max-width: 480px) {
h2 {font-size: 24px;}
.inner {width:80%; margin-top:-240px;}
строки
@media only screen and (min-width: 480px) and (max-width: 767px) {
#toggle_switch {display:none;}
.inner {width:86%;}
на:
@media only screen and (min-width: 480px) and (max-width: 767px) {
#toggle_switch {display:none;}
.inner {width:86%;margin-top:-200px;}
строки:
@media only screen and (min-width: 768px) and (max-width: 980px) {
.inner {width:95%;}
на:
@media only screen and (min-width: 768px) and (max-width: 980px) {
.inner {width:95%;margin-top:-100px;}
строки:
@media only screen and (min-width: 981px) and (max-width: 1220px) {
.inner {width:95%; }
}
на:
@media only screen and (min-width: 981px) and (max-width: 1220px) {
.inner {width:95%; margin-top:-50px;}
}
в конец шаблона добавьте:
@media only screen and (min-width: 1370px) {
.inner {margin-top:50px;}
}
@media only screen and (min-width: 1520px) {
.inner {margin-top:80px;}
}
@media only screen and (min-width: 1630px) {
.inner {margin-top:90px;}
}
результат: