Добавление Блоков На Сайт
#1
Отправлено 03 Декабрь 2012 - 04:52
#2
Отправлено 03 Декабрь 2012 - 12:56
alkazare (03 Декабрь 2012 - 04:52) писал:
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 Апрель 2013 - 16:21
изменен код
#3
Отправлено 04 Декабрь 2012 - 07:02
#4
Отправлено 04 Декабрь 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
Отправлено 05 Декабрь 2012 - 06:44
#7
Отправлено 05 Декабрь 2012 - 16:39
alkazare (05 Декабрь 2012 - 06:44) писал:
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
Отправлено 25 Январь 2013 - 15:48
#10
Отправлено 25 Январь 2013 - 17:29
Alex2512006 (25 Январь 2013 - 15:48) писал:
Дмитрий К (25 Январь 2013 - 16:44) писал:
поставьте цифры побольше, например, 1356691201*1000 или 1357691201*1000 или 1365691201*1000
Просто попробуйте самостоятельно менять эти цифры на большие числа и счетчик появится
#11
Отправлено 25 Январь 2013 - 20:34
support 2.0 (25 Январь 2013 - 17:29) писал:
Просто попробуйте самостоятельно менять эти цифры на большие числа и счетчик появится
#12
Отправлено 26 Январь 2013 - 19:29
Сайт: ShopLesson.ru
#13
Отправлено 26 Январь 2013 - 20:14
Lesson (26 Январь 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
Отправлено 28 Январь 2013 - 23:57
.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
Отправлено 29 Январь 2013 - 08:26
Vaccina (28 Январь 2013 - 23:57) писал:
.block .timer > .digits { font-size: 20px; font-weight: 400; line-height: 5px; }
и заменить на
.block .timer > .digits { font-size: 12px; font-weight: 400; line-height: 12px; }
#17
Отправлено 29 Январь 2013 - 14:00
#18
Отправлено 29 Январь 2013 - 22:45
#19
Отправлено 09 Февраль 2013 - 23:39
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных