Сообщений в теме: 51

[ne_yana]

Наталья C. (21 Октябрь 2013 - 11:07) писал:

Добрый день, уважаемые разработчики Storeland!

Перешла на "Осень", и снова за работу ))) Без Вас никак не справлюсь! Заранее благодарю за помощь.

Сразу хочу отметить, что для меня крайне важна адаптивность шаблона, поэтому если какие-то из моих предложений нарушают его, не пишите инструкцию, лучше буду думать как вписать мои желания в ваш шаблон.

Мне нужно:
1) Убрать слайдер
2) На его место поставить фоновую картинку, на которой разместить монитор с моим видео и справа вставить форму расчета стоимости видео (как в примере). Кнопка "получить сейчас" у меня должна называться "Перезвоните мне". Хорошо было бы, если данная форма работала бы как быстрый заказ, и я сразу бы получала смс о том, что кто-то заказал расчет. Я могу создать какой-то скрытый на сайте товар и, предположим, его кнопку разместить в этой форме. Возможно ли это?
3) Мое видео для монитора: <iframe width="480" height="360" src="//www.youtube.com/embed/Ruhzv9jKC3M" frameborder="0" allowfullscreen></iframe>
4) Монитор загрузила сюда

Спасибо!

Здравствуйте, замените

<div class="flexslider" id="autumn-slider">
		<ul class="slides">
		 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a></li>
		<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li>
		</ul>
	 </div>

на

	  <div class="video">
	  <iframe width="336" height="252" src="//www.youtube.com/embed/Ruhzv9jKC3M" frameborder="0" allowfullscreen></iframe>
	  </div>

Загрузите картинку монитора и в файл style.css вставьте

iframe {
margin-left: 784px;
margin-top: 43px;
}
.video {
background: url(путь до картинки) no-repeat center;
height: 362px;
}

[miyako]

Наталья C. (21 Октябрь 2013 - 19:46) писал:

Спасибо, буду пробовать. А что по поводу кнопки "Позвоните мне" из 2-го вопроса?
Это должно выглядеть как в скриншоте

Возможно подключить форму Обратного звонка - http://forum.storela...нок/#entry31876
Потом можно форму стилизовать.

[miyako]

Наталья C. (22 Октябрь 2013 - 12:08) писал:

Выполнила.
Теперь нужно доработать:
1) Разместить по центру фоновую картинку, на которой слева будет монитор с моим видео (как в примере). и справа надо написать крупно по центру: "ЗАКАЖИТЕ
РАСЧЁТ
СТОИМОСТИ", то есть каждое слово на отдельной строке, а под этими словами я поставлю кнопку обратного звонка.

Заранее благодарю!

Скорее всего Вы не добавили эту страницу в пункты меню. Можно использовать уже существующую страницу Контактов и стилизовать ее.

[Vaccina]

Выравнять видео относительно изображения можно путем добавления в файл стилей style.css следующего правила

#content-fluid .video iframe, #content-fluid .video .video-wrapper {
	display: block;
	margin: 0 auto !important;
	padding-top: 45px;
	width: 380px;
	position: relative;
}

чтобы как-то вставить форму рядом с видео - найдите в шаблоне вставленный ранее код

<div class="video">
		 <iframe width="336" height="252" src="//www.youtube.com/embed/Ruhzv9jKC3M" frameborder="0" allowfullscreen></iframe>
		 </div>

и замените его на

<div class="video">
	  <div class="video-wrapper">
		 <iframe width="336" height="252" src="//www.youtube.com/embed/Ruhzv9jKC3M" frameborder="0" allowfullscreen></iframe>
		 <div class="video-form">код формы</div>
	  </div>
</div>

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

[Koderhan]

Наталья C. (23 Октябрь 2013 - 08:10) писал:

Выполнила. Видео встало чуть ниже монитора.

Теперь мне нужно исправить некорректное наложение видео в монитор, добавить форму с запросом имени и телефона и кнопкой "Перезвоните мне". И все это должно быть на моем фоне, как в примере
Спасибо!

Вы можете отрегулировать расположение блока с видео. Изменяя значения в стили.

Панель администратора, "Сайт"->"Редактор тем".
В файле "style.css".
Найти код:

#content-fluid .video iframe, #content-fluid .video .video-wrapper {
		display: block;
		margin: 0 auto !important;
		padding-top: 45px;
		width: 380px;
		position: relative;
}

Заменить:

#content-fluid .video iframe, #content-fluid .video .video-wrapper {
		display: block;
		margin: 0 auto !important;
		padding-top: 22px; /* отступ сверху */
		width: 380px;
		position: relative;
}

[Vaccina]

Найдите в файле стилей style.css

.video {
	background: url("{ASSETS_IMAGES_PATH}mak.png?2378") no-repeat scroll center center rgba(0, 0, 0, 0);
	height: 362px;
}

и замените на

.video {
	background: url("{ASSETS_IMAGES_PATH}mak.png?2378") no-repeat scroll 50px center rgba(0, 0, 0, 0);
	height: 362px;
}

далее найдите

#content-fluid .video iframe, #content-fluid .video .video-wrapper {
	display: block;
	margin: 0 auto !important;
	padding-top: 22px;
	position: relative;
	width: 380px;
}

и замените на

#content-fluid .video iframe, #content-fluid .video .video-wrapper {
	display: block;
	margin: 0 0 0 55px;
	padding-top: 22px;
	position: relative;
	width: 380px;
}

далее добавьте

.video-form {
	height: 290px;
	position: absolute;
	right: -550px;
	top: 30px;
	width: 400px;
	background: #ccc;
}

После этого проверьте подходит ли вам положение изображения, видео и блока для формы. Если положение элементов вам подходит, то удалите свойство background: #ccc; в классе .video-form. После этого останется заготовить код формы которая будет отображаться именно в рамках блока .video-form

[Vaccina]

Найдите в файле стилей style.css

.video {
	background: url("http://design.studia-online.ru/mak.png?2378") no-repeat scroll 50px center rgba(0, 0, 0, 0);
	height: 362px;
}

и замените на

.video {
	background: url("http://tvoistart.storeland.net/fon_pod_slajder.png?0481") repeat scroll left top rgba(0, 0, 0, 0);
	height: 362px;
	margin: 0 auto;
	padding-top: 50px;
	width: 920px;
}

далее найдите

#content-fluid .video iframe, #content-fluid .video .video-wrapper {
	display: block;
	margin: 0 0 0 55px;
	padding-top: 22px;
	position: relative;
	width: 380px;
}

и замените на

#content-fluid .video .video-wrapper {
	background: url("http://design.studia-online.ru/mak.png?2378") no-repeat scroll center center rgba(0, 0, 0, 0);
	display: block;
	height: 298px;
	position: relative;
	text-align: center;
	width: 500px;
}

далее найдите

iframe {
	margin-left: 784px;
	margin-top: 43px;
}

и замените на

#content-fluid .video .video-wrapper iframe {
	height: 245px;
	margin: 17px auto 0;
	text-align: center;
	width: 380px;
}

далее найдите

.video-form {
	background: #CCCCCC;
	height: 290px;
	position: absolute;
	right: -550px;
	top: 30px;
	width: 400px;
}

и замените на

.video-form {
	height: 290px;
	position: absolute;
	right: -420px;
	top: 0;
	width: 400px;
}

далее в шаблоне "HTML" найдите

<div class="video-form">код формы</div>

и замените на

<div class="video-form">
<form method="post" action="{FEEDBACK_URL}" class="feedbackForm" enctype="multipart/form-data">
	{% IFNOT FORM_SEND_OK %}
	  <div class="fieldset">
		<input type="hidden" name="hash" value="{HASH}" />
  <input type="hidden" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_MESSAGE}]" value="Бесплатный отчет" />
		<!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
		{ANTISPAM_CODE}
		<h5>Бесплатный отчет</h5>
		<ul class="form-list">
		  <li class="fields">
			<div class="customer-name">
			  <div class="field name-firstname">
				<div class="input-box">
				  <input type="text" id="feedback_name" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_NAME}]"  value="{FORM_FEEDBACK_NAME}" maxlength="50" class="light required" placeholder="Введите ваше имя" />
				</div>
			  </div>
			  <div class="field name-lastname">
				<div class="input-box">
				  <input type="text" id="feedback_email" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_EMAIL}]"  value="{FORM_FEEDBACK_EMAIL}" maxlength="255" class="required email light" placeholder="Введите ваш e-mail" />
				</div>
			  </div>
			</div>
		  </li>
		</ul>
	  </div>
	{% ENDIF %}
	<div class="buttons-set">
	  <input type="submit" title="Получить сейчас" class="exclusive" value="Получить сейчас" />
	  </p>
	</div>
  </form>
</div>

после останется простилизовать саму форму.

[Koderhan]

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Добавить в конец файла код:

#content-fluid {
background: url("http://tvoistart.storeland.net/fon_pod_slajder.png?0481") repeat scroll left top rgba(0, 0, 0, 0);
}
.video-form .fieldset {
line-height: 2;
}
.video-form .field {
padding-bottom: 8px;
}
.video-form .fieldset h5 {
font-size: 14px;
}

И для того чтобы изменить описание поля ввода.
В файле html можно изменить в коде:

placeholder="Введите ваш e-mail

[Koderhan]

Наталья C. (26 Октябрь 2013 - 11:52) писал:

Вы меня не так поняли немного.
Подложку надо растянуть по ширине всего экрана вправо и влево. Вниз ее опускать не надо, там дальше должен быть белый фон.
В форме выставила свою значения. Только теперь при вводе телефона выдает ошибку.

Для того чтобы не ругался на не правильный емайл.
В файле "html".
Код:

<input type="text" id="feedback_email" name="form[]" value="" maxlength="255" class="required email light" placeholder="Ваш телефон">

ЗАменить:

<input type="text" id="feedback_email" name="form[]" value="" maxlength="255" class="light" placeholder="Ваш телефон">

Для такого заполнения фоном блока придется изменить многие стили.
Код:

.video-form {
		height: 290px;
		position: absolute;
		right: -420px;
		top: 0;
		width: 400px;
}

Заменить:

.video-form {
		height: 290px;
		position: absolute;
		right: -190px;
		top: 0;
		width: 400px;
}

Код:

.video {
		background: url("http://tvoistart.storeland.net/fon_pod_slajder.png?0481") repeat scroll left top rgba(0, 0, 0, 0);
		height: 300px;
		margin: 0 auto;
		padding-top: 50px;
		width: 920px;
}

Заменить:

.video {
		background: url("http://tvoistart.storeland.net/fon_pod_slajder.png?0481") repeat scroll left top rgba(0, 0, 0, 0);
		height: 300px;
		margin: 0 auto;
		padding-top: 50px;
}

Код:

#content-fluid .video .video-wrapper {
		background: url("http://design.studia-online.ru/mak.png?2378") no-repeat scroll center center rgba(0, 0, 0, 0);
		display: block;
		height: 298px;
		position: relative;
		text-align: center;
		width: 500px;
}

Заменить:

#content-fluid .video .video-wrapper {
		background: url("http://design.studia-online.ru/mak.png?2378") no-repeat scroll center center rgba(0, 0, 0, 0);
		display: block;
		height: 298px;
		position: relative;
		text-align: center;
		width: 920px;
}

[Koderhan]

Наталья C. (26 Октябрь 2013 - 14:32) писал:

Выполнила, но подложка так и осталась на весь экран.

И еще, при заполнении формы страница переадресовывается на вкладку "Контакты", а надо, чтобы на этом же месте в зеленой рамочке появлялось сообщение: "Спасибо за Ваше обращение!"

И письмо все равно не приходит на почту мне о том, что кто-то заказал расчет.

Для удаления сплошного фона.
В файле style.css удалить код:

#content-fluid {
background: url("http://tvoistart.storeland.net/fon_pod_slajder.png?0481") repeat scroll left top rgba(0, 0, 0, 0);
}

И для вывода сообщения попробуйте в конец файла main.js добавить код:

$('.video-form input[type="submit"]').click(function(){
$(this).submit();
$('.video-form').html('<h5>Данные отправлены.</h5>');
return false;
});

И проверьте пожалуйста почту уведомлений в основных настройках .