Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

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

Link to post
Share on other sites

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

поменять со строки 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 ( чтоб при наведении товар не "прыгал" ))))) Edited by Pascha
Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

Link to post
Share on other sites

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

там же 

строка 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
}
Link to post
Share on other sites

 

там же 

строка 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
}

 

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

Link to post
Share on other sites

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

.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
}
Link to post
Share on other sites

 

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

.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
}

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

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

.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
}
Link to post
Share on other sites

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

Link to post
Share on other sites

  • 2 weeks later...

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

Link to post
Share on other sites

  • 2 weeks later...

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

 

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

.product-grid > div {

 и 

.product-grid > div:hover {

 

 

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

Link to post
Share on other sites

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

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

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

 

 для   .product-grid > div 

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

 

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

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

 

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

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

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

Link to post
Share on other sites

  • 1 year later...

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

  • 2 years later...

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.