Перейти к содержанию
Imaks

[РЕШЕНО] Рамка вокруг товара

Рекомендуемые сообщения

народ как сделать рамку на странице категории товаров вот на этом сайте http://nova.azalia22.ru  как здесь http://barnaul.flowers-sib.ru/ , то есть чтобы при наведении мышки рамка появлялась 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

примерно так: 

поменять со строки 878 

на 

 

.box-product > div {
  width: 152px;
  display: inline-block;
  vertical-align: top;
  margin-left: 7px;
  margin-right: 7px;
  margin-bottom: 15px;
  padding: 10px;
  background: #fff; 
  text-align: center;
}

.box-product > div:hover {
background: #fff;
border: 1px solid #ddd;
box-shadow: 0px 0px 10px 0px #ddd ;
-webkit-border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px
-khtml-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
padding: 9px
}

дополнил padding: 9px ( чтоб при наведении товар не "прыгал" ))))) Изменено пользователем Pascha

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А ГДЕ ? В КАКОМ ФАЙЛЕ? 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

ВСТАВИЛ КОД , НО РАМКИ СТАЛИ ПОЯВЛЯТЬСЯ ТОЛЬКО В МОДУЛЕ РЕКАМЕНДУЕМ , НА ГЛАВНОЙ КОТОРЫЙ

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

опа!...по ходу нарвался на профессионала  :-D

\catalog\view\theme\mi-mi-store\stylesheet
 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

ВСТАВИЛ КОД , НО РАМКИ СТАЛИ ПОЯВЛЯТЬСЯ ТОЛЬКО В МОДУЛЕ РЕКАМЕНДУЕМ , НА ГЛАВНОЙ КОТОРЫЙ

там же 

строка 1320 

.product-grid > div:hover {
background: #fff;
border: 1px solid #ddd;
box-shadow: 0px 0px 10px 0px #ddd ;
-webkit-border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px
-khtml-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
padding: 10px
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

там же 

строка 1320 

.product-grid > div:hover {
background: #fff;
border: 1px solid #ddd;
box-shadow: 0px 0px 10px 0px #ddd ;
-webkit-border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px
-khtml-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
padding: 10px
}

 

ТУТ маленько не понял , что заменить этим кодом ) 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

заменить этот код

.product-grid > div:hover {
background: #fff;
}

который размещен с 1320 строки вашего файла стилей stylesheet.css

который можно найти по пути \catalog\view\theme\mi-mi-store\stylesheet

  :ugeek:

на этот: 
 

.product-grid > div:hover {
background: #fff;
border: 1px solid #ddd;
box-shadow: 0px 0px 10px 0px #ddd ;
-webkit-border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px
-khtml-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
padding: 10px
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

заменить этот код

.product-grid > div:hover {
background: #fff;
}

который размещен на 1320 строке вашего файла стилей  :ugeek:

на этот: 

 

.product-grid > div:hover {
background: #fff;
border: 1px solid #ddd;
box-shadow: 0px 0px 10px 0px #ddd ;
-webkit-border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px
-khtml-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
padding: 10px
}

нето там такого , буду искать

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

все нашел поставил , все ок , только бы её по толще и чтоб шевелилось как в рекамендуемых

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

нето там такого , буду искать

ога...видимо точно нет  :-D  а все данные, номера строк и адрес файла стилей я тока что придумал сам  :-D

интересен ответ на вопрос: Вы уже делаете Интернет магазина на Опенкарт на заказ за деньги?  :mrgreen:

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

он у меня на 1298 был

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

большое спасибо , все настроил , буду пока разбираться как рамку по толще сделать )

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

большое спасибо , все настроил , буду пока разбираться как рамку по толще сделать )

ни хрена ты не настроил))) рамку обрезает с левой стороны картинкой

вот так сделай: 

.box-product > div {
width: 180px; <-----Тут размер увеличил
display: inline-block;
vertical-align: top;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 15px;
padding: 10px;
background: #fff; 
text-align: center;
}


далее... о ширине рамки: 

 те цифры , что в скобках - находим в указанной строке стиля и меняем на свои

.box-product > div:hover {
background: #fff;
border: 3px solid #ddd; <--------Тут настраиваем ширину самой рамки (3px) 
box-shadow: 0px 0px 10px 0px #ddd ;<--------Тут настраиваем ширину тени  рамки (10px)
-webkit-border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px
-khtml-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
padding: 1px
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

да это я все понял) я на лакалке настраиваю просто , а на поддомене у меня , так чисто чтобы если что показать пример тут

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Как сделать рамку чтобы при наведении товар не "прыгал" если в категории включен вид Список?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Как сделать рамку чтобы при наведении товар не "прыгал" если в категории включен вид Список?

 

вставляешь все те же самые значения что  написал Pascha только под 

.product-grid > div {

 и 

.product-grid > div:hover {

 

 

и будет тебе счастье!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

чтоб товар не "прыгал"...все очень просто: 

выводим это padding*oм

высчитать очень просто: 

 

 для   .product-grid > div 

прописываем    padding: 3px

 

а так как при наведении к нашему диву добавляется еще  рамочка шириной например 1px

то будет естественно ее учесть( 3-1=2)

 

 и  для .product-grid > div:hover 

прописываем    padding: 2px

все))) ничего прыгать у вас не будет)))

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

по теме  рамки. Есть модуль, в нём предусмотрен ввод CSS стилей. Хочу сделать этот модуль в рамке, прописываю там в поле для css  {background: #FFFffF;
border: 1px solid #f15a23;} и ничего. В файле стилей шаблона нужно создавать отдельный стиль для этого модуля, или как? Нужно чтобы только он был в рамке. Подскажите пожалуйста

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

1.переименовать или обернуть в новый див (так как стандартно во многих модулях <div class="box">... и далее все как по шаблону)
2. диву прописать стиль где предусмотреть вывод рамки

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо. Обернул всё дивом, самое простое. Как сам не допёр не пойму. Пытался наверное разобраться зачем в модуле есть поле для ввода css на этом и зациклился=))))

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

ребята, а как сделать рамку в карточке товара в описании?, сверху вкладки есть и подчеркнуто, а описание как бы отдельно болтается, не по красоте :(

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.