Andrew S. (05 Май 2015 - 07:18) писал:
Здравствуйте!
1. Для начала, скажите, пожалуйста, как убрать вездесущую подсказку "Страница товара":
Podskazka_1.png Podskazka_2.png
Эта надпись появляется очень много где в товаре, что немного раздражает.
2. А создать подсказку нужно на основе вот этого кода (tooltip на css):
http://jemand.ru/vsp...tooltip-na-css/
Тут описан пример её отображения:
http://jemand.ru/exa...tip-na-css.html
И чтобы она всплывала при наведении не от текста, а от картинок со знаком вопрос, типа пояснения. И всплывала не сверху, а справа, как бы в продолжение текста:
Guestion_marks.png
Знак вопроса, конечно, и подсказка на рисунке идёт не совсем ровно по вертикали. Идеально бы её на 1 пиксель вниз по изображению снизить.
Вот как хотелось бы:
Guestion_marks_2.png
А) Она тут прозрачная.
Б) Граница #D0D0D2.
В) Текст #444444.
Г) Без закруглений границ.
Д) По высоте подогнать под значок с вопросом. Или, если что, подгоню значок вопроса под размер всплывающей подсказки. Он размером 16*16.
Е) Чтобы по тексту по строкам всё шло так так, чтобы ровно было как на картинке или чтобы можно было подогнать.
И самое важное, так задать, чтобы это не отображалось ВООБЩЕ в адаптивной версии.
Сможем так сделать?
Здравствуйте.
1) В шаблоне Товар найдите код:
<form action="{CART_ADD_GOODS_MODIFICATION_URL}" method="post" class="goodsDataForm" title="Страница товара">
и замените его на:
<form action="{CART_ADD_GOODS_MODIFICATION_URL}" method="post" class="goodsDataForm">
2) Там же найдите код:
<li class="goodsDataMainModificationAvailable">
<div class="available-true" {% IF GOODS_MOD_REST_VALUE=0 %} style="display:none;" {% ENDIF %}>Есть в наличии в Хабаровске</div>
<div class="available-false" style="{% IF GOODS_MOD_REST_VALUE>0 %}display:none;{% ENDIF %}">На заказ</div>
</li>
<!-- Цена товара -->
<li class="cena">
<ul>
<!-- Старая цена -->
<!-- Если на товар действует скидка -->
{% IF GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT>GOODS_MOD_PRICE_NOW %}
<li class="old goodsDataMainModificationPriceOld" title="Без скидки">{GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</li>
<!-- Если старая цена была больше новой -->
{% ELSEIF GOODS_MOD_PRICE_OLD>GOODS_MOD_PRICE_NOW %}
<li class="old goodsDataMainModificationPriceOld" title="Старая цена">{GOODS_MOD_PRICE_OLD | money_format}</li>
{% ENDIF %}
<li class="goodsDataMainModificationPriceNow" title="Цена сейчас">
<span>Цена: {GOODS_MOD_PRICE_NOW | money_format}</span>
</li>
</ul>
</li>
и замените его на:
<li class="goodsDataMainModificationAvailable tooltip">
<div class="available-true" {% IF GOODS_MOD_REST_VALUE=0 %} style="display:none;" {% ENDIF %}>Есть в наличии в Хабаровске</div>
<div class="available-false" style="{% IF GOODS_MOD_REST_VALUE>0 %}display:none;{% ENDIF %}">На заказ</div>
<em>Ваша подсказка для наличия.</em>
</li>
<!-- Цена товара -->
<li class="cena tooltip">
<ul>
<!-- Старая цена -->
<!-- Если на товар действует скидка -->
{% IF GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT>GOODS_MOD_PRICE_NOW %}
<li class="old goodsDataMainModificationPriceOld" title="Без скидки">{GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</li>
<!-- Если старая цена была больше новой -->
{% ELSEIF GOODS_MOD_PRICE_OLD>GOODS_MOD_PRICE_NOW %}
<li class="old goodsDataMainModificationPriceOld" title="Старая цена">{GOODS_MOD_PRICE_OLD | money_format}</li>
{% ENDIF %}
<li class="goodsDataMainModificationPriceNow" title="Цена сейчас">
<span>Цена: {GOODS_MOD_PRICE_NOW | money_format}</span>
</li>
</ul>
<em>Ваша подсказка для цены.</em>
</li>
3) Теперь в main.css находим:
.productInformations>ul>li {
display: inline-block;
float: left;
width: 100%;
}
и меняем на:
.productInformations>ul>li {
display: inline-block;
float: left;
clear: both;
}
.tooltip {
position: relative;
}
.tooltip em {
display: none;
}
.tooltip:hover em {
font-style: normal;
display: block;
position: absolute;
background: #000;
color: #FFF;
padding: 3px 5px;
bottom: 22px;
right: 0;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0 0 5px #ccc;
-moz-box-shadow: 0 0 5px #ccc;
}
.tooltip:hover em i {
position: absolute;
bottom: -7px;
right: 5px;
border-top: 7px solid #000;
border-left: 7px solid transparent;
display: block;
}
Если все заработает, по поможем стилизовать, но такую рамочку, сделать к сожалению, не получится. Либо просто прямоугольную, либо закругленную.
0
