Тут 2 варианта быстрый и чуть дольше.

Простой.
В папке с вашей темой оформления, там где лежит layout.tpl создаёте файл scripts.tpl. В нём пишите:

{addcss file="custom.css"}

Далее можете создать файл в /templates/Ваша тема/resource/css/custom.css и добавлять правила.

С этим разобрался, как сделать, чтобы например один и тот же класс по разному отображался в ПК версии и в мобильной?
Например в ПК

.subCategoryListVolt{
    margin: 0px 3px 3px 0px;
    width: 30%;
    background: white;
    float: left;
    height: 110px;}

а в мобильной

.subCategoryListVolt{
    margin: 0px 3px 3px 0px;
    width: 100%;
    background: white;
    height: 110px;}

Простой.
В папке с вашей темой оформления, там где лежит layout.tpl создаёте файл scripts.tpl. В нём пишите:

{addcss file="custom.css"}

Далее можете создать файл в /templates/Ваша тема/resource/css/custom.css и добавлять правила.

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

И вот почитать:
небольшое руководство

Также посмотрите как включить отображение ошибок здесь https://readyscript.ru/faq/#faq-errors

А так на телефоне
https://yadi.sk/i/Ui7f8DTt3QnGiL