Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

1

Выпадающий Список Модификаций

Автор bronko, 29 июня 2015 18:25

Авторизуйтесь для ответа в теме

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

#1 bronko

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

Пользователи
115 сообщений

Отправлено 29 Июнь 2015 - 18:25

Добрый день.
1. Необходимо поменять местоположение выпадающего списка модификаций, как на картинке.

2. При увеличении размера шрифта в выпадающем списке, он обрезается, т.к. не помещается в окошко списка. Как увеличить еще и прямоугольное окно?

3. Где можно менять цвет, толщину шрифта, размер, цвет фона и прочие параметры самого окошка списка?

Наверх

#2 Cupuyc

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

Пользователи
747 сообщений

Отправлено 29 Июнь 2015 - 20:43

bronko (29 Июнь 2015 - 18:25) писал:

Добрый день.
1. Необходимо поменять местоположение выпадающего списка модификаций, как на картинке.

2. При увеличении размера шрифта в выпадающем списке, он обрезается, т.к. не помещается в окошко списка. Как увеличить еще и прямоугольное окно?

3. Где можно менять цвет, толщину шрифта, размер, цвет фона и прочие параметры самого окошка списка?

Здравствуйте, пожалуйста укажите ссылку на товар у которого присутствует данная модификация(Вы можете удалить из адреса название и домен магазина).

Наверх

#3 bronko

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

Пользователи
115 сообщений

Отправлено 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 bronko

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

Пользователи
115 сообщений

Отправлено 04 Июль 2015 - 00:21

Когда ждать ответа?

Наверх

#5 bronko

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

Пользователи
115 сообщений

Отправлено 07 Июль 2015 - 23:45

уже 9 дней прошло и нет ответа. :angry:

Вы можете хотя бы указать где править разметку?

Наверх

#6 Vaccina

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

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

Отправлено 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 Toko

Пользователь

Пользователи
30 сообщений

Отправлено 01 Сентябрь 2015 - 07:18

А как поменять цвет шрифта в списке модификаций и свойств товара, который выдается с изображением товара. Тема Plastic Сейчас все бледно-голубое (кто только придумал тако цвет)

Наверх

#8 Ирина345

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

Модераторы
5 709 сообщений

Отправлено 01 Сентябрь 2015 - 10:53

Toko (01 Сентябрь 2015 - 07:18) писал:

А как поменять цвет шрифта в списке модификаций и свойств товара, который выдается с изображением товара. Тема Plastic Сейчас все бледно-голубое (кто только придумал тако цвет)

Здравствуйте,
найдите в main.css

#content .boxmoney .main .block .mod .select select {
	color: #004b68;
	width: auto;
}

изменяете значение color: #004b68;

Наверх

#9 Toko

Пользователь

Пользователи
30 сообщений

Отправлено 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 Vaccina

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

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

Отправлено 02 Сентябрь 2015 - 03:26

В main.css найдите:

#content .boxmoney .main .block .mod .title {
	color: #2F7793;
}

в данном блоке измените значение стиля color

Наверх

#11 Toko

Пользователь

Пользователи
30 сообщений

Отправлено 02 Сентябрь 2015 - 09:13

Vaccina (02 Сентябрь 2015 - 03:26) писал:

В main.css найдите:

#content .boxmoney .main .block .mod .title {
color: #2F7793;
}

в данном блоке измените значение стиля color

Спасибо!

Наверх

#12 bronko

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

Пользователи
115 сообщений

Отправлено 27 Декабрь 2015 - 23:29

Vaccina (08 Июль 2015 - 01:49) писал:

далее в 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;
}

В этом же окне вы можете задавать стили не только для шрифта внутри окошка но и для стилизации самого выпадающего списка.

Спасибо, получилось.
А как покрасить фон выпадающего списка в определнный цвет? Чтобы он выделялся на странице

Наверх

#13 Юля123

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

Пользователи
2 567 сообщений

Отправлено 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) выглядит так:

Наверх

#14 ogonek7777

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

Пользователи
2 109 сообщений

ГородМосква

Отправлено 05 Октябрь 2016 - 17:22

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

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

Наверх

#15 Vaccina

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

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

Отправлено 06 Октябрь 2016 - 06:56

В style.css найдите:

.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 ogonek7777

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

Пользователи
2 109 сообщений

ГородМосква

Отправлено 07 Октябрь 2016 - 15:08

Vaccina (06 Октябрь 2016 - 06:56) писал:

В style.css найдите:

.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 Stasya

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

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

Отправлено 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 ogonek7777

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

Пользователи
2 109 сообщений

ГородМосква

Отправлено 08 Октябрь 2016 - 12:18

Stasya (07 Октябрь 2016 - 15:17) писал:

В файле 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');

спасибо, помогло, а ответ на второй вопрос можно?

Наверх

#19 Stasya

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

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

Отправлено 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 ogonek7777

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

Пользователи
2 109 сообщений

ГородМосква

Отправлено 13 Октябрь 2016 - 14:06

Stasya (10 Октябрь 2016 - 13:07) писал:

В файле 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
}

спасибо красота!