Отключен JavaScript

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

7

Добавление Блоков На Сайт

Автор alkazare, 03 Dec 2012 04:52

Авторизуйтесь для ответа в теме

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

#1 alkazare

Пользователь

Пользователи
43 сообщений

Отправлено 03 December 2012 - 04:52

как создать такие же три блока , как на http://markil.ru/. гарантия акция(со встроенным счетчиком) скидки и предложения. аналогично реализовано тут http://modavsumke.ru/

Наверх

#2 support 2.0

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

Модераторы
4950 сообщений

Отправлено 03 December 2012 - 12:56

alkazare (03 December 2012 - 04:52) писал:

как создать такие же три блока , как на http://markil.ru/. гарантия акция(со встроенным счетчиком) скидки и предложения. аналогично реализовано тут http://modavsumke.ru/

3 блока
в файл main.css вставьте этот блок в самом конце

<!-- 3 блока -->
.blocks{margin-top:0px;}
.blocks>table{width:989px;border-collapse:separate;border-spacing: 17px;margin: -30px 0px 0px -16px;}
.blocks>table>tbody{vertical-align:top;}
.blocks .block{height:100%;}
.block>h2{font-size:15px;padding-bottom:15px;}
.block:after{content:' ';clear:both;display:block;width:0;height:0;overflow:hidden;font-size:0;}
.block>.R{margin-left:105px;color:#575757;}
.block>.L{float:left;width:91px;text-align:center;}
.block>.L img{max-width:91px;}
.block .text{color:#575757;font-size:12px;}
.block .name{font-size:14px;padding-bottom:5px;}
.block .timer{width: 124px;height: 47px;background:url(http://...clock.png) 0 0 no-repeat;margin:0 auto;text-align:center;padding: 0px 6px 3px 40px;margin: 6px 0px -6px -3px;}
.block .timer>p{font-size: 13px;padding:0;}
.block .timer > .digits {font-size: 20px;font-weight: normal;line-height: 5px;}
.block .timer>.digits span{font-size:16px;}
.w {
background: white;
padding: 16px;
margin: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

Теперь зайдите в шаблон HTML и после

<div class="content_page">

Вставьте

<!-- 3 блока -->
<div class="blocks"><table><tbody><tr>
	 <td width="33%" class="w"><div class="block">
		 <h2>Гарантия возврата</h2>
		 <div class="L"><a href="javascript:;"><img src="http://...guarantee.png" alt=""></a></div>
		 <div class="R">
			 <div class="text"><p>Если Вам попадется некачественный товар, мы без вопросов заменим его на другой, или вернем Вам деньги.</p></div>
		 </div>
	 </div></td>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
setInterval(function(){
	 var now = new Date();
	 var endTS = 1354591201*1000;
	 var totalRemains = (endTS-now.getTime());
	 if (totalRemains>1){
		 var RemainsSec=(parseInt(totalRemains/1000));
		 var RemainsFullDays=(parseInt(RemainsSec/(24*60*60)));
		 var secInLastDay=RemainsSec-RemainsFullDays*24*3600;
		 var RemainsFullHours=(parseInt(secInLastDay/3600));
		 if (RemainsFullHours<10){RemainsFullHours="0"+RemainsFullHours};
		 var secInLastHour=secInLastDay-RemainsFullHours*3600;
		 var RemainsMinutes=(parseInt(secInLastHour/60));
		 if (RemainsMinutes<10){RemainsMinutes="0"+RemainsMinutes};
		 var lastSec=secInLastHour-RemainsMinutes*60;
		 if (lastSec<10){lastSec="0"+lastSec};
		 $('.timer>.digits').html((RemainsFullDays ? "<span>"+RemainsFullDays+"дн.</span> " :"")+RemainsFullHours+":"+RemainsMinutes+":"+lastSec);
	 }
	 else {$(".timer").remove();}
},1000);
});
</script>
	 <td width="33%" class="w"><div class="block">
		 <h2>Акции и спецпредложения</h2>
		 <div class="L"><a href="javascript:;"><img src="http://...promo.png" alt=""></a></div>
		 <div class="R">
			 <div class="text"><h3 id="toc0"> Дарим скидку <span style="color: #EF2929;">30%</span></h3><p>10 первых покупателей получат РУ модели со скидкой <span style="color: #EF2929;"><strong>30%</strong> </span>Спешите!</p></div>
			 <div class="timer">
				 <p>До конца акции</p>
				 <div class="digits"></div>
			 </div>
		 </div>
	 </div></td>
	 <td width="33%" class="w"><div class="block">
		 <h2>СКИДКИ</h2>
		 <div class="L"><a href="./"><img src="http://...discount.png" alt=""></a></div>
		 <div class="R"><div class="text"><p>Доставка по всей Росии<span style="color: #EF2929;"> <strong>БЕСПЛАТНО</strong></span><br> Батарейки в <span style="color: #EF2929;"><strong>падарок</strong></span></p><a href="#">Скидки</a></div></div>
	 </div></td>
</tr></tbody></table></div>
<!-- END 3 блока -->

Для того, чтобы заменить изображения, замените в Шаблоне HTML эти изображения на свои:

1. guarantee.png
2. promo.png
3. discount.png

Во 2-ом блоке около таймера, чтобы заменить изображение, зайдите в main.css -> найдите

clock.png

и замените ссылку на любую другую

Также на слове Скидки (3-й блок) есть ссылка, чтобы ее удалить или поставить на нужную страницу, в шаблоне HTML найдите строчку

<a href="#">Скидки</a>

и вместо # поставьте нужную ссылку
1354591201 - время в секундах

Сообщение отредактировал support 2.0: 08 April 2013 - 16:21
изменен код

Наверх

#3 alkazare

Пользователь

Пользователи
43 сообщений

Отправлено 04 December 2012 - 07:02

блоки отображаются некорректно

Наверх

#4 Koderhan

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

Модератоpы
6227 сообщений

Отправлено 04 December 2012 - 08:52

Не совсем понятно. Где именно отображаются блоки не корректно.

.blocks>table{width:996px;border-collapse:separate;border-spacing: 17px;margin: -9px 0px 0px 452px;}

Если вы про отступы. То:

margin: -9px 0px 0px 452px;
http://htmlbook.ru/css/margin

Наверх

#5 alkazare

Пользователь

Пользователи
43 сообщений

Отправлено 05 December 2012 - 06:44

блоки также стоят и счетчика нет

Наверх

#6 Koderhan

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

Модератоpы
6227 сообщений

Отправлено 05 December 2012 - 13:05

alkazare (05 December 2012 - 06:44) писал:

блоки также стоят и счетчика нет

Пожалуйста, опишите как именно должны располагаться блоки.

Наверх

#7 support 2.0

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

Модераторы
4950 сообщений

Отправлено 05 December 2012 - 16:39

alkazare (05 December 2012 - 06:44) писал:

блоки также стоят и счетчика нет

Счетчика нет, т.к. там задано было время и был отсчет в обратную сторону. После того как счетчик дошел да 00.00.00, он отключился и убрался. Замените в шаблоне HTML строчку

var endTS = 1354591201*1000;

на вот эту

var endTS = 1355691201*1000;

Да, действительно, в зависимости от разрешения экрана Ваши блоки меняют месторасположения. Для того, чтобы такого не было, вырежьте(ctrl x) из файла HTML блок

<div class="blocks"><table><tbody><tr>
		 <td width="33%" class="w"><div class="block">
				 <h2>Гарантия возврата</h2>
				 <div class="L"><a href="javascript:;"><img src="http://markil.ru/images/stuff/guarantee.png" alt=""></a></div>
				 <div class="R">
						 <div class="text"><p>Если Вам попадется некачественный товар, мы без вопросов заменим его на другой, или вернем Вам деньги.</p></div>
				 </div>
		 </div></td>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
setInterval(function(){
		 var now = new Date();
		 var endTS = 1354591201*1000;
		 var totalRemains = (endTS-now.getTime());
		 if (totalRemains>1){
				 var RemainsSec=(parseInt(totalRemains/1000));
				 var RemainsFullDays=(parseInt(RemainsSec/(24*60*60)));
				 var secInLastDay=RemainsSec-RemainsFullDays*24*3600;
				 var RemainsFullHours=(parseInt(secInLastDay/3600));
				 if (RemainsFullHours<10){RemainsFullHours="0"+RemainsFullHours};
				 var secInLastHour=secInLastDay-RemainsFullHours*3600;
				 var RemainsMinutes=(parseInt(secInLastHour/60));
				 if (RemainsMinutes<10){RemainsMinutes="0"+RemainsMinutes};
				 var lastSec=secInLastHour-RemainsMinutes*60;
				 if (lastSec<10){lastSec="0"+lastSec};
				 $('.timer>.digits').html((RemainsFullDays ? "<span>"+RemainsFullDays+"дн.</span> " :"")+RemainsFullHours+":"+RemainsMinutes+":"+lastSec);
		 }
		 else {$(".timer").remove();}
},1000);
});
</script>
		 <td width="33%" class="w"><div class="block">
				 <h2>Акции и спецпредложения</h2>
				 <div class="L"><a href="javascript:;"><img src="http://markil.ru/images/stuff/promo.png" alt=""></a></div>
				 <div class="R">
						 <div class="text"><h3 id="toc0"> Дарим скидку
						
				 </h3></div>
		 </div></div></td>
		 <td width="33%" class="w"><div class="block">
				 <h2>СКИДКИ</h2>
				 <div class="L"><a href="./"><img src="http://markil.ru/images/stuff/discount.png" alt=""></a></div>
				 <div class="R"><div class="text"><p>Доставка по всей России<span style="color: #EF2929;"> <strong>БЕСПЛАТНО</strong></span><br> Батарейки в <span style="color: #EF2929;"><strong>подарок</strong></span></p><a href="#">Скидки</a></div></div>
		 </div></td>
</tr></tbody></table></div>

и вставьте его после строчки

Цитата

<div class="content_page">

Далее зайдите в файл main.css и замените этот блок

.blocks>table{width:996px;border-collapse:separate;border-spacing: 17px;margin: -9px 0px 0px 452px;}

на этот

.blocks>table{width:989px;border-collapse:separate;border-spacing: 17px;margin: -30px 0px 0px -16px;}

Наверх

#8 Alex2512006

Продвинутый пользователь

Пользователи
182 сообщений

ГородРжев, Тверская обл.

Отправлено 25 January 2013 - 15:48

у меня не работает таймер (((((

Наверх

#9 Дмитрий К

Продвинутый пользователь

Пользователи
79 сообщений

ГородМосква

Отправлено 25 January 2013 - 16:44

Alex2512006 (25 January 2013 - 15:48) писал:

у меня не работает таймер (((((

Также не работает таймер. При обновлении страницы выскакиквает и сразупропадает.

Наверх

#10 support 2.0

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

Модераторы
4950 сообщений

Отправлено 25 January 2013 - 17:29

Alex2512006 (25 January 2013 - 15:48) писал:

у меня не работает таймер (((((

Дмитрий К (25 January 2013 - 16:44) писал:

Также не работает таймер. При обновлении страницы выскакиквает и сразупропадает.

поставьте цифры побольше, например, 1356691201*1000 или 1357691201*1000 или 1365691201*1000
Просто попробуйте самостоятельно менять эти цифры на большие числа и счетчик появится

Наверх

#11 Дмитрий К

Продвинутый пользователь

Пользователи
79 сообщений

ГородМосква

Отправлено 25 January 2013 - 20:34

support 2.0 (25 January 2013 - 17:29) писал:

поставьте цифры побольше, например, 1356691201*1000 или 1357691201*1000 или 1365691201*1000
Просто попробуйте самостоятельно менять эти цифры на большие числа и счетчик появится

Спасибо, как ни странно с 1365691201*1000 заработало.

Наверх

#12 Lesson

Продвинутый пользователь

Пользователи
97 сообщений

ГородРостов-на-Дону

Отправлено 26 January 2013 - 19:29

В хроме нормально отображается, в мазиле вправо смещено, в эксплоре тоже криво. Как исправить?

Сайт: ShopLesson.ru

Наверх

#13 Lesson

Продвинутый пользователь

Пользователи
97 сообщений

ГородРостов-на-Дону

Отправлено 26 January 2013 - 20:14

Lesson (26 January 2013 - 19:29) писал:

В хроме нормально отображается, в мазиле вправо смещено, в эксплоре тоже криво. Как исправить?

Сайт: ShopLesson.ru

Смещение в браузерах было из-за той же строчки:

.blocks>table{width:989px;border-collapse:separate;border-spacing: 17px;margin: -30px 0px 0px 0px;}

Сейчас нормально, исправил на:

.blocks>table{width:989px;border-collapse:separate;border-spacing: 17px;margin: 0px 0px 0px 0px;}

Время счетчика некорректно отображается:

Наверх

#14 Vaccina

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

Модераторы
24399 сообщений

Отправлено 28 January 2013 - 23:57

Попробуйте в файле стилей main.css найти

.block .timer > .digits {
font-size: 20px;
font-weight: 400;
line-height: 5px;
}

и заменить на

.block .timer > .digits {
font-size: 12px;
font-weight: 400;
line-height: 12px;
}

Наверх

#15 Lesson

Продвинутый пользователь

Пользователи
97 сообщений

ГородРостов-на-Дону

Отправлено 29 January 2013 - 08:26

Vaccina (28 January 2013 - 23:57) писал:

Попробуйте в файле стилей main.css найти

.block .timer > .digits {
font-size: 20px;
font-weight: 400;
line-height: 5px;
}

и заменить на

.block .timer > .digits {
font-size: 12px;
font-weight: 400;
line-height: 12px;
}

Спасибо!

Наверх

#16 Alex2512006

Продвинутый пользователь

Пользователи
182 сообщений

ГородРжев, Тверская обл.

Отправлено 29 January 2013 - 13:43

Дмитрий К (25 January 2013 - 20:34) писал:

Спасибо, как ни странно с 1365691201*1000 заработало.

я пробовал менять время - таймер не работает ((((

Наверх

#17 Alex2512006

Продвинутый пользователь

Пользователи
182 сообщений

ГородРжев, Тверская обл.

Отправлено 29 January 2013 - 14:00

Заработал, но при нужном мне времени не работает (((

Наверх

#18 Vaccina

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

Модераторы
24399 сообщений

Отправлено 29 January 2013 - 22:45

Пожалуйста, сообщите какое время вам необходимо отображать в таймере?

Наверх

#19 emix777

Продвинутый пользователь

Пользователи
113 сообщений

ГородМосква

Отправлено 09 February 2013 - 23:39

Подскажите, как сделать, чтобы блоки были немного поуже.

Наверх

#20 miyako

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

Модератоpы
5372 сообщений

Отправлено 10 February 2013 - 08:25

emix777 (09 February 2013 - 23:39) писал:

Подскажите, как сделать, чтобы блоки были немного поуже.

Нужно уменьшить их ширину свойством width

Наверх

Обратно в Каталог товаров

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

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

Добавление Блоков На Сайт

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

Войти

Google поиск