Перейти к содержимому


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


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 19

#1 bronko

bronko

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

  • Пользователи
  • PipPipPip
  • 110 сообщений

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

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

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

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

#2 Cupuyc

Cupuyc

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

  • Модератоpы
  • 747 сообщений

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

Просмотр сообщенияbronko (29 Июнь 2015 - 18:25) писал:

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


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

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

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

#3 bronko

bronko

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

  • Пользователи
  • PipPipPip
  • 110 сообщений

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

bronko

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

  • Пользователи
  • PipPipPip
  • 110 сообщений

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

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

#5 bronko

bronko

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

  • Пользователи
  • PipPipPip
  • 110 сообщений

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

уже 9 дней прошло и нет ответа. :angry:
Вы можете хотя бы указать где править разметку?

#6 Vaccina

Vaccina

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

  • Модераторы
  • 23 665 сообщений

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

Toko

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

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

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

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

#8 Ирина345

Ирина345

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

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

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

Toko

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

  • Пользователи
  • PipPip
  • 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

Vaccina

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

  • Модераторы
  • 23 665 сообщений

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

В main.css найдите:
#content .boxmoney .main .block .mod .title {
	color: #2F7793;
}

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

#11 Toko

Toko

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

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

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

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

В main.css найдите:
#content .boxmoney .main .block .mod .title {
color: #2F7793;
}

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

#12 bronko

bronko

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

  • Пользователи
  • PipPipPip
  • 110 сообщений

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

Юля123

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

  • Модератоpы
  • 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)  выглядит так:
QIP Shot - Screen 084.png

#14 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

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

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

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

  • 2016-10-05_17-13-11.png


#15 Vaccina

Vaccina

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

  • Модераторы
  • 23 665 сообщений

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

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 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;}
спасибо, а как сделать чтоб стало еще длиннее, чтоб квадратик со стрелочкой влез, не перекрывая текст?
также вопрос как убрать одну из стрелочек (лучше тонкую) а то их две

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

  • 2016-10-07_14-54-12.png


#17 Stasya

Stasya

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

  • Модераторы
  • 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

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 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

Stasya

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

  • Модераторы
  • 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

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 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
}
спасибо красота!




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных