Автор Тема: Изменение внешнего вида блока выбора цвета?  (Прочитано 956 раз)

19 Июнь 2016, 13:32:45
  • Новичок
  • *
  • Сообщений: 3
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Уважаемые гуру prestashop. Подскажите, как изменить внешний вид блока выбора цвета в карточке товара. Вот желаемый результат: http://optovichek.wezom.ks.ua/ru/manikyur/19-lak-dlja-nogtey-karina-5ml.html?search_query=lak&results=75
Логин: 1
Пароль: 1
Необходимо сделать такой же блок со скроллингом на таком же шаблоне. Сайт примера мой, просто лежит на хостинге одной Вэб студии к которой я обращался для решения данного вопроса. Ребята немного наплужили и сломали сайт. Вот теперь боюсь обращаться в студию... Вообщем буду благодарен если объясните где и чего прописать.
Заданием было:
1. Увеличить размер изображений до 25х25
2. Под изображением, по центру, вывести название цвета.
3. Сделать окошко со скроллингом, размером 3х6 цветов.
Версия prestashop 1.6.1.5
Заранее спасибо!
19 Июнь 2016, 13:37:40
Ответ #1
  • Ветеран
  • *****
  • Сообщений: 105673
  • Репутация: +39553/-0
    • Просмотр профиля
    • Webstudio UwK
Внешний вид любого элемента меняется в файле стилей. Все файлы стилей находяться в папке /themes/название вашей темы/css/...
Для того чтобы точно увидеть название файла и его стили, используйте Firefox+Firebug.
Cоздание интернет сайтов Webstudio UwK
19 Июнь 2016, 16:29:43
Ответ #2
  • Новичок
  • *
  • Сообщений: 3
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
23 Июнь 2016, 11:20:35
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 86688
  • Репутация: +25428/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Файлы, которые нужно менять.
1. Шаблон - /themes/ваша тема/product.tpl
2. Стили - /themes/ваша тема/css/product.css

1. Изменение размеров миниатюр цвета
/themes/ваша тема/css/product.css
#attributes .attribute_list #color_to_pick_list li a.color_pick {height: 25px; width: 25px;...И из п2 height, width у тега img.

2. Под изображением вывести название цвета.
/themes/ваша тема/product.tpl
{if $img_color_exists}
<img src="{$img_col_dir}{$id_attribute|intval}.jpg" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="25" height="25" />
        {$colors.$id_attribute.name|escape:'html':'UTF-8'}

3.Добавить js библиотеку для скролинга. Изменить шаблон и стили (файлы выше).
23 Июнь 2016, 11:34:42
Ответ #4
  • Ветеран
  • *****
  • Сообщений: 3419
  • Репутация: +79/-6
  • Сообщество PrestaShop
    • Просмотр профиля
3.Добавить js библиотеку для скролинга. Изменить шаблон и стили (файлы выше).
Для скроллинга все уже есть в престе. Скопировать можно с картинок, которые крутяться под большой. Размеры только поменять и все.