logo

Дополнительные типы блоков (EBT) — новый опыт конструктора страниц❗

Дополнительные типы блоков (EBT) — стилизованные, настраиваемые типы блоков: слайдшоу, вкладки, карточки, аккордеоны и многие другие. Встроенные настройки для фона, DOM Box, плагины Javascript.

Демо EBT модули Скачать EBT модули

❗Дополнительные типы параграфов (EPT) — новый опыт работы с параграфами

Дополнительные типы параграфов (EPT) — набор модулей, основанный на аналогичных параграфах.

Демо EPT модули Скачать EPT модули

Scroll

выбор цвета в линию (commerce fancy attributes)

22/02/2025, by Гость (не проверено)

Добрый день! Помогите пожалуйста. 

Проблема заключается в том, что у меня не получается расположить выбор цвета товара commerce fancy attributes  в линию, сечас это выглядит вот так - http://floomby.ru/s1/yYjG82 . Мои попытки прописать css безуспешны... Очень надеюсь, что вы поможете, подскажите, что мне нужно прописать в page.css.

 

Вот код:

  <label for="edit-attributes-field-colors">Выберите цвет: </label>

 <div id="edit-attributes-field-colors" class="form-radios"><div class="form-item form-type-radio form-item-attributes-field-colors">

 <input type="radio" id="edit-attributes-field-colors-34" name="attributes[field_colors]" value="34" checked="checked" class="form-radio" />  <label class="option" for="edit-attributes-field-colors-34">Белый </label>

 

<div class="description"><div class="description-selected"><div class="field field-name-field-hexadecimal field-type-text field-label-hidden"><div class="field-items"><div class="field-item even"><div title="Белый" style="background-color: #ffffff;" class="commerce-fancy-attributes-color"></div></div></div></div></div></div>

</div>

<div class="form-item form-type-radio form-item-attributes-field-colors">

 <input type="radio" id="edit-attributes-field-colors-35" name="attributes[field_colors]" value="35" class="form-radio" />  <label class="option" for="edit-attributes-field-colors-35">Черный </label>

 

<div class="description"><div class="field field-name-field-hexadecimal field-type-text field-label-hidden"><div class="field-items"><div class="field-item even"><div title="Черный" style="background-color: #000000;" class="commerce-fancy-attributes-color"></div></div></div></div></div>

</div>

<div class="form-item form-type-radio form-item-attributes-field-colors">

 <input type="radio" id="edit-attributes-field-colors-36" name="attributes[field_colors]" value="36" class="form-radio" />  <label class="option" for="edit-attributes-field-colors-36">Бежевый </label>

 

<div class="description"><div class="field field-name-field-hexadecimal field-type-text field-label-hidden"><div class="field-items"><div class="field-item even"><div title="Бежевый" style="background-color: #FF9966;" class="commerce-fancy-attributes-color"></div></div></div></div></div>

</div>

</div>

</div>


Пропишите display: inline-block !important; для .description.


Спасибо большое за обратную связь!

прописал в page.css:

.description {

display: inline-block  !important; 

}

в линию они не выстроились, только расстояние между ними изменилось...

что делать?


Я имею ввиду, что мне надо горизантально в линию...


В коммерц кикстарт сделано так:

коммерц кикстарт


спасибо за подсказки! все получилось

.form-radios{
width: 100px;
height: 20px;
}
.description .even {
display: inline-block  !important;
float: left;
margin-left: 3px;
margin-right: 3px;
}