Перейти к содержимому


Видео На Фон


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 150

#21 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 22 Август 2015 - 01:47

В этом случае обратно все придется возвращать из изменений в этой теме, задать условие и по нему уже прописывать наши стили.
В шаблоне HTML найдите:
<body id="bd">
замените на:
<body id="bd" {% IF index_page %}class="index"{% ENDIF %}>


далее найдите:
<video id="video_bg" autoplay="autoplay" loop="loop">
		<source src="http://st.storeland.net/12/1719/155/Time-Lapse_-_Watch_Flowers_Bloom_Before_Your_Eyes_1_.mp4" type="video/mp4"></source>
</video>

замените на:
{% IF index_page %}
<video id="video_bg" autoplay="autoplay" loop="loop">
		<source src="http://st.storeland.net/12/1719/155/Time-Lapse_-_Watch_Flowers_Bloom_Before_Your_Eyes_1_.mp4" type="video/mp4"></source>
</video>
{% ENDIF %}


Теперь необходимо вернуть обратно родные стили, то есть отменить изменения из сообщений #14, отменить изменение подвала из сообщения #16 и #19

Далее в конце main.css прописать:
#bd.index .header-content, #bd.index .header-top, #bd.index #footer, #bd.index .footer-content, #bd.index #yt_wrapper .main-inner, #bd.index .header-top .mini-cartpro .block-title {
		background: none;
}
.header-top .header-top-left .top-navbar-links li a {
		color: #fff;
}
.header-top .header-top-left .top-navbar-links li {
		border-left: none;
}
#nav li a {
		color:#fff;
}


#22 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 22 Август 2015 - 05:47

Vaccina доброе утро!  я все вернул, вот только со слайдером не получилось, потому что забыл в какой строке стоял код((( помогите)))

#23 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 22 Август 2015 - 06:06

Цитата

отменить изменение подвала из сообщения #16
Слайдер у вас только на главной отображался, как поняла, он вам не нужен во все поэтому нет смысла его возвращать =)

#24 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 22 Август 2015 - 06:14

Ну в принципе да) на других страницах будет слайдер, но пока думаю как будет выглядеть)

#25 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 22 Август 2015 - 06:37

<!-- Запуск слайдера -->
		{% IFNOT index_page %}
		<script>
		  $(function(){ slideShow()});
		</script>
		{% ENDIF %}

вставьте в шаблон HTML после:
<!-- Скрипт перехода на основную часть для мобильных устройств -->
	{% IFNOT index_page %}
	<script>
	  $(function(){ gotocontent()});
	</script>
	{% ENDIF %}

далее найдите:
  <!-- Хлебные крошки -->
		{% IFNOT index_page %}
		<div id="breadcrumbs">
		  <div class="container">
			<div class="row">
			  <!-- Заголовок страницы -->
			  <div id="name-top">
				<h1 class="title" itemprop="name">
перед ним вставьте:
<!-- Слайдер на главной -->
				{% IF index_page %}
				<div id="slideshow" class="wrap">
				  <div id="slider">
						<!-- Slides Container -->
						<div u="slides" class="slides_container">
						  <div>
								<img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" />
						  </div>
						  <div>
								<img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
						  </div>
						  <div>
								<img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=jade" />
						  </div>
						  <div>
								<img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=jade" />
						  </div>
						   <div>
								<img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=jade" />
						  </div>
						</div>
				  </div>
				</div>
				{% ENDIF %}
				<!-- /END Слайдер на главной -->


#26 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 22 Август 2015 - 06:47

Выдает ошибку JS 1, и слайдер на  странице приветствия появился

#27 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 22 Август 2015 - 07:13

<!-- Слайдер на главной -->
								{% IF index_page %}
								<div id="slideshow" class="wrap">
замените на:
<!-- Слайдер на главной -->
								{% IFNOT index_page %}
								<div id="slideshow" class="wrap">


#28 Tyumenn

Tyumenn

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 259 сообщений

Отправлено 13 Январь 2016 - 16:33

Здравствуйте. Подскажите пожалуйста, как реализовать следующее:

Необходимо на первую страницу сделать видео фон во весь первый экран.

Видео на фон будет стоять то, которое стоит сейчас на главной странице http://cover2.ru/

На примере показал что будет на первом экране.

Возможно ли сделать адаптивный видео фон, чтобы подстраивался под размеры экранов?

Аккаунт SL-349847

Прикрепленные изображения

  • ковер 22.jpg


#29 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 14 Январь 2016 - 04:01

Инструкция по установке видеофона описана в этой теме пост #6:
http://forum.storela...он/#entry207121

Уточните пожалуйста, какие трудности вызывает у вас данная реализация?
Сам видеофон будет иметь размер оригинала видео.

#30 Tyumenn

Tyumenn

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 259 сообщений

Отправлено 14 Январь 2016 - 07:36

Просмотр сообщенияVaccina (14 Январь 2016 - 04:01) писал:

Инструкция по установке видеофона описана в этой теме пост #6:
http://forum.storela...он/#entry207121

Уточните пожалуйста, какие трудности вызывает у вас данная реализация?
Сам видеофон будет иметь размер оригинала видео.

Сделал по инструкции - ничего не поменялось, посмотрите пожалуйста что сделал не так.

#31 Юля123

Юля123

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 14 Январь 2016 - 13:34

Просмотр сообщенияTyumenn (14 Январь 2016 - 07:36) писал:

Сделал по инструкции - ничего не поменялось, посмотрите пожалуйста что сделал не так.


Изменения Вам произвели, проверьте, пожалуйста.

#32 Tyumenn

Tyumenn

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 259 сообщений

Отправлено 14 Январь 2016 - 14:31

Просмотр сообщенияЮля123 (14 Январь 2016 - 13:34) писал:

Изменения Вам произвели, проверьте, пожалуйста.

Спасибо, как теперь убрать предыдущий белый фон?

Видео нужно чтобы было не на всю главную страницу, а только на первый экран, примерно 800рх

Прикрепленные изображения

  • 12.jpg


#33 Tyumenn

Tyumenn

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 259 сообщений

Отправлено 14 Январь 2016 - 17:15

Вот сайт  http://www.ovenbits.com/

На нем видеофон на первом экране, нужно сделать примерно также.

Подскажите, как это реализовать?

#34 RedHead

RedHead

    Активный участник

  • Модераторы
  • 1 052 сообщений

Отправлено 14 Январь 2016 - 20:15

Просмотр сообщения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;}
}


результат:
1.jpg

#35 Tyumenn

Tyumenn

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 259 сообщений

Отправлено 14 Январь 2016 - 21:16

Просмотр сообщенияRedHead (14 Январь 2016 - 20:15) писал:

Здравствуйте! Перед внесением изменений, создайте бэкап!!!

В шаблоне 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;}
}


результат:
Прикрепленный файл 1.jpg

Спасибо большое! Идем дальше:

Как убрать телефон и заказать звонок с главной странице?

#36 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 15 Январь 2016 - 02:12

В шаблоне HTML найдите:
<div style="float:right;margin-right:70px;" class="telefon">
						<span>+7 (499) 404-18-50</span><br/>
						<a class="callback fancybox.ajax" href="http://{NET_DOMAIN}/callback?only_body=1">Заказать звонок</a>
						<script>
$(document).ready(function() {
$(".callback").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
				  </div>

замените на:
{% IFNOT index_page %}
<div style="float:right;margin-right:70px;" class="telefon">
						<span>+7 (499) 404-18-50</span><br/>
						<a class="callback fancybox.ajax" href="http://{NET_DOMAIN}/callback?only_body=1">Заказать звонок</a>
						<script>
$(document).ready(function() {
$(".callback").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
				  </div>
{% ENDIF %}


#37 Tyumenn

Tyumenn

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 259 сообщений

Отправлено 15 Январь 2016 - 07:03

Просмотр сообщенияVaccina (15 Январь 2016 - 02:12) писал:

В шаблоне HTML найдите:
<div style="float:right;margin-right:70px;" class="telefon">
					 <span>+7 (499) 404-18-50</span><br/>
					 <a class="callback fancybox.ajax" href="http://{NET_DOMAIN}/callback?only_body=1">Заказать звонок</a>
					 <script>
$(document).ready(function() {
$(".callback").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
				 </div>

замените на:
{% IFNOT index_page %}
<div style="float:right;margin-right:70px;" class="telefon">
					 <span>+7 (499) 404-18-50</span><br/>
					 <a class="callback fancybox.ajax" href="http://{NET_DOMAIN}/callback?only_body=1">Заказать звонок</a>
					 <script>
$(document).ready(function() {
$(".callback").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
				 </div>
{% ENDIF %}

Спасибо.

Как заголовок и подзаголовок перенести ниже, где эти настройки?

Прикрепленные изображения

  • 21.jpg


#38 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 15 Январь 2016 - 07:56

В main.css найдите:
#header #support {
	position: relative;
	float: left;
	top: 9px;
	margin-right: 11px;
	z-index: 30;
	width: 200px;
	margin-left: 80px;
	margin-top: 20px;
	font-size: 50px;
	padding-bottom: 50px;
}

в нем увеличьте значение стиля top

#39 Tyumenn

Tyumenn

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 259 сообщений

Отправлено 15 Январь 2016 - 08:40

Просмотр сообщенияVaccina (15 Январь 2016 - 07:56) писал:

В main.css найдите:
#header #support {
position: relative;
float: left;
top: 9px;
margin-right: 11px;
z-index: 30;
width: 200px;
margin-left: 80px;
margin-top: 20px;
font-size: 50px;
padding-bottom: 50px;
}

в нем увеличьте значение стиля top

Спасибо, как теперь поменять шрифт и цвет заголовка, как загрузить новый шрифт можно?

#40 RedHead

RedHead

    Активный участник

  • Модераторы
  • 1 052 сообщений

Отправлено 15 Январь 2016 - 09:25

Просмотр сообщенияTyumenn (15 Январь 2016 - 08:40) писал:

Спасибо, как теперь поменять шрифт и цвет заголовка, как загрузить новый шрифт можно?

Здравствуйте! У Вас это прописано в шаблоне html. Найдите строки:
<h1 style="text-align: center;"><span style="color:#000080;"><span style="font-size:36px;"><span style="font-family:trebuchet ms,helvetica,sans-serif;"><strong>Магнитный декор - меняйте по настроению</strong></span></span></span></h1>
{%ENDIF%}
<p style="text-align: center;"><span style="color:#000080;"><span style="font-size:24px;"><span style="font-family:trebuchet ms,helvetica,sans-serif;">Покрытие скроет дефекты холодильника</span></span></span></p>			
<p style="text-align: center;"><span style="color:#000080;"><span style="font-size:24px;"><span style="font-family:trebuchet ms,helvetica,sans-serif;">Подберем изображение под ваш интерьер</span></span></span></p>

В них необходимо заменить цвет текста, и поменять шрифт, например, так:

<h1 style="text-align: center;"><span style="color:yellow;"><span style="font-size:36px;"><span style="font-family:Times New Roman;"><strong>Магнитный декор - меняйте по настроению</strong></span></span></span></h1>
{%ENDIF%}
<p style="text-align: center;"><span style="color:#fff;"><span style="font-size:24px;"><span style="font-family:Arial;">Покрытие скроет дефекты холодильника</span></span></span></p>			
<p style="text-align: center;"><span style="color:#fff;"><span style="font-size:24px;"><span style="font-family:Cambria;">Подберем изображение под ваш интерьер</span></span></span></p>





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных