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

[Andrew S.]

Вот теперь в окончание этой темы остались только вертикальные отступы в шаблоне Техника "Товар". Как увеличить или уменьшить.



1. Как поднять на 7 пикселей наименование товара. Сделали.

2. Прибавить 3 пикселя, увеличив отступ между названием товара и строкой с ценой. Сделали.

3. Уменьшить на 20 пикселей большой отступ между строкой наличия товара и блоком количества товара с кнопкой "положить в корзину". Сделали.

4. Уменьшить на 1 пиксель отступ между блоком количества товара с кнопкой "положить в корзину" и блоком "Добавить к сравнению | Условия доставки". Сделали.

5. Уменьшить на 19 пикселей отступ между блоком "Добавить к сравнению | Условия доставки" и блоком выбора модификаций. Сделали.

6. Прибавить 10 пикселей в отступ между блоком выбора модификаций и блоком с дополнительными фотографиями. ГОТОВО!
Сейчас это стало особенно актуально:


7. Убрать 5 пикселей, где отступ между надписью "Другие фото" и самими фотографиями. Если благодаря этому уменьшится отступ между первым и вторым рядами фотографий - замечательно. Но, надеюсь, такое большое количество фотографий нигде не придется размещать )). Готово!

8. Дальше 2 отступа. Один отступ перед блоком с характеристиками, второй после этого блока. Перед ним добавить 10 пикселей и после него добавить 5 пикселей. Готово!
Добавил еще код margin-top: 10px;

9. И последний отступ перед блоком отзывов. Тут я хочу отметить проблему с отображением блока отзывов. При наличии блока "с этим товаром смотрят" - блок отзывов перекрывается товарами (это также видно на фото в самом начале сообщения): ГОТОВО

Но даже если блока сопутствующих товаров нет, то блок отзывов стоит почти рядом с текстом, что очень некрасиво:



В итоге отзывы будут тут:



Хорошо бы было, если бы получилось так, что блок отзывов в товаре, не имеющем на данный момент сопутствующих товаров имел бы отступ в 18 пикселей от текста. Это надо было бы добавить 15 пикселей. Причем при наличии сопутствующих товаров - блок отзывов бы не перекрывался этими товарами.

10. Так и не помогли понять почему слово "Цена" оливкового цвета, а не как везде темно-серого. Причем при выборе любой модификации: (Сделали)

Нужный цвет, как везде: 858484

Благодаря этому все будет выглядеть как надо. Получается, я убрал строку с названием фото сверху - это уже огромная экономия. Плюс сокращаю длину в правой части от фотографии. Читаемость товара возрастет в несколько раз. Глаз будет бегать на равные расстояния, пропорциональные и мозг не будет напрягаться. Любые напряжения для покупателя - лишнее. Движения мышкой справа от фотографии при любом выборе в меню у товара - минимальные. Да и посмотрев на нехороший сайт, клиент может подумать, что и в остальном эти ребята всё делают через одно место. Так что я почти пришёл во всём к тому, что хотел, с помощью Вас. Вот как должен выглядеть результат:



Естественно, я не добьюсь идеала. Идеал потом будем создавать большим бренд-буком. Но и уже сейчас, зайдя в товар, появляется ощущение приятности.

Хочу напомнить также о вертикальных отступах в левом меню и некоторых других проблемах левого меню: ссылка.

И о необходимости добавления краткого описания товара в самый краткий список товаров с обрезанием по количеству символов и возможностью изменения размера шрифта серого цвета: ссылка.

На этом я всё. Очень надеюсь на Вашу помощь. Ведь осталось уже всего ничего. Самое основное всё уже прошли. Даже дышать легче стало ))

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

[lew]

Цитата

Хорошо. И подскажите что со словом цена сделать, чтобы оно было правильного серого цвета, а не оливкового...

откройте main.css
найдите код  

.goodsDataMainModificationPriceNow-price{ color: #857942; font-size: 1.1em; font-style: normal; font-weight: normal; }

замените на

.goodsDataMainModificationPriceNow-price{ color: #858484; font-size: 1.1em; font-style: normal; font-weight: normal; }

Цитата

1. Как поднять на 7 пикселей наименование товара.

Цитата

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

откройте bootstrap-responsive.min.css  
найдите код

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

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

.row h1.item-title-cards-h1{ font-size: 13px; color: #854242;font-weight: 900;display: block;margin-top: -7px; margin-bottom: 3px;}

Цитата

3. Уменьшить на 20 пикселей большой отступ между строкой наличия товара и блоком количества товара с кнопкой "положить в корзину".

в main.css найдите следующий код

.goodsDataMainModificationAvailable {white-space:nowrap;}

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

.goodsDataMainModificationAvailable {white-space:nowrap; margin-bottom: -20px;}

[b]4.[/b][color=#282828][font=helvetica, arial, sans-serif] Уменьшить на 1 пиксель [/font][/color][b]отступ между блоком количества товара с кнопкой "положить в корзину" и блоком "Добавить к сравнению | Условия доставки"[/b][color=#282828][font=helvetica, arial, sans-serif].[/font][/color]

откройте bootstrap-responsive.min.css  
найдите код

.row-fluid .offset-add-to-comparison{margin-left: 1px;}

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

.row-fluid .offset-add-to-comparison{margin-left: 1px; margin-top: -1px;}

Цитата

5. Уменьшить на 19 пикселей отступ между блоком "Добавить к сравнению | Условия доставки" и блоком выбора модификаций.

откройте main.css
найдите код  

.modblock{}

замените на

.modblock{ margin-top: -19px;}
.modblock-photo{}

Цитата

6. Прибавить 10 пикселей в отступ между блоком выбора модификаций и блоком с дополнительными фотографиями.

откройте товар замените эту строчку
<div class="span12 modblock"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
на эту
<div class="span12 modblock modblock-photo"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>

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

.modblock{ margin-top: -19px;}
.modblock-photo{}

Замените на

.modblock{ margin-top: -19px;}
.modblock-photo{ margin-top: 10px;}

вроде 6-ой всё?

Цитата

7. Убрать 5 пикселей, где отступ между надписью "Другие фото" и самими фотографиями. Если благодаря этому уменьшится отступ между первым и вторым рядами фотографий - замечательно. Но, надеюсь, такое большое количество фотографий нигде не придется размещать ))

откройте bootstrap-responsive.min.css  
найдите код

.row-fluid .goodsDataMainImages{margin-left: -2px;}

Замените на

.row-fluid .goodsDataMainImages{margin-left: -2px; margin-top: -22px;}

Цитата

8. Дальше 2 отступа. Один отступ перед блоком с характеристиками, второй после этого блока. Перед ним добавить 10 пикселей и после него добавить 5 пикселей.

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

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

Замените на

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

Цитата

9. И последний отступ перед блоком отзывов.

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

.goodsDataOpinionMessage.empty {margin-left:2em;border-left:2px solid #EAEAEA;}

Замените на

.goodsDataOpinionMessage.empty {margin-left:2em;border-left:2px solid #EAEAEA; margin-top: 15px;}

[Andrew S.]

lew (21 Апрель 2014 - 21:00) писал:

откройте main.css
найдите код  

.goodsDataMainModificationPriceNow-price{ color: #857942; font-size: 1.1em; font-style: normal; font-weight: normal; }

замените на

.goodsDataMainModificationPriceNow-price{ color: #858484; font-size: 1.1em; font-style: normal; font-weight: normal; }

откройте bootstrap-responsive.min.css  
найдите код

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

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

.row h1.item-title-cards-h1{ font-size: 13px; color: #854242;font-weight: 900;display: block;margin-top: -7px; margin-bottom: 3px;}

в main.css найдите следующий код

.goodsDataMainModificationAvailable {white-space:nowrap;}

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

.goodsDataMainModificationAvailable {white-space:nowrap; margin-bottom: -20px;}

[b]4.[/b][color=#282828][font=helvetica, arial, sans-serif] Уменьшить на 1 пиксель [/font][/color][b]отступ между блоком количества товара с кнопкой "положить в корзину" и блоком "Добавить к сравнению | Условия доставки"[/b][color=#282828][font=helvetica, arial, sans-serif].[/font][/color]

откройте bootstrap-responsive.min.css  
найдите код

.row-fluid .offset-add-to-comparison{margin-left: 1px;}

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

.row-fluid .offset-add-to-comparison{margin-left: 1px; margin-top: -1px;}

откройте main.css
найдите код  

.modblock{}

замените на

.modblock{ margin-top: -19px;}
.modblock-photo{}

откройте товар замените эту строчку
<div class="span12 modblock"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
на эту
<div class="span12 modblock modblock-photo"{% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>

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

.modblock{ margin-top: -19px;}
.modblock-photo{}

Замените на

.modblock{ margin-top: -19px;}
.modblock-photo{ margin-top: 10px;}

вроде 6-ой всё?


откройте bootstrap-responsive.min.css  
найдите код

.row-fluid .goodsDataMainImages{margin-left: -2px;}

Замените на

.row-fluid .goodsDataMainImages{margin-left: -2px; margin-top: -22px;}

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

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

Замените на

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

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

.goodsDataOpinionMessage.empty {margin-left:2em;border-left:2px solid #EAEAEA;}

Замените на

.goodsDataOpinionMessage.empty {margin-left:2em;border-left:2px solid #EAEAEA; margin-top: 15px;}

Спасибо! А к блоку "с этим товаром смотрят" можно еще немножко отступа снизу добавить? А то когда он есть - все-таки перекрывает блок отзывов.

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

[Andrew S.]

Andrew S. (23 Апрель 2014 - 00:49) писал:

Спасибо! А к блоку "с этим товаром смотрят" можно еще немножко отступа снизу добавить? А то когда он есть - все-таки перекрывает блок отзывов.

Или не перекрывают.. Не пойму. Сейчас на другом товаре увидел, что вроде нормально. Вот так вот мы сделали карточку товара очень хорошей! Очень жду по тем двум вопросам!

[lew]

напомните что за те "два вопроса"?

Цитата

"с этим товаром смотрят" можно еще немножко отступа снизу добавить

если нужно, то давайте сделаю отступ?

[Andrew S.]

lew (26 Апрель 2014 - 19:53) писал:

напомните что за те "два вопроса"?

если нужно, то давайте сделаю отступ?

Напишите, пожалуйста, тут как это сделать. Чтобы потом это все в сообщениях осталось и я уже не буду Вас спрашивать как это сделать там.

[lew]

а напомните где находится  "с этим товаром смотрят"?
Я бы и под словом  "Вы смотрели" поставил отступ. а то сливается с картинками что расположены под ним.

[Andrew S.]

lew (27 Апрель 2014 - 17:18) писал:

а напомните где находится  "с этим товаром смотрят"?
Я бы и под словом  "Вы смотрели" поставил отступ. а то сливается с картинками что расположены под ним.

1. Да, можно под этим словом его поставить. А то не на всех фото с белым фоном товары находятся низко. Просто раньше там не было границ и так не сливалось. Но лучше поставить.

2. Блок "с этим товаром смотрят" находится после длинного описания товара, после добавленного блока с дополнительной информацией и перед блоком отзывов. Между ними.

[lew]

Цитата

1. Да, можно под этим словом его поставить. А то не на всех фото с белым фоном товары находятся низко. Просто раньше там не было границ и так не сливалось. Но лучше поставить.

мне кажется этот вопрос уже отпал. теперь всё нормально. (А так жду новых ошибок)

Цитата

2. Блок "с этим товаром смотрят" находится после длинного описания товара, после добавленного блока с дополнительной информацией и перед блоком отзывов. Между ними.

В товаре
найдите код

<!-- С этим товаром смотрят -->
{% IFNOT related_views_goods_empty %}
<!-- Вывод товаров таблицей -->
<!-- <h3 style="padding-top:2em;margin-bottom:-1em;">С этим товаром смотрят</h3>-->
<ul class="row products-grid">
{% FOR related_views_goods %}
<li class="span3 item">
<div class="product-box">

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

<!-- С этим товаром смотрят -->
{% IFNOT related_views_goods_empty %}
<!-- Вывод товаров таблицей -->
<!-- <h3 style="padding-top:2em;margin-bottom:-1em;">С этим товаром смотрят</h3>-->
<ul class="row products-grid" style="margin-bottom: 30px;">
{% FOR related_views_goods %}
<li class="span3 item">
<div class="product-box">