Выпадающий Список Модификаций
#1
Отправлено 29 Июнь 2015 - 18:25
1. Необходимо поменять местоположение выпадающего списка модификаций, как на картинке.
2. При увеличении размера шрифта в выпадающем списке, он обрезается, т.к. не помещается в окошко списка. Как увеличить еще и прямоугольное окно?
3. Где можно менять цвет, толщину шрифта, размер, цвет фона и прочие параметры самого окошка списка?
#2
Отправлено 29 Июнь 2015 - 20:43
bronko (29 Июнь 2015 - 18:25) писал:
1. Необходимо поменять местоположение выпадающего списка модификаций, как на картинке.
2. При увеличении размера шрифта в выпадающем списке, он обрезается, т.к. не помещается в окошко списка. Как увеличить еще и прямоугольное окно?
3. Где можно менять цвет, толщину шрифта, размер, цвет фона и прочие параметры самого окошка списка?
Здравствуйте, пожалуйста укажите ссылку на товар у которого присутствует данная модификация(Вы можете удалить из адреса название и домен магазина).
#3
Отправлено 29 Июнь 2015 - 23:44
Вот примеры с одной и с двумя модификациями:
http://сайт/goods/%D0%97%D0%B2%D0%B5%D0%B7%D0%B4%D0%B0-%D0%B2%D0%B5%D0%B4%D1%83%D1%89%D0%B0%D1%8F-%D0%BD%D0%B0-%D0%BC%D0%BE%D1%82%D0%BE%D1%86%D0%B8%D0%BA%D0%BB-%D1%81%D1%82%D0%B0%D1%80%D0%BE%D0%B3%D0%BE-%D0%BE%D0%B1%D1%80%D0%B0%D0%B7%D1%86%D0%B0?mod_id=13674005
http://сайт/goods/%D0%A0%D1%8B%D1%87%D0%B0%D0%B3-%D1%81%D1%86%D0%B5%D0%BF%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F?mod_id=13660478
#4
Отправлено 04 Июль 2015 - 00:21
#5
Отправлено 07 Июль 2015 - 23:45
Вы можете хотя бы указать где править разметку?
#6
Отправлено 08 Июль 2015 - 01:49
1. В шаблоне Товар найдите:
<!-- Блок выбора модификаций для текущей товарной позиции --> <div class="goodsDataMainModificationsBlock description" {% IF GOODS_NO_CHOISE_IN_PROPERTIES_FOR_MODIFICATIONS %}style="display:none;"{% ENDIF %}> {% FOR goods_modifications_properties %} <div class="goodsDataMainModificationsBlockProperty"> <!-- Выдаем списки со свойствами для модификаций, чтобы определить какую модификацию товара хочет пользователь --> {% FOR values %} <!-- Если это первый элемент в списке --> {% IF goods_modifications_properties.values.first %} <strong>{goods_modifications_properties.NAME}:</strong><br /> <span class="select-box"> <select id="needfontsize" name="form[properties][]"> {% ENDIF %} <option value="{goods_modifications_properties.values.ID}" {% IF goods_modifications_properties.values.SELECTED %}selected="selected"{% ENDIF %}>{goods_modifications_properties.values.NAME}</option> <!-- Если это последний элемент в списке --> {% IF goods_modifications_properties.values.last %} </select> </span> {% ENDIF %} {% ENDFOR %} </div> <div class="clear"></div> {goods_modifications_properties.index | is_divided("2","","")} {% ENDFOR %} <!-- Данные по модификациям для текущей товарной позиции --> {% FOR goods_modifications %} <div class="goodsDataMainModificationsList" rel="{goods_modifications.PROPERTIES_SLUG}"> <input type="hidden" name="id" value="{goods_modifications.ID}" /> <input type="hidden" name="art_number" value="{goods_modifications.ART_NUMBER}" /> <input type="hidden" name="price_now" value="{goods_modifications.PRICE_NOW}" /> <div class="price_now_formated" style="display:none">{goods_modifications.PRICE_NOW | money_format}</div> <input type="hidden" name="price_old" value="{% IF goods_modifications.PRICE_NOW_WITHOUT_DISCOUNT>goods_modifications.PRICE_NOW %}{goods_modifications.PRICE_NOW_WITHOUT_DISCOUNT}{% ELSE %}{goods_modifications.PRICE_OLD}{% ENDIF %}" /> <div class="price_old_formated" style="display:none">{% IF goods_modifications.PRICE_NOW_WITHOUT_DISCOUNT>goods_modifications.PRICE_NOW %}{goods_modifications.PRICE_NOW_WITHOUT_DISCOUNT | money_format}{% ELSE %}{goods_modifications.PRICE_OLD | money_format}{% ENDIF %}</div> <input type="hidden" name="rest_value" value="{goods_modifications.REST_VALUE}" /> <input type="hidden" name="measure_id" value="{goods_modifications.MEASURE_ID}" /> <input type="hidden" name="measure_name" value="{goods_modifications.MEASURE_NAME}" /> <input type="hidden" name="measure_desc" value="{goods_modifications.MEASURE_DESC}" /> <input type="hidden" name="measure_precision" value="{goods_modifications.MEASURE_PRECISION}" /> <input type="hidden" name="is_has_in_compare_list" value="{goods_modifications.IS_HAS_IN_COMPARE_LIST}" /> <div class="description" style="display:none">{goods_modifications.DESCRIPTION}</div> </div> {% ENDFOR %} <div class="clear"></div> <!-- Блок описания модификации --> <div class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}> {GOODS_MOD_DESCRIPTION} </div> <div class="clear"></div> </div>
переместите данный код, расположив после:
<!-- /Старая цена --> </div> <!-- По этому значению производится заказ товара --> <input type="hidden" name="form[goods_mod_id]" value="{GOODS_MOD_ID}" class="goodsDataMainModificationId" /> <!-- Добавление в корзину --> <div class="cart">
далее в style.css добавьте:
.goodsDataMainModificationsBlock.description { float: left; margin: -10px 10px 0 0; display: inline-block; }
2-3. В style.css найдите:
#needfontsize { font-size: 17px; }замените на:
#needfontsize { font-size: 17px; height: auto; }
В этом же окне вы можете задавать стили не только для шрифта внутри окошка но и для стилизации самого выпадающего списка.
#7
Отправлено 01 Сентябрь 2015 - 07:18
#8
Отправлено 01 Сентябрь 2015 - 10:53
Toko (01 Сентябрь 2015 - 07:18) писал:
найдите в main.css
#content .boxmoney .main .block .mod .select select { color: #004b68; width: auto; }
изменяете значение color: #004b68;
#9
Отправлено 01 Сентябрь 2015 - 21:49
Ирина345 (01 Сентябрь 2015 - 10:53) писал:
найдите в main.css
#content .boxmoney .main .block .mod .select select { color: #004b68; width: auto; }
изменяете значение color: #004b68;
#10
Отправлено 02 Сентябрь 2015 - 03:26
#content .boxmoney .main .block .mod .title { color: #2F7793; }
в данном блоке измените значение стиля color
#12
Отправлено 27 Декабрь 2015 - 23:29
Vaccina (08 Июль 2015 - 01:49) писал:
.goodsDataMainModificationsBlock.description { float: left; margin: -10px 10px 0 0; display: inline-block; }
2-3. В style.css найдите:
#needfontsize { font-size: 17px; }замените на:
#needfontsize { font-size: 17px; height: auto; }
В этом же окне вы можете задавать стили не только для шрифта внутри окошка но и для стилизации самого выпадающего списка.
Спасибо, получилось.
А как покрасить фон выпадающего списка в определнный цвет? Чтобы он выделялся на странице
#13
Отправлено 28 Декабрь 2015 - 12:33
bronko (27 Декабрь 2015 - 23:29) писал:
А как покрасить фон выпадающего списка в определнный цвет? Чтобы он выделялся на странице
Здравствуйте, в main.css найдите код:
.select-box select {height: 27px;padding: 5px;margin: 0;font-size: 12px;color: #333;cursor: pointer;border: none;background: rgba(225,225,225,0) url('{ASSETS_IMAGES_PATH}bg-dropdown-select.png?design=movement') no-repeat 100% 50%;}
в этом коде свойство background: rgba(225,225,225,0) url('{ASSETS_IMAGES_PATH}bg-dropdown-select.png?design=movement') no-repeat 100% 50%; отвечает за фон выпадающего списка.
Чтобы поменять цвет, вам нужно изменить значение rgba(225,225,225,0). А именно, обязательно изменить значение 0 - это прозрачность, (0 - полностью прозрачный, 1- полностью непрозрачный).
Первые три значения - это код цвета. Меняйте на значения нужные Вам.
Пример при rgba(225,225,225,0.5) выглядит так:
#15
Отправлено 06 Октябрь 2016 - 06:56
.select-box {*float: left;display: inline-block;overflow: hidden;vertical-align: middle;padding: 0;background: rgba(225,225,225,0) url('{ASSETS_IMAGES_PATH}bg-dropdown-select.png?design=movement') no-repeat 100% 50%;border: 1px solid #ddd;}
замените на:
.select-box {*float: left;width: auto !important;display: inline-block;overflow: hidden;vertical-align: middle;padding: 0;background: rgba(225,225,225,0) url('{ASSETS_IMAGES_PATH}bg-dropdown-select.png?design=movement') no-repeat 100% 50%;border: 1px solid #ddd;}
#16
Отправлено 07 Октябрь 2016 - 15:08
Vaccina (06 Октябрь 2016 - 06:56) писал:
.select-box {*float: left;display: inline-block;overflow: hidden;vertical-align: middle;padding: 0;background: rgba(225,225,225,0) url('{ASSETS_IMAGES_PATH}bg-dropdown-select.png?design=movement') no-repeat 100% 50%;border: 1px solid #ddd;}
замените на:
.select-box {*float: left;width: auto !important;display: inline-block;overflow: hidden;vertical-align: middle;padding: 0;background: rgba(225,225,225,0) url('{ASSETS_IMAGES_PATH}bg-dropdown-select.png?design=movement') no-repeat 100% 50%;border: 1px solid #ddd;}
также вопрос как убрать одну из стрелочек (лучше тонкую) а то их две
#17
Отправлено 07 Октябрь 2016 - 15:17
ogonek7777 (07 Октябрь 2016 - 15:08) писал:
также вопрос как убрать одну из стрелочек (лучше тонкую) а то их две
В файле main.css найдите блок
.select-box select { height: 27px; padding: 5px; margin: 0; width: 220px; font-size: 14px; color: #000; cursor: pointer; border: none; background: rgba(225,225,225,0) url(http://design.ffgears.ru/bg-dropdown-select.png?design=movement) no-repeat 100% 50%; }и замените его на
.select-box select { height: 27px; padding: 5px; margin: 0; width: 220px; font-size: 14px; color: #000; cursor: pointer; border: none; background: none; }
В файлу main.js найдите строку
$(this).find('select').css('width', select_width + 57 + 'px');и замените ее на
$(this).find('select').css('width', select_width + 57 + 28 + 'px');
#18
Отправлено 08 Октябрь 2016 - 12:18
Stasya (07 Октябрь 2016 - 15:17) писал:
.select-box select { height: 27px; padding: 5px; margin: 0; width: 220px; font-size: 14px; color: #000; cursor: pointer; border: none; background: rgba(225,225,225,0) url(http://design.ffgears.ru/bg-dropdown-select.png?design=movement) no-repeat 100% 50%; }и замените его на
.select-box select { height: 27px; padding: 5px; margin: 0; width: 220px; font-size: 14px; color: #000; cursor: pointer; border: none; background: none; }
В файлу main.js найдите строку
$(this).find('select').css('width', select_width + 57 + 'px');и замените ее на
$(this).find('select').css('width', select_width + 57 + 28 + 'px');
#19
Отправлено 10 Октябрь 2016 - 13:07
ogonek7777 (08 Октябрь 2016 - 12:18) писал:
В файле main.css найдите блок
.select-box { width: auto !important; display: inline-block; overflow: hidden; vertical-align: middle; padding: 0; background: rgba(225,225,225,0) url(http://design.vip-ikona.ru/bg-dropdown-select.png?design=movement) no-repeat 100% 50%; border: 1px solid #ddd; }и замените его на
.select-box { width: auto !important; display: inline-block; overflow: hidden; vertical-align: middle; padding: 0; background: none; border: 1px solid #ddd }
#20
Отправлено 13 Октябрь 2016 - 14:06
Stasya (10 Октябрь 2016 - 13:07) писал:
.select-box { width: auto !important; display: inline-block; overflow: hidden; vertical-align: middle; padding: 0; background: rgba(225,225,225,0) url(http://design.vip-ikona.ru/bg-dropdown-select.png?design=movement) no-repeat 100% 50%; border: 1px solid #ddd; }и замените его на
.select-box { width: auto !important; display: inline-block; overflow: hidden; vertical-align: middle; padding: 0; background: none; border: 1px solid #ddd }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных