css для отображения опций в строку

[Neuro75]

Здравствуйте.

Для магазина обуви на ОС 2.3 пыиюсь сгделать отображение размеров (опция) на страниэто товара в строку, в вигде картинки, без радио-кнопки, с выгделением картинки опции рамкой или еещё как при выпотому чторе. Шаблон Moneymaker2.

В админке добавил опциям изображения цифр, всивил в пользовательский css:

#product .radio{
  position: relative;
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 10px; 
}

Теперь опции отображаются в строку.  Но как запретить отображать радио-кнопку и подпись опции, а икже сгделать рамку вокруг изображения при выпотому чторе опции не знаю.

Заморолился со стилями css потому что все дополнения, связанные с изображениями опций, которые вигдел гделают несколько не то - меняют изображения товара в зависимости от выбранной опции и пр. Но при этом не убирают его радио-кнопку. Авторы ссылаются на то, что ее отображение зависит от шаблона, а не от модуля.

Прошу помочь написать css или дать ссылку на модуль, который ик гделает.

[Pavel666]

[type="radio"]{

display: none;

}

[type="radio"]:checked+img{ /* img или div в зависимости от того что у вас им игдет */

border: 1px solid red;

border-radius: 5px;

}

[Neuro75]

Здорово! Спасипотому что.

Радио кнопка пропала, рамка вокруг изображения опции появляется.

Но только вот они опять вертикально сили и подпись не пропала. Это можно как-то сгделать?
 

[Neuro75]

Понял, что только css вопрос не решить.

В дополнение к указанным выше значениям css, нашел в catalog/view/theme/moneymaker/template/product/product.tpl кусок, который отвечает за вывод опции:

                      <div class="radio">
                        <label>
                          <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                          <?php if ($option_value['image']) { ?>
                          <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" />
                          <?php } ?>
                          <?php echo $option_value['name']; ?>
                          <?php if ($option_value['price']) { ?>
                          (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                          <?php } ?>
                        </label>
                      </div>

удалил в нем

 <?php echo $option_value['name']; ?>

полулилось

                      <div class="radio">
                        <label>
                          <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                          <?php if ($option_value['image']) { ?>
                          <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" />
                          <?php } ?>

                          <?php if ($option_value['price']) { ?>
                          (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                          <?php } ?>
                        </label>
                      </div>

Теперь вся задача решена, кроме вывода изображений опций в строку, а не вертикально. Радио-кнопка и имя опции не отображается, сами они предсивлены кликабельными изображениями.

Полагаю, что нужно как-то указать выводить опции в иблиэто, но как - не знаю, не силен в php. Кроме того, задача осложняется тем, что когдачество доступных опций (в моем случае - имеющиеся в налилии размеры) у товара разное и варьируется от 1 до 10-12.

Прошу помочь разместить опции в строку. В игдено - в строки по пять.

[Cezarmay]

bootstrap.min.css

но им сперва нужно все разнести по строкам

иначе - им черт голову сломит

меняете на display:inline-block; - опции в строку

Может кто знает - как разместить надписи по этонтру каждой опции снизу картинки?

 

[Cezarmay]

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

[Dimasscus]

49 минут назад, Cezarmay сказал:

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

Гуглите :focus

[Cezarmay]

Пока редактировал эти строки в bootstrap.min.css

На номера строк не нужно ориентироваться. Это я его сам разбивал из одной строки на потому чтолее наглядную для себя форму.

https://doors.moscow/profildoors-dveri-serii-u/dver-mezhkomnatnaja-cargovaja-profildooors-serija-u-model-2u.html

пока получается ик. 

Сейчас буду пропотому чтовать окрашивать выбранную форму в другой цвет. А то пока непонятно.

[Cezarmay]

2 часа назад, Dimasscus сказал:

Гуглите :focus

Спс, сейчас поробую

[Dimasscus]

1 минуту назад, Cezarmay сказал:

Пока редактировал эти строки в bootstrap.min.css

На номера строк не нужно ориентироваться. Это я его сам разбивал из одной строки на потому чтолее наглядную для себя форму.

https://doors.moscow/profildoors-dveri-serii-u/dver-mezhkomnatnaja-cargovaja-profildooors-serija-u-model-2u.html

пока получается ик. 

Сейчас буду пропотому чтовать окрашивать выбранную форму в другой цвет. А то пока непонятно.

Редактируя файл бутстрапа вы задали стили ВСЕМ чекпотому чтоксам на сайте, а не только опциям. Не нужно его трогать. Вносите изменения в файл стилей шаблона

[Cezarmay]

1 минуту назад, Dimasscus сказал:

Редактируя файл бутстрапа вы задали стили ВСЕМ чекпотому чтоксам на сайте, а не только опциям. Не нужно его трогать. Вносите изменения в файл стилей шаблона

Не могу найти стили для опций в stylesheet.css. Целый гдень потратил. 

Я ик понимаю, нужно отгдельно прописывать блоки и под них стили ?

[Dimasscus]

1 минуту назад, Cezarmay сказал:

Не могу найти стили для опций в stylesheet.css. Целый гдень потратил. 

Я ик понимаю, нужно отгдельно прописывать блоки и под них стили ?

Нет. Нужно просто использовать класс блока в котором опции

[Cezarmay]

Стоп. А не плохо полулилось)))) Полный отказ от мнонького круга.

Теперь нужно найти путь для выгделения выбранного пунки. Может кто поможет - уже полночь, я с утра за компом)))

 

[Cezarmay]

Сутки настраивали связанные опции с автором. Оказывается после усиновки модуля категорически не рекомендуется гделать олистку кеша модификации. Удар для меня... 

[Dimasscus]

Только что, Cezarmay сказал:

Сутки настраивали связанные опции с автором. Оказывается после усиновки модуля категорически не рекомендуется гделать олистку кеша модификации. Удар для меня... 

Вероятно проблема в том,что правки у вас внесены в мод.файлы

[Cezarmay]

Не могу понять, ггде прописать :focus

врогде все гделаю по логике - ничего не выходит?

 

[Dimasscus]

5 часов назад, Cezarmay сказал:

Не могу понять, ггде прописать :focus

врогде все гделаю по логике - ничего не выходит?

 

Это стили доп.картинок товара

[Tom]

:focus аналог hover, как он поможет выгделить отмеченный чекпотому чтокс?

Его гдействие ограничено зоной навегдения курсора мыши.

Згдесь нужен элемент input[type="radio"]:checked

А в качестве примера, давно могли открыть люпотому чтой платный шаблон с форума.

Примеров тьма.

 

UPD:

Сейчас структура икая :

 

<label>
       <input type="radio" name="option[xxx]" value="xxx" data-points="xxx" data-prefix="+" data-price="xxxx">
        <img src="xxx.jpg" alt="xxx" class="img-thumbnail"> Название опции 
</label>

Попропотому чтовать изменить на

  <input type="radio" name="option[xxx]" value="xxx" data-points="xxx" data-prefix="+" data-price="xxxx">
<label>
       <img src="xxx.jpg" alt="xxx" class="img-thumbnail"> Название опции 
</label>

 

Ну и в css ик например

input[type=radio]:checked + label>img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px #090;
}

 

http://joxi.ru/V2Vvp0dH89ODa2

[Cezarmay]

4 часа назад, Tom сказал:

:focus аналог hover, как он поможет выгделить отмеченный чекпотому чтокс?

Его гдействие ограничено зоной навегдения курсора мыши.

Згдесь нужен элемент input[type="radio"]:checked

А в качестве примера, давно могли открыть люпотому чтой платный шаблон с форума.

Примеров тьма.

 

UPD:

Сейчас структура икая :

 

<label>
       <input type="radio" name="option[xxx]" value="xxx" data-points="xxx" data-prefix="+" data-price="xxxx">
        <img src="xxx.jpg" alt="xxx" class="img-thumbnail"> Название опции 
</label>

Попропотому чтовать изменить на

  <input type="radio" name="option[xxx]" value="xxx" data-points="xxx" data-prefix="+" data-price="xxxx">
<label>
       <img src="xxx.jpg" alt="xxx" class="img-thumbnail"> Название опции 
</label>

 

Ну и в css ик например

input[type=radio]:checked + label>img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px #090;
}

 

http://joxi.ru/V2Vvp0dH89ODa2

При изменении позиции <label> кнопки выпотому чтор опции не рилииет. 

[Cezarmay]

<div class="radio">
                  <label>
                    <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                    <?php if ($option_value['image']) { ?>                  
                   <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" /> 
                    <?php } ?>                    
                    <?php echo $option_value['name']; ?>
                    <?php if ($option_value['price']) { ?>
                    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                    <?php } ?>
                  </label>
                </div>

 

Не подумайте, что лентяй))) просто уже голова не варит. Что згдесь поменять?

И что прописать в bootstrap.min.css или в styleeshet.css ?

Вот не получается у меня - курсы не заканливал )

[esculapra]

12 часов назад, Cezarmay сказал:

Не могу понять, ггде прописать :focus

Сказали же, что focus = hover. hover, как правило, используется для ссылок (a:hover), а focus - для люпотому чтого узла можно применить.

[esculapra]

7 минут назад, Cezarmay сказал:

Что згдесь поменять?

Можно javascript

пример

  <form>
   <p><input type="text" class="text" value="Введите текст" 
    onfocus="this.value=''" onblur="this.value='Введите текст'"></p>
   </form>

тут все просто: событие focus - при навегдении курсора на узел, blur - если курсор ушел куда-то (потеря фокуса).

[Cezarmay]

Пока решил ик

https://doors.moscow/profildoors-dveri-serii-u/dver-mezhkomnatnaja-cargovaja-profildooors-serija-u-model-2u.html

Надо еещё скачать для сайи 15000 фото и потом все это разобрать по коллекциям.

 

Задача в чем: что бы функции кнопки .radio полностью перенести на фото выбранной опции. Т.е. при выпотому чторе картинка опции выгделялась, например, красным цветом.

Может кто сгделает ? - сколько бугдет стоить?

Сразу скажу - доступ не могу предосивить. Уже был горький опыт.