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


Помогите Доработать Дизайн Главной

Автор hamer750, 06 мая 2013 08:51

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

#1 hamer750

hamer750

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

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

Отправлено 06 Май 2013 - 08:51

Здравствуйте!подскажите пожалуйста как сделать?:
1)Что бы на главной страницы у товара показывалось полное название,а так же цена
2)Добавить на это место разделительную линию
3)Немного сократить расстояние между разд.линией и товарами на главной
4)Добавить иконки к телефонам и часам работы предварительно увеличив шрифт
5)При наведении курсором на товар на главной выделять в рамку
Спасибо!жду ответа

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

  • вопросы.png

#2 hamer750

hamer750

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

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

Отправлено 06 Май 2013 - 09:01

номер аккаунта SL-189702

#3 hamer750

hamer750

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

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

Отправлено 06 Май 2013 - 15:40

Просмотр сообщенияhamer750 (06 Май 2013 - 08:51) писал:

Здравствуйте!подскажите пожалуйста как сделать?:
1)Что бы на главной страницы у товара показывалось полное название,а так же цена
2)Добавить на это место разделительную линию
3)Немного сократить расстояние между разд.линией и товарами на главной
4)Добавить иконки к телефонам и часам работы предварительно увеличив шрифт
5)При наведении курсором на товар на главной выделять в рамку
Спасибо!жду ответа

Ещё один вопрос,как слева сделать отдельный фон(вместо белого)-картнку

#4 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 07 Май 2013 - 08:38

Просмотр сообщенияhamer750 (06 Май 2013 - 15:40) писал:

Ещё один вопрос,как слева сделать отдельный фон(вместо белого)-картнку

Найдите код:
@media (min-width: 768px)
.menu_main > ul {
background: #fff;
}
и замените на:
@media (min-width: 768px)
.menu_main > ul {
}
в файле - bootstrap-responsive.min.css

Далее добавьте код в этот же файл:
.span4 {
background: url({ASSETS_IMAGES_PATH}название изображение);
}
Само изображение нужно загрузить через Сайт-Редактор тем-файлы

#5 hamer750

hamer750

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

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

Отправлено 07 Май 2013 - 10:29

Просмотр сообщенияmiyako (07 Май 2013 - 08:38) писал:

Найдите код:
@media (min-width: 768px)
.menu_main > ul {
background: #fff;
}
и замените на:
@media (min-width: 768px)
.menu_main > ul {
}
в файле - bootstrap-responsive.min.css

Далее добавьте код в этот же файл:
.span4 {
background: url({ASSETS_IMAGES_PATH}название изображение);
}
Само изображение нужно загрузить через Сайт-Редактор тем-файлы
Спсибо!там сверху(в самом верхней части) мои вопросы на которые мне еще не ответили..

#6 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 07 Май 2013 - 10:42

Просмотр сообщенияmiyako (07 Май 2013 - 08:38) писал:

Найдите код:
@media (min-width: 768px)
.menu_main > ul {
background: #fff;
}
и замените на:
@media (min-width: 768px)
.menu_main > ul {
}
в файле - bootstrap-responsive.min.css

Далее добавьте код в этот же файл:
.span4 {
background: url({ASSETS_IMAGES_PATH}название изображение);
}
Само изображение нужно загрузить через Сайт-Редактор тем-файлы

1) Возможно вам поможет тема - http://forum.storela...ены/#entry33893
2) Найдите код:
.nivo-controlNav {
text-align: center;
padding: 15px 0;
}
и замените на:
.nivo-controlNav {
text-align: center;
padding: 15px 0;
border-top: 2px solid black;
padding: 0px !important;
}
в файле - nyro_default.css

3) В файле nyro_default.css - найти код:
.theme-default .nivoSlider {
position: relative;
background: #fff url(http://design.xn--22-jlcq.xn--p1ai/nyro_loading.gif) no-repeat 50% 50%;
margin-bottom: 50px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
и заменить на:
.theme-default .nivoSlider {
position: relative;
background: #fff url(http://design.xn--22-jlcq.xn--p1ai/nyro_loading.gif) no-repeat 50% 50%;
margin-bottom: 25px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}

#7 hamer750

hamer750

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

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

Отправлено 07 Май 2013 - 11:49

Просмотр сообщенияmiyako (07 Май 2013 - 10:42) писал:

1) Возможно вам поможет тема - http://forum.storela...ены/#entry33893
2) Найдите код:
.nivo-controlNav {
text-align: center;
padding: 15px 0;
}
и замените на:
.nivo-controlNav {
text-align: center;
padding: 15px 0;
border-top: 2px solid black;
padding: 0px !important;
}
в файле - nyro_default.css

3) В файле nyro_default.css - найти код:
.theme-default .nivoSlider {
position: relative;
background: #fff url(http://design.xn--22-jlcq.xn--p1ai/nyro_loading.gif) no-repeat 50% 50%;
margin-bottom: 50px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
и заменить на:
.theme-default .nivoSlider {
position: relative;
background: #fff url(http://design.xn--22-jlcq.xn--p1ai/nyro_loading.gif) no-repeat 50% 50%;
margin-bottom: 25px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
4)Добавить иконки к телефонам и часам работы предварительно увеличив шрифт
5)При наведении курсором на товар на главной выделять в рамку

#8 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 07 Май 2013 - 13:32

4. В файле main.css найдите блок 
.phone {
font-size: 1.35em;
}
  и замените его на 
.phone {
font-size: 16px;
background: url({ASSETS_IMAGES_PATH}имя картинки.png) no-repeat;
}
5. В файл main.css добавьте блок 
.product-box:hover {
border:1px solid red;
margin:-1px;
}
цвет рамки поставьте такой какой Вам больше хочется. Для этого в строке 
border:1px solid red;
замените red на значение цвета.

#9 hamer750

hamer750

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

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

Отправлено 07 Май 2013 - 15:22

Просмотр сообщенияStasya (07 Май 2013 - 13:32) писал:

4. В файле main.css найдите блок 
.phone {
font-size: 1.35em;
}
  и замените его на 
.phone {
font-size: 16px;
background: url({ASSETS_IMAGES_PATH}имя картинки.png) no-repeat;
}
5. В файл main.css добавьте блок 
.product-box:hover {
border:1px solid red;
margin:-1px;
}
цвет рамки поставьте такой какой Вам больше хочется. Для этого в строке 
border:1px solid red;
замените red на значение цвета.
Спасибо!как сделать чтобы название товара помещалось в блок?(на главной странице)
2)Как Убрать слева фон,а справа оставить?

#10 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 07 Май 2013 - 16:26

Просмотр сообщенияhamer750 (07 Май 2013 - 15:22) писал:

Спасибо!как сделать чтобы название товара помещалось в блок?(на главной странице)
2)Как Убрать слева фон,а справа оставить?

найдите в файле main.css строчку
.product-name h2 { display: block; overflow:hidden; position: relative; height: 20px;}
измените на
.product-name h2 { display: block; overflow:hidden; position: relative; height: 120px;}

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

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

  • ScreenShot 252.png

#11 hamer750

hamer750

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

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

Отправлено 08 Май 2013 - 06:43

Просмотр сообщенияsupport 2.0 (07 Май 2013 - 16:26) писал:

найдите в файле main.css строчку
.product-name h2 { display: block; overflow:hidden; position: relative; height: 20px;}
измените на
.product-name h2 { display: block; overflow:hidden; position: relative; height: 120px;}

Для такого фона Вам нужно будет сделать картинку размером 1920х100
Таким образом Вы сможете сделать сначала белый фон примерно в 600 пикселей, далее у Вас будет идти Ваша картинка. Выглядеть это будет примерно как на прикрепленном файле
спасибо.Это работает.скажите как сделать вот такой калькулятор?Пробовал скопировать с сайта -получилось только форму ,но он не считает

#12 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 08 Май 2013 - 06:59

Просмотр сообщенияhamer750 (08 Май 2013 - 06:43) писал:

спасибо.Это работает.скажите как сделать вот такой калькулятор?Пробовал скопировать с сайта -получилось только форму ,но он не считает

Не совсем понятно какой вы хотите сделать калькулятор

#13 hamer750

hamer750

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

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

Отправлено 09 Май 2013 - 17:34

Просмотр сообщенияmiyako (08 Май 2013 - 06:59) писал:

Не совсем понятно какой вы хотите сделать калькулятор
Онлайн калькултор,клиент вводит кол-во работ.а он считает сумму..

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

  • Безимени-4.jpg

#14 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 09 Май 2013 - 19:58

Просмотр сообщенияhamer750 (09 Май 2013 - 17:34) писал:

Онлайн калькултор,клиент вводит кол-во работ.а он считает сумму..

Этот калькулятор не встроен в наш сервис, поэтому отвечать за его работу мы не можем. Скажите где Вы взяли установку данного калькулятора, чтобы, мы посмотрели что у Вас не получается. Кстати, это тоже не понятно: что же у вас конкретно не получилось? Он считает не то что именно Вам нужно или сам калькулятор должен считать одно, а считает другое?

#15 hamer750

hamer750

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

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

Отправлено 10 Май 2013 - 17:07

Просмотр сообщенияsupport 2.0 (09 Май 2013 - 19:58) писал:

Этот калькулятор не встроен в наш сервис, поэтому отвечать за его работу мы не можем. Скажите где Вы взяли установку данного калькулятора, чтобы, мы посмотрели что у Вас не получается. Кстати, это тоже не понятно: что же у вас конкретно не получилось? Он считает не то что именно Вам нужно или сам калькулятор должен считать одно, а считает другое?
Форма вставляется,все значения вводятся,нажимаешm кнопку Подсчитать,и всё..переводит вникуда.взял от сюда http://www.paritetsb.ru/calc.html

#16 Vaccina

Vaccina

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

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

Отправлено 14 Май 2013 - 05:00

в этом случае лучше использовать сторонний сервис, так как просто скопировать структуру вы копируете обычную оболочку, необходим JS код с формулой, у них обработка информации идет в php файле, у нас они не обрабатываются

#17 hamer750

hamer750

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

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

Отправлено 15 Май 2013 - 11:16

Просмотр сообщенияVaccina (14 Май 2013 - 05:00) писал:

в этом случае лучше использовать сторонний сервис, так как просто скопировать структуру вы копируете обычную оболочку, необходим JS код с формулой, у них обработка информации идет в php файле, у нас они не обрабатываются
Вот я нашел код.только как вставить в мой сайт под мой дизайн.подскажите?  http://ди22.рф/kalk.html

#18 Taisia

Taisia

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

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

Отправлено 15 Май 2013 - 13:29

Для того что бы ваш калькулятор имел вид и стиль вашего сайта вам не нужно создавать отдельную страницу в корне каталога


первое.вставьте в ваш файл html после строчки

&lt;script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

код скрипта



<!--// calc //-->
&lt;script language="JavaScript">
$(document).ready(function() {

$.fn.numeric = function(p) {
p = $.extend({
allow: "0123456789"
}, p);
var input = $(this);

return this.each
(
function()
{
$(this).keypress
(
function (e)
{
if (!e.charCode) k = String.fromCharCode(e.which);
else k = String.fromCharCode(e.charCode);
//zero conditions
if (k == 0 &amp;&amp; (input.val() == 0) ) e.preventDefault();

if (p.allow.indexOf(k) == -1) e.preventDefault();
if (e.ctrlKey&amp;&amp;k=='v') e.preventDefault();
}

);
}
);
};

function totalcounter()
{
var totalprice = 0;
$('#calculate .price input').each(function(){
totalprice += $(this).val() * $(this).parent().next().find('input').val();

});
$('#totalprice').html(totalprice.toString());

}

totalcounter();

$('#calculate').find('input').each(function(){
var input = $(this);
input.numeric();

$(this).prev().click(function(){
if(input.val() > 0) input.val(parseInt(input.val()) - 1);
totalcounter();
});
$(this).next().click(function(e){
input.val(parseInt(input.val()) + 1);
totalcounter();
});
});

{
$('#calculate .count input').each(function(){
$(this).change(function(){
totalcounter();
});
});
}

$('#reset').click(function(){
$('#calculate .count').find('input').val(0);
totalcounter();
});
$('.toggle').click(function(){

var block = $(this).parent().next();

if(block.hasClass('hidden'))
{
block.slideDown('slow').toggleClass('hidden');
} else {
block.slideUp('slow').toggleClass('hidden');
}
$(this).find('>i').toggleClass('active');
return false;
});
});
</script>
<!--// end calc //-->


создайте новую страницу и вставьте в нее в режиме "источник"
код

<form id="calculate" style="position: relative;">
<h5 id="1"><a class="toggle" href="#">Online-калькулятор (Монтажные работы по видеонаблюдению)</a></h5>
<div class="hidden">
<table>
<tbody>
<tr>
<th colspan="4">Online-калькулятор (Монтажные работы по видеонаблюдению)</th>
</tr>
<tr>
<td>Наименование</td>
<td>Ед. изм.</td>
<td>Цена</td>
<td>Кол-во</td>
</tr>
<tr>
<td>1. Монтаж, настройка видеорегистратора (4 канала), установка жесткого диска в регистратор.</td>
<td>шт.</td>
<td class="price">500 руб. <input type="hidden" value="500" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>2. Монтаж, настройка видеорегистратора (8 каналов), установка жесткого диска в регистратор.</td>
<td>шт.</td>
<td class="price">800 руб. <input type="hidden" value="800" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>3. Монтаж, настройка видеорегистратора (16 каналов), установка жесткого диска в регистратор.</td>
<td>шт.</td>
<td class="price">1500 руб. <input type="hidden" value="1500" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>4. Монтаж блока питания для системы видеонаблюдения внутри помещения.</td>
<td>шт.</td>
<td class="price">750 руб. <input type="hidden" value="750" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>5. Монтаж блока питания для системы видеонаблюдения уличного исполнения.</td>
<td>шт.</td>
<td class="price">1000 руб. <input type="hidden" value="1000" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>6. Монтаж накладных распределительных (коммутационных) коробок для видеокамер (1 видеокамера-1 коммутационная коробка).</td>
<td>шт.</td>
<td class="price">250 руб. <input type="hidden" value="250" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>7. Монтаж и настройка видеокамеры уличной.</td>
<td>шт.</td>
<td class="price">2500 руб. <input type="hidden" value="2500" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>8. Монтаж и настройка видеокамеры внутри помещения.</td>
<td>шт.</td>
<td class="price">1500 руб. <input type="hidden" value="1500" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>9. Монтаж уличного блока питания для поворотной видеокамеры (в кирпичную стену).</td>
<td>шт.</td>
<td class="price">1200 руб. <input type="hidden" value="1200" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>10. Монтаж полки для размещения видеорегистратора ( монитора) на стене кирпичной.</td>
<td>шт.</td>
<td class="price">800 руб. <input type="hidden" value="800" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>11. Монтаж внешнего микрофона для видеокамеры.</td>
<td>шт.</td>
<td class="price">700 руб. <input type="hidden" value="700" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>12. Монтаж (BNC разъемов) штекеров на концах кабеля (1 видеокамера-1 штекер).</td>
<td>шт.</td>
<td class="price">150 руб. <input type="hidden" value="150" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>13. Установка ИК датчика для системы видеонаблюдения.</td>
<td>шт.</td>
<td class="price">500 руб. <input type="hidden" value="500" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>14. Установка и настройка монитора для системы видеонаблюдения на стене.</td>
<td>шт.</td>
<td class="price">800 руб. <input type="hidden" value="800" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>15. Прокладка проводов для системы видеонаблюдения за подвесным потолком.</td>
<td>м.п.</td>
<td class="price">50 руб. <input type="hidden" value="50" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>16. Прокладка проводов для системы видеонаблюдения по стенам кирпичным( короб, гофратруба).</td>
<td>м.п.</td>
<td class="price">130 руб. <input type="hidden" value="130" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>17. Прокладка проводов для системы видеонаблюдения по стенам из гипсокартона( короб, гофратруба).</td>
<td>м.п.</td>
<td class="price">100 руб. <input type="hidden" value="100" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>18. Прокладка проводки открытой на скобах на кирпич.</td>
<td>м.п.</td>
<td class="price">100 руб. <input type="hidden" value="100" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>19. Штробление стен кирпичных под провод.</td>
<td>м.п.</td>
<td class="price">150 руб. <input type="hidden" value="150" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>20. Настройка системы видеонаблюдения(до 4 видеокамер).</td>
<td>система</td>
<td class="price">5000 руб. <input type="hidden" value="5000" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>21. Настройка системы видеонаблюдения(от 5 до 8 видеокамер).</td>
<td>система</td>
<td class="price">6000 руб. <input type="hidden" value="6000" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>22. Настройка системы видеонаблюдения(от 8 до 16 видеокамер).</td>
<td>система</td>
<td class="price">9000 руб. <input type="hidden" value="9000" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>23. Монтаж беспроводных камер видеонаблюдения (монтаж видеокамеры + монтаж беспроводного передатчика видеосигнала + монтаж беспроводного приемника видеосигнала + монтаж электропитания для камеры и приемника/передатчика).</td>
<td>шт.</td>
<td class="price">5000 руб. <input type="hidden" value="5000" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>24. Монтаж IP видеосервера для системы видеонаблюдения.</td>
<td>шт.</td>
<td class="price">700 руб. <input type="hidden" value="700" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>25. Подключение системы видеонаблюдения к сети Интернет.</td>
<td>система</td>
<td class="price">2000 руб. <input type="hidden" value="2000" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
</tbody>
</table>
</div>
<div class="line">
<h2>Общая сумма затрат: <span id="totalprice">0</span> руб.</h2>
<a class="button" href="#" id="reset" onclick="this.blur(); return false;"><span>Обнулить заказ</span></a></div>
</form>

#19 hamer750

hamer750

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

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

Отправлено 15 Май 2013 - 14:21

Просмотр сообщенияTaisia (15 Май 2013 - 13:29) писал:

Для того что бы ваш калькулятор имел вид и стиль вашего сайта вам не нужно создавать отдельную страницу в корне каталога


первое.вставьте в ваш файл html после строчки

&lt;script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

код скрипта



<!--// calc //-->
&lt;script language="JavaScript">
$(document).ready(function() {

$.fn.numeric = function(p) {
p = $.extend({
allow: "0123456789"
}, p);
var input = $(this);

return this.each
(
function()
{
$(this).keypress
(
function (e)
{
if (!e.charCode) k = String.fromCharCode(e.which);
else k = String.fromCharCode(e.charCode);
//zero conditions
if (k == 0 &amp;&amp; (input.val() == 0) ) e.preventDefault();

if (p.allow.indexOf(k) == -1) e.preventDefault();
if (e.ctrlKey&amp;&amp;k=='v') e.preventDefault();
}

);
}
);
};

function totalcounter()
{
var totalprice = 0;
$('#calculate .price input').each(function(){
totalprice += $(this).val() * $(this).parent().next().find('input').val();

});
$('#totalprice').html(totalprice.toString());

}

totalcounter();

$('#calculate').find('input').each(function(){
var input = $(this);
input.numeric();

$(this).prev().click(function(){
if(input.val() > 0) input.val(parseInt(input.val()) - 1);
totalcounter();
});
$(this).next().click(function(e){
input.val(parseInt(input.val()) + 1);
totalcounter();
});
});

{
$('#calculate .count input').each(function(){
$(this).change(function(){
totalcounter();
});
});
}

$('#reset').click(function(){
$('#calculate .count').find('input').val(0);
totalcounter();
});
$('.toggle').click(function(){

var block = $(this).parent().next();

if(block.hasClass('hidden'))
{
block.slideDown('slow').toggleClass('hidden');
} else {
block.slideUp('slow').toggleClass('hidden');
}
$(this).find('>i').toggleClass('active');
return false;
});
});
</script>
<!--// end calc //-->


создайте новую страницу и вставьте в нее в режиме "источник"
код

<form id="calculate" style="position: relative;">
<h5 id="1"><a class="toggle" href="#">Online-калькулятор (Монтажные работы по видеонаблюдению)</a></h5>
<div class="hidden">
<table>
<tbody>
<tr>
<th colspan="4">Online-калькулятор (Монтажные работы по видеонаблюдению)</th>
</tr>
<tr>
<td>Наименование</td>
<td>Ед. изм.</td>
<td>Цена</td>
<td>Кол-во</td>
</tr>
<tr>
<td>1. Монтаж, настройка видеорегистратора (4 канала), установка жесткого диска в регистратор.</td>
<td>шт.</td>
<td class="price">500 руб. <input type="hidden" value="500" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>2. Монтаж, настройка видеорегистратора (8 каналов), установка жесткого диска в регистратор.</td>
<td>шт.</td>
<td class="price">800 руб. <input type="hidden" value="800" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>3. Монтаж, настройка видеорегистратора (16 каналов), установка жесткого диска в регистратор.</td>
<td>шт.</td>
<td class="price">1500 руб. <input type="hidden" value="1500" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>4. Монтаж блока питания для системы видеонаблюдения внутри помещения.</td>
<td>шт.</td>
<td class="price">750 руб. <input type="hidden" value="750" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>5. Монтаж блока питания для системы видеонаблюдения уличного исполнения.</td>
<td>шт.</td>
<td class="price">1000 руб. <input type="hidden" value="1000" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>6. Монтаж накладных распределительных (коммутационных) коробок для видеокамер (1 видеокамера-1 коммутационная коробка).</td>
<td>шт.</td>
<td class="price">250 руб. <input type="hidden" value="250" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>7. Монтаж и настройка видеокамеры уличной.</td>
<td>шт.</td>
<td class="price">2500 руб. <input type="hidden" value="2500" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>8. Монтаж и настройка видеокамеры внутри помещения.</td>
<td>шт.</td>
<td class="price">1500 руб. <input type="hidden" value="1500" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>9. Монтаж уличного блока питания для поворотной видеокамеры (в кирпичную стену).</td>
<td>шт.</td>
<td class="price">1200 руб. <input type="hidden" value="1200" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>10. Монтаж полки для размещения видеорегистратора ( монитора) на стене кирпичной.</td>
<td>шт.</td>
<td class="price">800 руб. <input type="hidden" value="800" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>11. Монтаж внешнего микрофона для видеокамеры.</td>
<td>шт.</td>
<td class="price">700 руб. <input type="hidden" value="700" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>12. Монтаж (BNC разъемов) штекеров на концах кабеля (1 видеокамера-1 штекер).</td>
<td>шт.</td>
<td class="price">150 руб. <input type="hidden" value="150" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>13. Установка ИК датчика для системы видеонаблюдения.</td>
<td>шт.</td>
<td class="price">500 руб. <input type="hidden" value="500" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>14. Установка и настройка монитора для системы видеонаблюдения на стене.</td>
<td>шт.</td>
<td class="price">800 руб. <input type="hidden" value="800" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>15. Прокладка проводов для системы видеонаблюдения за подвесным потолком.</td>
<td>м.п.</td>
<td class="price">50 руб. <input type="hidden" value="50" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>16. Прокладка проводов для системы видеонаблюдения по стенам кирпичным( короб, гофратруба).</td>
<td>м.п.</td>
<td class="price">130 руб. <input type="hidden" value="130" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>17. Прокладка проводов для системы видеонаблюдения по стенам из гипсокартона( короб, гофратруба).</td>
<td>м.п.</td>
<td class="price">100 руб. <input type="hidden" value="100" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>18. Прокладка проводки открытой на скобах на кирпич.</td>
<td>м.п.</td>
<td class="price">100 руб. <input type="hidden" value="100" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>19. Штробление стен кирпичных под провод.</td>
<td>м.п.</td>
<td class="price">150 руб. <input type="hidden" value="150" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>20. Настройка системы видеонаблюдения(до 4 видеокамер).</td>
<td>система</td>
<td class="price">5000 руб. <input type="hidden" value="5000" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>21. Настройка системы видеонаблюдения(от 5 до 8 видеокамер).</td>
<td>система</td>
<td class="price">6000 руб. <input type="hidden" value="6000" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>22. Настройка системы видеонаблюдения(от 8 до 16 видеокамер).</td>
<td>система</td>
<td class="price">9000 руб. <input type="hidden" value="9000" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>23. Монтаж беспроводных камер видеонаблюдения (монтаж видеокамеры + монтаж беспроводного передатчика видеосигнала + монтаж беспроводного приемника видеосигнала + монтаж электропитания для камеры и приемника/передатчика).</td>
<td>шт.</td>
<td class="price">5000 руб. <input type="hidden" value="5000" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>24. Монтаж IP видеосервера для системы видеонаблюдения.</td>
<td>шт.</td>
<td class="price">700 руб. <input type="hidden" value="700" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
<tr>
<td>25. Подключение системы видеонаблюдения к сети Интернет.</td>
<td>система</td>
<td class="price">2000 руб. <input type="hidden" value="2000" /></td>
<td class="count"><img height="12" src="/assets/templates/default1/images/design/minus.png" width="12" /> <input type="text" value="0" /> <img height="12" src="/assets/templates/default1/images/design/plus.png" width="12" /></td>
</tr>
</tbody>
</table>
</div>
<div class="line">
<h2>Общая сумма затрат: <span id="totalprice">0</span> руб.</h2>
<a class="button" href="#" id="reset" onclick="this.blur(); return false;"><span>Обнулить заказ</span></a></div>
</form>
ок.спасибо.а как сделать чтобы окно было всегда раскрыто?http://xn--22-jlcq.x...блюдения-онлайн
И как сделать свой дизайн?сss прикрепить?чтобы поуже окна были

#20 Vaccina

Vaccina

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

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

Отправлено 16 Май 2013 - 04:36

Вам необходимо найти в коде вашего калькулятора

<div class="hidden">

и заменить на

<div>

так же найдите и удалите

<tr>
<th colspan="4">Online-калькулятор (Монтажные работы по видеонаблюдению)</th>
</tr>

Цитата

И как сделать свой дизайн?сss прикрепить?чтобы поуже окна были

Добавьте в ваш файл стилей main.css

#calculate td {
  padding: 10px 0;
  font-size: 12px;
}
#calculate .count {
  width: 80px
}
#calculate .count input  {
  width: 40px;
  display: inline;
}
#calculate .price {
  padding-right: 15px;
  text-align: left;
}

Обратно в Изменение общей стилистики


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Техника
  5. → Изменение общей стилистики
  6. Privacy Policy