Рамка товара

[Boulevard]

  В 10.04.2017 at 20:48, jaffagold сказал:

так большие стали же?

но не прямоугольные

Expand  

Это я такие залил, если бы они были прямоугольные вверху были бы большие пробелы белые, а если бы сделал меньше 600px по бокам, сверху и снизу опять таки были пробелы белые.

[jaffagold]

я не понял. картинки залиты квадратные?

[Boulevard]

  В 10.04.2017 at 20:52, jaffagold сказал:

я не понял. картинки залиты квадратные?

Expand  

Да

[jaffagold]

так неинтересно. прямоугольную залейте картинку и сразу станет ясно- сработало или нет.

НО я вижу, что сработало

[Boulevard]

  В 10.04.2017 at 20:54, jaffagold сказал:

так неинтересно. прямоугольную залейте картинку и сразу станет ясно- сработало или нет.

НО я вижу, что сработало

Expand  

Залил

[jaffagold]

кеш картинок чистили?

[Boulevard]

  В 10.04.2017 at 20:54, jaffagold сказал:

так неинтересно. прямоугольную залейте картинку и сразу станет ясно- сработало или нет.

НО я вижу, что сработало

Expand  

Если решить проблемы с рамкой, она итак без пробелов будет нормально смотреться, не подскажите какой тег изменяет css подсветки картинки, я хочу голубой сменить на оранжевый и заодно изменить подсветку где выбирать количество товара когда на него жмёшь, оно загорается.

  В 10.04.2017 at 20:58, jaffagold сказал:

кеш картинок чистили?

Expand  

Да

[jaffagold]

Рамка вокруг лавной картинки

Указываю ее текущие стили.

  Показать содержимое

a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover {

border-color: #337ab7;

}

Цвет рамки  меняете на #EA5E06;

  Показать содержимое

a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover {

border-color:  #EA5E06 !important;

}

 

Форма

  Показать содержимое

.form-control:focus {

border-color: #66afe9;

меняем

  Показать содержимое

.form-control:focus {

border-color:   #EA5E06 !important;

 

Пользуйтесь Инспектором кода в браузере.

F12 или правый клик- Просмотреть код.

[Boulevard]

  В 10.04.2017 at 21:04, jaffagold сказал:

Рамка вокруг лавной картинки

Указываю ее текущие стили.

  Показать содержимое

a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover {

border-color: #337ab7;

}

Цвет рамки  меняете на #EA5E06;

  Показать содержимое

a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover {

border-color:  #EA5E06 !important;

}

 

Expand  

Спасибо!

[jaffagold]

Жарковатая гамма получается, не находите?

[Boulevard]

  В 10.04.2017 at 21:04, jaffagold сказал:

  В 10.04.2017 at 21:09, jaffagold сказал:

Жарковатая гамма получается, не находите?

Expand  

 

Expand  

Да, мне все равно, как говорят, так и делаю

 

  В 10.04.2017 at 21:07, Boulevard сказал:

Спасибо!

Expand  

Не могу найти это же в css?

[jaffagold]

\catalog\view\theme\default\stylesheet\stylesheet.css

Пишите в самый конец

 

[Boulevard]

  В 10.04.2017 at 21:17, jaffagold сказал:

\catalog\view\theme\default\stylesheet\stylesheet.css

Пишите в самый конец

 

Expand  

Угу. Исправил, а подстветка в кол-ве товара?

[jaffagold]

Возле кнопки купить?

 Выше написано

Форма

 

[BuslikDrev]

Вот мой вариант без рамки, в product.tpl

  Показать содержимое

Найти:
<li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>

Заменить на:
<li><a style="position:relative;float:left;left:20px;bottom:20px;padding-right:500px;max-width:800px;max-height:800px" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img class="thumbnail" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>

На первое время нагуляетесь с этими настройками, потом сделаете так:

Найти:
<li><a style="position:relative;float:left;left:20px;bottom:20px;padding-right:500px;max-width:800px;max-height:800px" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img class="thumbnail" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>

Заменить на:
<li><a class="myclass" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img class="thumbnail" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>

Открыть stylesheet.css

Найти:
.thumbnails .image-additional {
	float: left;
	margin-left: 20px;
}

Ниже вставить:
.thumbnails .myclass {
  position:relative;
  float:left;
  left:20px;
  bottom:20px;
  padding-right:500px;
  max-width:800px;
  max-height:800px;
}

Вот сайт вам в помощь: http://htmlbook.ru/css/padding

 

Такие настройки при разрешение изображении в Админ панели 300х300

Результат:

  Показать содержимое

 

[Boulevard]

  В 10.04.2017 at 21:24, BuslikDrev сказал:

Вот мой вариант без рамки, в product.tpl

  Показать содержимое

Найти:
<li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>

Заменить на:
<li><a style="position:relative;float:left;left:20px;bottom:20px;padding-right:500px;max-width:800px;max-height:800px" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img class="thumbnail" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>

На первое время нагуляетесь с этими настройками, потом сделаете так:

Найти:
<li><a style="position:relative;float:left;left:20px;bottom:20px;padding-right:500px;max-width:800px;max-height:800px" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img class="thumbnail" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>

Заменить на:
<li><a class="myclass" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img class="thumbnail" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>

Открыть stylesheet.css

Найти:
.thumbnails .image-additional {
	float: left;
	margin-left: 20px;
}

Ниже вставить:
.thumbnails .myclass {
  position:relative;
  float:left;
  left:20px;
  bottom:20px;
  padding-right:500px;
  max-width:800px;
  max-height:800px;
}

 

 

Такие настройки при разрешение изображении в Админ панели 300х300

Результат:

  Показать содержимое

 

Expand  

О, спасибо! Завтра ознакомлюсь.

 

  В 10.04.2017 at 21:24, jaffagold сказал:

Возле кнопки купить?

 Выше написано

Форма

 

Expand  

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

[jaffagold]

padding-right:500px

как себя поведет на мобильных экранах?

просмотрите начало беседы. Я вас писал, как поправить Product.tpl ( col-sm-6 в двух местах)

 

И у вас великоват размер главной миниатюры товара ( 800 на 800)

Накидаете картинок на сайт, поймете.

[BuslikDrev]

  В 10.04.2017 at 21:30, jaffagold сказал:

padding-right:500px

как себя поведет на мобильных экранах?

Expand  

пока полоса прокрутки появится, это временно, так как автор не определился с точным разрешением. Паддинг применил для того, чтобы нижнее изображение на вверх не лезло. 

 

  В 10.04.2017 at 21:30, Boulevard сказал:

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

Expand  

Также для мобильных устройств стиль задайте свой
Например ниже предыдущего вставить:
 

  Показать содержимое

@media (max-width: 767px) {
.thumbnails .myclass {
  position:relative;
  text-align: center;
  bottom:20px;
  max-width:600px;
  max-height:;
}

}

 

[jaffagold]

  Цитата

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

Expand  

 Не нормально.

Уменьшите ширину экрана. Появилось пустое место.

Снова стили писать;: медиазапрос, убирать паддинг. А ради чего было?

Уменьшить ширину картинки

Это делается в разметке с помощью классов Бутстрап.

[Boulevard]

  В 10.04.2017 at 21:38, BuslikDrev сказал:

Также для мобильных устройств стиль задайте свой
Например ниже предыдущего вставить:
 

  Показать содержимое

@media (max-width: 767px) {
.thumbnails .myclass {
  position:relative;
  text-align: center;
  bottom:20px;
  max-width:600px;
  max-height:;
}

}

 

Expand  

Понял спасибо

 

  В 10.04.2017 at 21:09, jaffagold сказал:

Жарковатая гамма получается, не находите?

Expand  

 

  В 10.04.2017 at 21:04, jaffagold сказал:

.form-control:focus {

border-color:   #EA5E06 !important;

Expand  

там кроме оранжевого ещё цвет есть, отдает кислотным прям.

[BuslikDrev]

В общем смотрите на другие стили и также поглядывайте на этот сайт: тыц

[jaffagold]

Там тень еще была

Надо добавить

  Показать содержимое

.form-control:focus {

-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 rgba(255, 152, 0, 0.46) !important;

box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 152, 0, 0.46) !important;

}

 

[Boulevard]

  В 10.04.2017 at 21:24, BuslikDrev сказал:

Вот мой вариант без рамки, в product.tpl

  Показать содержимое

Найти:
<li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>

Заменить на:
<li><a style="position:relative;float:left;left:20px;bottom:20px;padding-right:500px;max-width:800px;max-height:800px" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img class="thumbnail" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>

На первое время нагуляетесь с этими настройками, потом сделаете так:

Найти:
<li><a style="position:relative;float:left;left:20px;bottom:20px;padding-right:500px;max-width:800px;max-height:800px" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img class="thumbnail" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>

Заменить на:
<li><a class="myclass" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img class="thumbnail" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>

Открыть stylesheet.css

Найти:
.thumbnails .image-additional {
	float: left;
	margin-left: 20px;
}

Ниже вставить:
.thumbnails .myclass {
  position:relative;
  float:left;
  left:20px;
  bottom:20px;
  padding-right:500px;
  max-width:800px;
  max-height:800px;
}

Вот сайт вам в помощь: http://htmlbook.ru/css/padding

 

Такие настройки при разрешение изображении в Админ панели 300х300

Результат:

  Показать содержимое

 

Expand  

Сейчас начал тестировать, в product.tpl заменил код, и в css ниже вставил класс, сохранил, обновил кэш. Ничего. Рамка как была так и осталась попробывал изменить размеры, все осталось также.

[BuslikDrev]

  В 11.04.2017 at 07:49, Boulevard сказал:

Сейчас начал тестировать, в product.tpl заменил код, и в css ниже вставил класс, сохранил, обновил кэш. Ничего. Рамка как была так и осталась попробывал изменить размеры, все осталось также.

Expand  

кэш браузера и сайта обновляли?

[Boulevard]

  В 11.04.2017 at 10:01, BuslikDrev сказал:

кэш браузера и сайта обновляли?

Expand  

Да, у меня вопрос можно как-то сделать справа контент купить кол-во товаров название описание, на середину, как раз может и картинка сузиться и не будет пробелов.