Настройте свой дизайн с помощью CSS¶

Что можно изменить с помощью пользовательского CSS?¶

Пользовательский CSS позволяет владельцам магазинов изменять внешний вид различных элементов на витрине своего сайта.

Вот несколько примеров того, что вы можете изменить:

• Изменить цвет определенных элементов, например, значков корзины или профиля

  /* Изменить цвет значка корзины на красный */
  .ty-icon.ty-icon-moon-commerce.ty-minicart__icon {
      color: #ff0000;
  }
  
  /* Изменить цвет иконки профиля на красный */
  .ty-icon.ty-icon-moon-user {
      color: red;
  }
  

• Изменить размер шрифта и насыщенности определенных элементов

  /* Изменить шрифт и цвет заголовков таблиц в корзине */
  th.ty-cart-content__title {
      font-family: Arial, Helvetica, sans-serif;
       font-size: 16px;
      font-weight: normal;
      color: #4e4ebb;
  }
  

• Увеличить или уменьшить пропуски между элементами

  /* Удалить пробелы до и после баннеров на главной странице */
  .homepage-banners .owl-theme {
      margin: 0;
  }
  

• Увеличить или уменьшить размер элементов

  /* Изменить ширину логотипа */
  .ty-logo-container {
      width: 150px;
  }
  

• Добавить границы к элементам

  /* Изменить границы миниатюр товаров в списке */
  .ty-grid-list__image {
      border: 2px dashed #cb7da4;
  }
  

• Настроить внешний вид элементов в соответствии с параметрами экрана (ширина, высота, ориентация, тип устройства). Элементы вашего сайта могут выглядеть по-другому, если вы зададите для них особые стили с помощью правила @media.

  /* Изменить количество столбцов в блоке "Продавцы" для мобильных устройств */
  @media screen and (max-width: 480px) {
      .ty-mainbox-simple-body .ty-grid-vendors .ty-column5 {
      width: 50%;
  }
  }
  

Важно отметить, что пользовательский CSS не применяется к панели администратора CS-Cart, поскольку она изолирована от витрины. Изменения в панели администратора требуют определенных модификаций.

Как работает Custom CSS в CS-Cart¶

Любые стили, которые вы пишете в разделе Custom CSS, имеют приоритет над стилями по умолчанию, что позволяет вносить удобные изменения без изменения основных файлов. При загрузке страницы правила CSS применяются последовательно; следовательно, правила, определенные в инструменте редактора тем, перезаписывают правила по умолчанию.

Как определить правильный селектор для вашего правила CSS¶

Вы можете определить селектор CSS с помощью DevTools, например, в Google Chrome, а также в других браузерах. Это важный инструмент для веб-разработчиков, вот как вы можете использовать его эффективно:

1. Откройте DevTools: Щелкните правой кнопкой мыши по элементу, который вы хотите стилизовать, и нажмите Посмотреть код (Inspect). Это откроет панель DevTools, где вы увидите HTML-структуру выбранного элемента и связанные стили CSS.

2. Найдите нужный класс CSS: Наведите курсор на элементы CSS на панели «Стили», чтобы проверить, на какие элементы HTML они влияют. Когда вы это сделаете, связанные элементы будут выделены на вашем сайте.

3. Попробуйте: Вы можете изменять свойства CSS непосредственно на панели «Стили». Это позволит вам увидеть, как потенциальные изменения будут выглядеть в реальном времени. После того, как вы будете удовлетворены, скопируйте окончательный CSS в раздел «Пользовательский CSS» в CS-Cart.

.ty-footer-general__header {
    color: blue;
}

.ty-footer-menu .ty-footer-general__header {
    color: blue;
}

Что такое пользовательский класс CSS¶

В CS-Cart элементы страницы макета часто используют одни и те же классы, что затрудняет определение селектора для вашего пользовательского правила CSS, которое должно работать только для определенного элемента.

Поле Пользовательский CSS-класс — это функция, которая позволяет назначать уникальные классы определенным элементам в вашем магазине и помогает создавать целевые стили, которые не влияют на другие компоненты. Например, если вы хотите изменить внешний вид только одного блока или пункта меню, сохранив стили по умолчанию для остальных, добавление уникального класса делает это возможным.

Поле “Пользовательский CSS-класс” можно найти на странице редактирования блока, секции, раздела, пункта меню и профиля.

Вот пример того, как можно использовать это поле. Представьте, что вы хотите добавить границу к блоку Новинки. Вам нужно сделать следующее:

1. Перейдите на страницу Веб-сайт → Темы → Макеты → Домашняя страница;
2. Откройте страницу редактирования секции, содержащей нужный блок;
3. Введите имя пользовательского класса в поле Пользовательский класс CSS, например hot-deals-grid, и сохраните изменения;

4. Перейдите на страницу Веб-сайт → Темы и откройте Редактор тем;
5. Откройте раздел Пользовательские CSS в поле РЕДАКТИРОВАТЬ;
6. Введите правило CSS для нового класса, например:

/* Добавляет красную границу к секции */
.hot-deals-grid {
    border: 5px solid #e73c18;
    padding: 0 20px;
    margin-bottom: 10px;
}

7. Нажмите кнопку «Сохранить», чтобы применить изменения.

Как отменить примененные правила CSS¶

Если вы обнаружили, что ваш сайт отображается без стилей после добавления правила CSS, это, скорее всего, связано с ошибкой в ​​вашем коде.

Чтобы исправить эту проблему, перейдите на страницу Веб-сайт → Темы → Шаблоны вашей панели администратора и откройте файл [theme_name] → styles → data → [theme_stye_name].css.

Вы также можете получить доступ к этому файлу в файлах вашей установки: design/themes/[theme_name]/styles/data/[theme_style_name].css.

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

Вам также может потребоваться очистить кэш вашего сайта, нажав кнопку Очистить кэш на странице Веб-сайт → Темы вашей панели администратора.

Микроформаты в CS-Cart¶

CS-Cart имеет собственные микроформаты. Они используются как определенные классы CSS для определения того, какой код JavaScrip должен быть выполнен для определенного элемента HTML.

Вы можете прочитать о микроформатах в отдельной статье.