Если данный туториал не то, что Вы искали, у Вас все еще остались вопросы или предложения - дайте нам знать. Пожалуйста, помогите нам обслуживать Вас лучше!

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

Новые шаблоны

PrestaShop 1.5.x. Как изменить число колонок под-категорий

Этот тюториал покажет Вам, как изменить количество под-категорий в каждом ряду в Вашем PrestaShop шаблоне.

PrestaShop 1.5.x. Как изменить число колонок под-категорий

  1. На Вашем FTP, или используя инструмент File Manager в панели управления хостинга, перейдите к themes\theme_###\ (где theme### — название Вашей темы).

  2. Откройте category.tpl для редактирования.

  3. Найдите строку 73 (номер строки зависит от шаблона) с таким кодом:

  4. categories_box col-xs-4 col-sm-3 col-md-3 col-lg-2 
    
  5. Согласно грид системе Bootstrap, есть 4 основных класса колонок, которые позволяют легко создавать сложные разверстки в виде сетки (grid layouts) для нескольких классов устройств: для телефонов, планшетов, десктопов (компьютеров) и больших десктопов:

  • col-xs-* — телефоны, до 480px

  • col-sm-* — планшеты, 768px и выше

  • col-md-* — компьютерные экраны, 992px и выше

  • col-lg-* — большие мониторы, 1200px и выше

  • Если Вы посмотрите на CSS, используемый в разных grid классах (классах сетки) в bootstrap.min.css в папке \themes\theme###\css\, Вы увидите, что колонки сетки просто выравниваются по левому краю, а их ширина выражена в процентах и получена путем разделения размера на количество колонок. Таким образом, колонка с классом .col-lg-6 — это просто 6/12 = 50% ширины контейнера. Другими словами, чтобы поменять количество под-категорий в ряду, Вам нужно сохранить колонки сетки: просто поменяйте * в классах колонок.

    Пожалуйста, никогда и ни при каких обстоятельствах не редактируйте файлы bootstrap.min.css/bootstrap.css.

  • Например, после изменения col-lg-2 на col-lg-3 мы получаем сетку, которая отображается в 4 колонки на больших мониторах.

    prestashop_number_of_subcategories_per_row_changing_1

    Изменив col-md-3  на col-md-4, мы получаем сетку, отображающуюся тремя колонками на стандартных экранах.

    prestashop_number_of_subcategories_per_row_changing_2

    После изменения col-sm-3  на col-sm-4 сетка показывается тремя колонками на планшетах.

    prestashop_number_of_subcategories_per_row_changing_3

    После изменения col-xs-4  на col-xs-5 получаем сетку с двумя колонками на телефонах. 

    prestashop_number_of_subcategories_per_row_changing_4

  • Пожалуйста, ознакомьтесь с детальным видео туториалом ниже:

    PrestaShop 1.5.x. Как изменить число колонок под-категорий

     
    Чат
    We help you to choose the right product.
    Начать чат