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

[Andrew S.]

1. Подскажите как сделать так, чтобы каждый параметр свойства не переносился на следующую строку, а чтобы он переносился только после заполнения строки, когда уже следующий не помещается. По-моему раньше такого не было. Оно как-то рядышком по порядку располагалось и не занимало так много места:


Наберите в поиске "Корпусная IP-камера Beward B1062" и вы перейдёте в этот товар, который изображён на фото.

2. Там же проблема с таблицей:


Сплющенные все фотографии по левой колонке. Как это исправить?

3. Плюс всё также косячит админка. С этим когда-нибудь уже можно что-то сделать? Тупит уже больше года:

[Alexey11]

Andrew S. (12 Апрель 2014 - 21:48) писал:

1. Подскажите как сделать так, чтобы каждый параметр свойства не переносился на следующую строку, а чтобы он переносился только после заполнения строки, когда уже следующий не помещается. По-моему раньше такого не было. Оно как-то рядышком по порядку располагалось и не занимало так много места:
Занимает слишком много места.png

Наберите в поиске "Корпусная IP-камера Beward B1062" и вы перейдёте в этот товар, который изображён на фото.

2. Там же проблема с таблицей:
Фотки сплющенные.png

Сплющенные все фотографии по левой колонке. Как это исправить?

3. Плюс всё также косячит админка. С этим когда-нибудь уже можно что-то сделать? Тупит уже больше года:
Тупая админка.png Тупая админка 2.png

1) Необходимые изменения произвели.
2) При проверке данной проблемы не обнаружилось. В каком браузере наблюдается данная проблема?

[Andrew S.]

Alexey11 (13 Апрель 2014 - 11:36) писал:

1) Необходимые изменения произвели.
2) При проверке данной проблемы не обнаружилось. В каком браузере наблюдается данная проблема?

2) В браузере хром: Версия 34.0.1847.116 m
Так и в опере Next так же сжимаются фотки: Версия: 21.0.1432.39 - Используется обновленная версия Opera

...

По-другому.. Давайте уберём фон:


И наверное свойства встанут ровно..

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

• 

Сообщение отредактировал Andrew S.: 14 Апрель 2014 - 05:05

[MikDark]

Andrew S. (14 Апрель 2014 - 04:35) писал:

2) В браузере хром: Версия 34.0.1847.116 m
Так и в опере Next так же сжимаются фотки: Версия: 21.0.1432.39 - Используется обновленная версия Opera

...

По-другому.. Давайте уберём фон:
Убрать фон.png

И наверное свойства встанут ровно..

2) Откройте данный товар для редактирования. Найдите поле описания и над ним в панели кликните на кнопку Источник. Появится исходный код. Там имщем строки:

<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
  <tr>
   <td><img alt="" src="http://design.technoimp.com/%D0%A2%D0%B5%D1%80%D0%BC%D0%BE%D0%BA%D0%BE%D0%B6%D1%83%D1%85%20Beward%20B10xx-3GK12.jpg?6367" style="width: 70px; height: 70px;" /></td>

и меняем на:

<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
  <tr>
   <td style="width: 70px;"><img alt="" src="http://design.technoimp.com/%D0%A2%D0%B5%D1%80%D0%BC%D0%BE%D0%BA%D0%BE%D0%B6%D1%83%D1%85%20Beward%20B10xx-3GK12.jpg?6367" style="width: 70px; height: 70px;" /></td>

[Andrew S.]

MikDark (14 Апрель 2014 - 06:38) писал:

2) Откройте данный товар для редактирования. Найдите поле описания и над ним в панели кликните на кнопку Источник. Появится исходный код. Там имщем строки:

<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td><img alt="" src="http://design.technoimp.com/%D0%A2%D0%B5%D1%80%D0%BC%D0%BE%D0%BA%D0%BE%D0%B6%D1%83%D1%85%20Beward%20B10xx-3GK12.jpg?6367" style="width: 70px; height: 70px;" /></td>

и меняем на:

<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td style="width: 70px;"><img alt="" src="http://design.technoimp.com/%D0%A2%D0%B5%D1%80%D0%BC%D0%BE%D0%BA%D0%BE%D0%B6%D1%83%D1%85%20Beward%20B10xx-3GK12.jpg?6367" style="width: 70px; height: 70px;" /></td>

А фон?

[MikDark]

Andrew S. (14 Апрель 2014 - 09:16) писал:

А фон?

Как понимаю нужно убрать отступы, чтобы края блока характеристик совпадали с краями остального контента?
Попробуйте так. Находим в main.css код:

.goodsDataMainModificationDataBlock, .goodsDataMainModificationsBlock, .goodsDataMainDeliveryBlock, .goodsDataMainModificationsDescriptionBlock {
padding: 1em;
font-size: 1.2em;
}

и удаляем padding: 1em;

[Andrew S.]

MikDark (14 Апрель 2014 - 09:20) писал:

Как понимаю нужно убрать отступы, чтобы края блока характеристик совпадали с краями остального контента?
Попробуйте так. Находим в main.css код:

.goodsDataMainModificationDataBlock, .goodsDataMainModificationsBlock, .goodsDataMainDeliveryBlock, .goodsDataMainModificationsDescriptionBlock {
padding: 1em;
font-size: 1.2em;
}

и удаляем padding: 1em;

И фон еще этот серый убрать полностью:

[Alexey11]

Andrew S. (14 Апрель 2014 - 11:11) писал:

И фон еще этот серый убрать полностью:
Убрать фон.png

1.Найдите данный блок кода в шаблоне main.css:

.product-options { background-color:#f6f6f6; }

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

.product-options {}

далее найдите данный блок кода:

.modblock{
	background-color: #f6f6f6;
}

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

.modblock{}

[Andrew S.]

Паддинг я убрал..

[Andrew S.]

В общем, если уж делать, то делать... Пока выложу фото с существующим товаром и то, что я очень хочу сделать. Ориентироваться на этот результат:

И буду набирать следующее сообщение, где всё подробно опишу и т.к. в него не влезет это фото...

[Andrew S.]

1. Убрать заголовки "Основное описание", "Главные характеристики", "Это может быть важно", "С этим товаром смотрят".

2. Все вертикальные отступы: большие - 18 пикселей, средние - 9 пикселей, маленькие - 4 пикселя. 4 пикселя есть один всего отступ, его не нужно менять.

3. Размер фото сделать 250*250. Отступы слева и справа от фото одинаковые. Слева отступ стандартный как у всего текста. Сделать рамку у фото цветом как везде (см. 3 рисунок). Также поменять цвета рамок на маленьких фото и в меню выбора свойств. Сверху фото отступ такой же как и слева. Цвет рамки из левого меню - где часы и поиск.

4. Главный заголовок товаров поместить справа от фото и сделать его бордовым цветом "854242", жирным шрифтом как было, но размером как в обычном тексте.

5. С ценой товара: добавить "Цена:" и сделать всю строчку как стандартный текст. Нежирным.

6. На заказ - остается прежним.

7. Квадрат с количеством товара уменьшить на 1 пиксель снизу (он выпирает).

8. Ссылки "Добавить к сравнению" и "Условия доставки" поставить в один ряд через вертикальную черту, которая уже есть на сайте в табличном виде отображения товаров. Убрать жирный шрифт этих слов-ссылок. И убрать совсем черту эту горизонтальную, которая есть сейчас, после них.

9. Наименование свойств-характеристик сделать без двоеточие в конце и нежирным.

10. "Другие фото" поместить тоже справа. Сделать нежирным.

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

Очень сильно сжимается фото. Следующим сообщением отправлю три раздельных изображения.

Надеюсь, на них все будет лучше видно:

Сообщение отредактировал Andrew S.: 14 Апрель 2014 - 20:37

[lew]

Цитата

1. Убрать заголовки "Основное описание", "Главные характеристики", "Это может быть важно", "С этим товаром смотрят".

Открываем админду. Далее отрываем товар
Там в коде ищем строчку

<h3 style="padding-top:1em;">Основное описание</h3>

и меняем на эту

<!--<h3 style="padding-top:1em;">Основное описание</h3>-->

эту

<h3 style="padding-top:1em;">Главные характеристики</h3>

на

<!--<h3 style="padding-top:1em;">Главные характеристики</h3>-->

эту

<h3 style="padding-top:1em; margin: 15px 0px 0px 0px;">Это может быть важно</h3>

на

<!--<h3 style="padding-top:1em; margin: 15px 0px 0px 0px;">Это может быть важно</h3>-->

эту

 <h3 style="padding-top:2em;margin-bottom:-1em;">С этим товаром смотрят</h3>

на

<!-- <h3 style="padding-top:2em;margin-bottom:-1em;">С этим товаром смотрят</h3>-->

[Andrew S.]

lew (14 Апрель 2014 - 22:34) писал:

Открываем админду. Далее отрываем товар
Там в коде ищем строчку

<h3 style="padding-top:1em;">Основное описание</h3>

и меняем на эту

<!--<h3 style="padding-top:1em;">Основное описание</h3>-->

эту

<h3 style="padding-top:1em;">Главные характеристики</h3>

на

<!--<h3 style="padding-top:1em;">Главные характеристики</h3>-->

эту

<h3 style="padding-top:1em; margin: 15px 0px 0px 0px;">Это может быть важно</h3>

на

<!--<h3 style="padding-top:1em; margin: 15px 0px 0px 0px;">Это может быть важно</h3>-->

эту

 <h3 style="padding-top:2em;margin-bottom:-1em;">С этим товаром смотрят</h3>

на

<!-- <h3 style="padding-top:2em;margin-bottom:-1em;">С этим товаром смотрят</h3>-->

Еще 3-5, 7-11

+

12) Теперь тут подровнять:


Можно также по порядку, по чуть-чуть делать.

Сообщение отредактировал Andrew S.: 15 Апрель 2014 - 02:43

[lew]

Перед тем как начать производить замену кода, на всякий случай сделайте бекап

Цитата

4. Главный заголовок товаров поместить справа от фото и сделать его бордовым цветом "854242", жирным шрифтом как было, но размером как в обычном тексте.

Зайдите в админку , откройте файл bootstrap-responsive.min.css
Найдите строчку

 .row:after{clear:both}[class*="span"]{float:left;min-height:1px;}

Под ней поставте новую строчку

.row h1.item-title-cards-h1{ font-size: 13px; color: #854242;font-weight: 900;}

Далее откройте товар, в нём найдите код

<div class="page-title">
<h1 itemprop="name">{GOODS_NAME}</h1>
<meta itemprop="category" content="{% FOR upper_navigation %}{% IFNOT upper_navigation.first %} > {% ENDIF %}{upper_navigation.NAME}{% ENDFOR %}" />
{% IF FORM_NOTICE %}<ul class="messages"><li class="{% IF FORM_NOTICE_IS_GOOD %}success-msg{% ELSE %}error-msg{% ENDIF %}">{FORM_NOTICE | nl2br}</li></ul>{% ENDIF %}
<!-- Артикул, если указан -->
<div {% IFNOT GOODS_MOD_ART_NUMBER %}style="display:none"{% ELSE %}itemprop="identifier"{% ENDIF %}>
Артикул: <span>{GOODS_MOD_ART_NUMBER}</span>
</div>
</div>

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

<!--<div class="page-title">
<h1 itemprop="name">{GOODS_NAME}</h1>
<meta itemprop="category" content="{% FOR upper_navigation %}{% IFNOT upper_navigation.first %} > {% ENDIF %}{upper_navigation.NAME}{% ENDFOR %}" />
{% IF FORM_NOTICE %}<ul class="messages"><li class="{% IF FORM_NOTICE_IS_GOOD %}success-msg{% ELSE %}error-msg{% ENDIF %}">{FORM_NOTICE | nl2br}</li></ul>{% ENDIF %}-->
<!-- Артикул, если указан
<div {% IFNOT GOODS_MOD_ART_NUMBER %}style="display:none"{% ELSE %}itemprop="identifier"{% ENDIF %}>
Артикул: <span>{GOODS_MOD_ART_NUMBER}</span>
</div>
</div>-->

Потом под кодом

<div class="span6" itemscope itemprop="offerDetails" itemtype="http://data-vocabulary.org/Offer">
<div class="row">

поставте следующий код  

<h1 class="item-title-cards-h1" itemprop="name">{GOODS_NAME}</h1>

Цитата

3. Размер фото сделать 250*250. Отступы слева и справа от фото одинаковые. Слева отступ стандартный как у всего текста. Сделать рамку у фото цветом как везде (см. 3 рисунок). Также поменять цвета рамок на маленьких фото и в меню выбора свойств. Сверху фото отступ такой же как и слева. Цвет рамки из левого меню - где часы и поиск.

10. "Другие фото" поместить тоже справа. Сделать нежирным.

Откройте  main.css Замените эту строчку

 .product-image {vertical-align: middle;text-align:center;padding:0px;border:0px solid #E2E2E2;height:204px;width:100%;*width:;cursor:pointer;}

на эту  

 .product-image {vertical-align: middle;text-align:center;padding:0px;border:0px solid #E2E2E2;height:250px;width:100%;*width:;cursor:pointer; border: 1px solid #E8E8E8; }

Откройте товар
Там замените этот код

<!-- Другие изображения товара. Отображаются если есть изображения товара -->
{% IFNOT goods_images_empty %}
{% FOR goods_images %}
{% IF goods_images.first %}
<div class="span12"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
<h5>Другие фото</h5>
<ul class="thumbnails goodsDataMainImages">
{% ENDIF %}
<li class="span2">
<a href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}" class="goods-image-icon-square thumbnail"><img class="thumbnail goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
<!-- Идентификатор изображения товара, используется для галереи изображений -->
<input type="hidden" value="{goods_images.ID}" />
</li>
{goods_images.index | is_divided("4"," ","")}
{% IF goods_images.last %}
</ul>
</div>
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}

на

<!-- Другие изображения товара. Отображаются если есть изображения товара
{% IFNOT goods_images_empty %}
{% FOR goods_images %}
{% IF goods_images.first %}
<div class="span12"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
<h5>Другие фото</h5>
<ul class="thumbnails goodsDataMainImages">
{% ENDIF %}
<li class="span2">
<a href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}" class="goods-image-icon-square thumbnail"><img class="thumbnail goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
--><!-- Идентификатор изображения товара, используется для галереи изображений
<input type="hidden" value="{goods_images.ID}" />
</li>
{goods_images.index | is_divided("4"," ","")}
{% IF goods_images.last %}
</ul>
</div>
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}-->

Потом найдите код

<!-- Блок описания модификации -->
<div class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}>
<div class="htmlDataBlock">
{GOODS_MOD_DESCRIPTION}
</div>
</div>
</div>
</div>
</div>
<!-- Блок описания товара. Показываем его если есть описание товара -->

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

<!-- Блок описания модификации -->
<div class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}>
<div class="htmlDataBlock">
{GOODS_MOD_DESCRIPTION}
</div>
</div>

<!-- Другие изображения товара. Отображаются если есть изображения товара -->
{% IFNOT goods_images_empty %}
{% FOR goods_images %}
{% IF goods_images.first %}
<div class="span12"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
<h5>Другие фото</h5>
<ul class="thumbnails goodsDataMainImages">
{% ENDIF %}
<li class="span2">
<a href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}" class="goods-image-icon-square thumbnail"><img class="thumbnail goods-image-icon top-margin-for-pictures" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
<!-- Идентификатор изображения товара, используется для галереи изображений -->
<input type="hidden" value="{goods_images.ID}" />
</li>
{goods_images.index | is_divided("4"," ","")}
{% IF goods_images.last %}
</ul>
</div>
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}

</div>
</div>
</div>
<!-- Блок описания товара. Показываем его если есть описание товара -->

Далее откройте товар, в нём найдите код

.goods-image-icon-square {width:{SETTINGS_GOODS_IMAGES_SIZE_ICON}px;height:{SETTINGS_GOODS_IMAGES_SIZE_ICON}px} 

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

.top-margin-for-pictures {margin-top:7px !important;}
.goods-image-icon-square {border: 1px solid #E8E8E8 !important; width:{SETTINGS_GOODS_IMAGES_SIZE_ICON}px;height:{SETTINGS_GOODS_IMAGES_SIZE_ICON}px} 

потом  откройте файл bootstrap-responsive.min.css
Найдите строчку

.row-fluid .span2{width:24.52991452991453%;*width:14.476723040552828%; padding: 2%}

замените её на

.row-fluid .span2{width:17.52991452991453%;*width:14.476723040552828%; padding: 2%}

потом найдите строчку

 .row-fluid .span12{width:100%;*width:99.94680851063829%}

под ней расположите новую строчку кода

.row-fluid .span12 h5{font-weight: inherit; margin-bottom: 0px;margin-left: 6px; }

потом код

input.input-text, select, textarea {
background: white;
border: 1px solid #999;
}

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

input.input-text, select, textarea {
background: white;
border: 1px solid #E8E8E8;
}

[Andrew S.]

lew (15 Апрель 2014 - 20:13) писал:

потом найдите строчку

 .row-fluid .span12{width:100%;*width:99.94680851063829%}

под ней расположите новую строчку кода

.row-fluid .span12 h5{font-weight: inherit; margin-bottom: 0px;margin-left: 6px; }

У меня три строчки одинаковые: 65-я строка, 157-я и 332-я. Какую заменить?

Вот еще это не сказали как сделать.. Остальное (подогнать расстояния вверху) - потом:

[Ирина345]

Andrew S. (16 Апрель 2014 - 02:53) писал:

У меня три строчки одинаковые: 65-я строка, 157-я и 332-я. Какую заменить?

Вот еще это не сказали как сделать.. Остальное (подогнать расстояния вверху) - потом:
Доделка Товара.png

Здравствуйте, что бы произвести изменения Вам нужно, найти в main.css

.goodsDataMainModificationsDescriptionBlock {border-top:1px solid #E5E5E5;}

.goodsDataFeatures {width:100%;margin-left:1em;font-size:1.2em;}

.goodsDataOpinionMessage {padding:1em;font-size:1.2em;font-style:italic;border-left:2px solid #b85454;margin:1em;}

заменить

.goodsDataMainModificationsDescriptionBlock {/*border-top:1px solid #E5E5E5;*/}

.goodsDataFeatures {width:100%;margin-left:1em;font-size:1.2em;margin-bottom:8px;}

.goodsDataOpinionMessage {padding:1em;font-size:1.2em;border-left:2px solid #b85454;margin:0em;}

[Andrew S.]

Ирина345 (16 Апрель 2014 - 14:26) писал:

Здравствуйте, что бы произвести изменения Вам нужно, найти в main.css

.goodsDataMainModificationsDescriptionBlock {border-top:1px solid #E5E5E5;}

.goodsDataFeatures {width:100%;margin-left:1em;font-size:1.2em;}

.goodsDataOpinionMessage {padding:1em;font-size:1.2em;font-style:italic;border-left:2px solid #b85454;margin:1em;}

заменить

.goodsDataMainModificationsDescriptionBlock {/*border-top:1px solid #E5E5E5;*/}

.goodsDataFeatures {width:100%;margin-left:1em;font-size:1.2em;margin-bottom:8px;}

.goodsDataOpinionMessage {padding:1em;font-size:1.2em;border-left:2px solid #b85454;margin:0em;}

Спасибо.А остальное?

[Ирина345]

Andrew S. (16 Апрель 2014 - 17:01) писал:

Спасибо.А остальное?

Найдите в main.css код

.link-compare { font-weight:bold; cursor: pointer;}

замените

.link-compare {cursor: pointer;}

[Andrew S.]

И вот это мы еще не доделали...

[Ирина345]

Andrew S. (16 Апрель 2014 - 17:01) писал:

Спасибо.А остальное?

Здравствуйте для редактирования размера Другие фото найдите в bootstrap.min.css и найдите код

.thumbnail{
display:block;margin:0px;line-height:20px;border:0px solid #ddd;/* -webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.055);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.055);box-shadow:0 1px 3px rgba(0,0,0,0.055);
-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out*/}

замените

.thumbnail{
display:block;margin:0px;height:100%;line-height:20px;border:0px solid #ddd;/* -webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.055);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.055);box-shadow:0 1px 3px rgba(0,0,0,0.055);
-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out*/}

чтобы увеличить расстояние Участникам группы... вам нужно зайти в редактор шаблонов->товар
и найти строку

Сроки доставки, когда "На заказ", - от 1 недели. В некоторых случаях - до 1 месяца.<br>

и в конце дописать<br>