[Помогите] Как сделать boxed и эффект при наведении на товар?

Тема в разделе "OpenCart", создана пользователем winner7, 16 май 2013.

  1. winner7

    winner7

    Регистрация:
    6 мар 2013
    Сообщения:
    322
    Симпатии:
    55
    Всем привет! В общем, такой вопрос: ставлю различные шаблоны а потом модули, и то один не работает из-за шаблона, то другой, в общем трата времени и нервов. В общем думаю подправить стандартный шаблон, но не знаю как сделать 2 вещи:
    1. Чтобы вид был boxed.
    2. Чтобы при наведении мышки на товар (на главной или в списке товаров) появлялся эффект - рамка с тенью вокруг товара (например http://themeforest.net/item/multish...opencart-template/full_screen_preview/4525734 но тут без тени).
    Если есть время и желание - помогите, пожалуйста.
     
  2. Serkist

    Serkist

    Регистрация:
    8 фев 2013
    Сообщения:
    350
    Симпатии:
    72
    имеется ввиду, как у меня на сайте - http://verose.ru/ ?

    По поводу вида boxed не совсем понял о чем речь, можно подробнее?
     
    winner7 нравится это.
  3. winner7

    winner7

    Регистрация:
    6 мар 2013
    Сообщения:
    322
    Симпатии:
    55
    да, как на этом сайте рамка у товара, только чтоб тень у рамки еще была.
    boxed это, наверно, не совсем правильно, имеется в виду, чтобы вся страница была в рамке, а за рамкой фон с тенью (тоже как на этом сайте) или например на шоппике
    [​IMG]
     
  4. Serkist

    Serkist

    Регистрация:
    8 фев 2013
    Сообщения:
    350
    Симпатии:
    72
    для рамки вокруг товара нужно след код

    border: 2px solid #ffadb9;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);

    вписать в stylesheet.css в след классы (создать при отсутствии):
    .box-product > div:hover
    .product-grid > div :hover
    .product-list > div :hover

    Если где-то забыл, то по аналогии

    Для рамки вокруг страницы в идентификатор #container в stylesheet.css добавить:
    border: 2px solid #ffadb9;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
     
    winner7 нравится это.
  5. winner7

    winner7

    Регистрация:
    6 мар 2013
    Сообщения:
    322
    Симпатии:
    55
    А как еще фон сделать из паттерна?
     
  6. razumovsu

    razumovsu

    Регистрация:
    16 фев 2013
    Сообщения:
    33
    Симпатии:
    4
    Нужно учитывать кроссбраузерность. Старые версии браузеров не увидят эту рамку.
    Для каждого box-shadow нужно дописать:
    -webkit-box-shadow: параметры - для сафари, хром
    -moz-box-shadow: параметры - для мозиллы.
     
    winner7 нравится это.
  7. winner7

    winner7

    Регистрация:
    6 мар 2013
    Сообщения:
    322
    Симпатии:
    55
    Отлично, а какие параметры то?
     
  8. razumovsu

    razumovsu

    Регистрация:
    16 фев 2013
    Сообщения:
    33
    Симпатии:
    4
    те же.
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    Подробнее можете почитать на htmlbook.ru
     
  9. winner7

    winner7

    Регистрация:
    6 мар 2013
    Сообщения:
    322
    Симпатии:
    55
    Большое преимущество этого форума в том, что обычно те, кому есть что сказать и желание помочь пишут здесь решение, или какую-то конкретику, а не общие фразы, или не пишут вообще...
     
    razumovsu нравится это.
  10. Serkist

    Serkist

    Регистрация:
    8 фев 2013
    Сообщения:
    350
    Симпатии:
    72
    в тот же файл стилей в body
    прописать:
    background-image: url(../image/background.jpg);
    background-repeat:repeat;

    файл background.jpg закинуть в папку image (catalog/view/theme/default/image/ )
    если тема не дефолтная, то вместо default вписать имя своей темы.
     
    winner7 нравится это.
  11. winner7

    winner7

    Регистрация:
    6 мар 2013
    Сообщения:
    322
    Симпатии:
    55
    Добавляю это:
    Код:
    .box-product > div:hover
    border: 2px solid #ffadb9;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }
    
    Рамка не появляется. Что делаю не так?
    (проверка в мозилле и яндекс браузере)
     
  12. Serkist

    Serkist

    Регистрация:
    8 фев 2013
    Сообщения:
    350
    Симпатии:
    72
    сайт покажите
     
    winner7 нравится это.
  13. beak

    beak

    Регистрация:
    22 янв 2013
    Сообщения:
    161
    Симпатии:
    43
    Тогда возьми сеть, а не рыбу :Smile: В FireFox'е, если не стоит еще, поставь FireBug. Дальше заходишь на любой сайт, что тебе нравится, на элементе который тебя интересует правый клик->Инспектировать с помощью FireBug. И все решение как на ладони.
     
  14. winner7

    winner7

    Регистрация:
    6 мар 2013
    Сообщения:
    322
    Симпатии:
    55
    Сайт сейчас показать, перенесен на денвер, в нем быстрее работать, чем по фтп. Да и показывать то нечего, дефолтный шаблон 1531 ocstore, изменение по шаблону какое было сделано - это то, что описано в топике
     
  15. Serkist

    Serkist

    Регистрация:
    8 фев 2013
    Сообщения:
    350
    Симпатии:
    72
    для того, чтобы подсказать решение, нужно самому увидеть и понять, почему у Вас что-то не работает.

    по коду
    .box-product > div:hover
    border: 2px solid #ffadb9;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }

    вроде все корректно, единственное, что если только здесь внесли правки, то рамка будет отображаться в модулях хиты продаж, рекомендуемые и т.п., а чтобы в каталоге рамка была, нужно вносить описанные правки в классы product-grid и product-list
     
    winner7 нравится это.
  16. winner7

    winner7

    Регистрация:
    6 мар 2013
    Сообщения:
    322
    Симпатии:
    55
    ладно, с этим потом разберемся, вот еще вопрос, не могу понять, как на главной (в рекомендуемых, новинках и т.п.) товары выравнивать равномерно по ширине блока?
    добавляю align: center, но не дает эффект. Они выравниваются по левому краю и справа получается большой отступ
    [​IMG]
     
  17. nix

    nix php, MySQL, UNIX, MikroTik ROSAPI

    Регистрация:
    16 янв 2013
    Сообщения:
    1.000
    Симпатии:
    889
    text-align: center;
     
    winner7 нравится это.
  18. Serkist

    Serkist

    Регистрация:
    8 фев 2013
    Сообщения:
    350
    Симпатии:
    72
    .box-product > div {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    }
     
    winner7 нравится это.
  19. bosten

    bosten

    Регистрация:
    2 май 2013
    Сообщения:
    153
    Симпатии:
    33
    Подскажите меня тоже этот вопрос не покидает что бы сделать рамку вокруг товара как на этом сайте http://verose.ru/ ?
    Пытался тоже вставлять в дефолтный шаблон вот этот код
    .box-product > div:hover
    border: 2px solid #ffadb9;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }

    Как пишут выше что мол будет работать в модулях хиты продаж, рекомендуемые и т.п., Не где так и она не появилась эта просто для меня волшебная рамка.
    А самое не понятно для меня вот ответ ( нужно вносить описанные правки в классы product-grid и product-list ) ?

    Помогите пожалуйста разобраться с этим вопросом. Хотелось бы увидеть весь код в одной собранной куче. Что бы его понять и и изучить.
     
  20. Vintage

    Vintage

    Регистрация:
    31 мар 2013
    Сообщения:
    237
    Симпатии:
    39
    Вот пример (на стандартном шаблоне проверено)

    [​IMG]

    http://moushe.ru/ сам ресурс
     
    bosten нравится это.