Данный блок служит для размещения в нём пользовательских css стилей.
Содержимое блока выводится на каждой странице в тегах <style></style> после всех служебных стилей.
Располагается внутри тега <head>.
Содержимое данного блока лучше обернуть тегами {strip} {/strip}.
ВНИМАНИЕ!!!
Не допускайте, чтобы сразу после фигурной скобки шёл какой либо символ – это вызовет ошибку в системе!!
Как должен выглядеть блок:
38 комментариев
В комментариях я буду добавлять полезные правила для различных ситуаций и плагинов.
Чтобы изменить размер текст или сделать текст жирным в заголовке главного слайдера в режиме товаров добавьте в блок следующий код:
.top-slider .slider-inner .product_title { font-weight: bold; /* Данное правило сделает заголовок жирным*/ font-size: 24px; /* Данное правило сделает размер шрифта равным 24 пикселям */ }Окошко выбора региона у плагина SEO-регионы отображается под горизонтальынми меню.
Чтобы это исправить добавьте следующий код:
.shop-regions-window__wrapper, .shop-regions-ip-analyzer__wrapper { z-index: 400 !important; /* Уменьшит внутренний оступ, чтобы диалог поместился в одну строку */ padding: 30px 20px !important; }Работа со вкладками товаров на главной странице.
Уменьшение отступов во вкладках:
.home-sets .tab-pane { padding-top: 0 !important; } .home-sets .tab-pane > div { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }Выравнивание вкладок по центру:
.home-sets .tabs { text-align: center; }Выделение значения скидки на странице корзины (cart.html) красным цветом.
.cart-discount { color: #E32226; }Сдвиг таймера под картинку в промо-карточках под слайдером:
.promo-card.image-mode .image-block { margin-bottom: 50px; }Окрашивание главного пункта раскрытого меню
См. тему Развёрнутые подменю
.sidebar .navbar-nav > li.pro_open_li { background: #F5F5F5; /* Фон */ color: #000000; /* Цвет текста */ }#F5F5F5 и #000000 потом замените на свой цветовой код.
Подобрать цвет можно здесь.
Изменение z-index плагина бейджей:
.-b-, .badge_ { z-index:10 !important; }Отключение заглавных букв у заголовков:
h1,.h1, h2,.h2, h3,.h3, h4,.h4, h5,.h5, h6,.h6, .bullet-heading { text-transform: none !important; }Выравнивание виджета Jivosite таким образом, чтобы он не загораживал корзину и кнопку "вверх" в нижней панели сайта.
/* выравнивание виджета JIVOSITE */ .jivo-cbenabled.jivo-collapsed { bottom: 150px !important; } /* Корректировка z-index для кнопки с трубкой */ .wrap_3s._show_3w { z-index: 10 !important; } /* сдвиг кнопки с трубкой левее */ .wrap_3s { right: 60px !important; }Подскажите, пожалуйста, Владимир, а этот код каким образом вставлять в блок PROSTORE.USER_CSS - в таком как вы его написали или в какой-то тег нужно обернуть? Пробовал вставить просто так - никакого результата, по крайней мере на ПК, нет (имеется ввиду при горизонтальной ориентации чата). Можно ли его как-то левее сдвинуть?
Ни во что не надо оборачивать – так и вставлять.
А не работает он у вас потому что у вас выбран другой тип виджета.
Как выровнять тип виджета, который у вас я не знаю. Но не рекомендую его сдвигать, т.к. это будет не адаптивно (на узких экранах он будет заслонять другие элементы дизайна).
Проверял щас. Эффекта нету.
Вставил в блок код. После вставил код блока в head (думал что поможет), тоже нету эффекта.Что еще можно сделать. т.к сдвинуть значек очень нужно)
Скопировал все в блок. Но так и осталось все на своих местах. В том же блоке код размеров картинок категорий - он работает (поддержка плагина настроили).
с Jivo не срабатывает. В чем причина, уже оборачивал в strip не помогает.Ожидаю ответа спасибо
Значит у вас другие селекторы у виджета Jivo.
Настройка стилей виджета Jivo не входит в бесплатную поддержку темы дизайна.
Обращайтесь к разработчикам чата или плагина.
Ясно,спасибо
Отображение брендов из плагина Бренды с картинками и категориями на странице списка брендов строчно, а не столбцом.
Было:
Стало:
Код:
#page .brand { display: inline-block; width: 33%; text-align: center; margin-bottom: 25px; } #page .brand + br { display: none; } @media only screen and (max-width : 1024px) { #page .brand { width: 49%; } } @media only screen and (max-width : 767px) { #page .brand { width: 100%; } }Отмена выравнивания текста по центру во всей теме на мобильных устройствах.
Было:
Стало:
@media only screen and (max-width: 767px) { .xs-align-center { text-align: inherit !important; } }Собственный цвет ссылок при наведении:
a:hover, #page-cart label:hover, .autofill-result .item-autofill a:hover, .photo-info a:hover, .breadcrumbs .last, .sub-categories.list-inline li.selected a:hover, .sorting.list-inlineli.selected a:hover, .sublist.list-inline li.selected a:hover, .hint a:hover, .hint:visited:hover, .hint a:visited:hover { color: #cccccc; }#cccccc – замените на свой код цвета.
Устранение конфликта z-index плагина Быстрый заказ:
#modal-window { z-index: 10050 !important; }Добавление закруглений границ ключевым элементам дизайна темы:
.product-list.list_thumb_static .product.bestseller, .product-list.list_thumb_static .product.lowprice, .product-list.list_thumb_static .product.new, .product-list.list_thumb_static .product>.row, .product-list.list_thumb_static .product, .product-list.bordered.mini .thumbs_bg .product, .product-list.bordered .thumbs_bg .product, .product-list.bordered .thumbs_v2 .product, .desktop .product-list .thumbs_v2 .product:hover .product_info, .touch .product-list .thumbs_v2 .product.visible .product_info, .product-list.list_view .product:hover, .product-list.list_view .product.visible, .product-list.list_thumb_static .product:hover, .product-list.list_thumb_static .product.visible, .promo-card.image-mode a.image-link { border-radius: 4px; } .cart_panel_holder #cart a, input[type=button], input[type=submit], .button, .cart-plugin button { border-radius: 4px !important; } .tabs li, .tabs li a { border-top-left-radius: 4px; border-top-right-radius: 4px; }4px замените на необходимое вам значение радиуса.
Увеличение изображений категорий для плагина Иконка, изображение и баннер для категории:
.cat_img_holder { height: 200px !important; } .cat_img_holder img { max-height: 200px !important; }Выравнивание изображений подкатегорий по центру:
.home_cat_images_menu li, .top_cat_images_menu li { float:none !important; }Исправление z-index для фона плагина Купить в 1 клик:
#storequickorder .dialog-background { z-index: 1999 !important; }Скрытие нижней панели сайта (с корзиной, кнопками сравнения и т.д.)
.cart_panel_holder { display: none !important; } .footer_holder { margin-bottom: 0 !important; }В каком файле это надо изменить?
Это не файл, а блок приложения Сайт – prostore.user_css
Прочитайте сначала статью Для чего нужны блоки и где их создавать.
А затем перечитайте содержание этой статьи prostore.user_css – пользовательские CSS стили.
Изменить фон карточек товаров в категориях.
По мотивам этого обсуждения.
{$bg_rgb = '255,255,255'} /* Здесь необходимо указывать цвет в rgb-формате (из-за прозрачности) */ /* #FFFFFF (белый) = rgb(255,255,255) */ /* #hex –> rgba конвертор: https://www.webpagefx.com/web-design/hex-to-rgb/ */ .product-list.list_thumb_static .product, .product-list.bordered.mini .thumbs_bg .product, .product-list.bordered .thumbs_bg .product, .product-list.bordered .thumbs_v2 .product, .product-list.list_view .product, .product-list.table_view .view_class .product { background: rgb({$bg_rgb}) !important; } .list_thumb_static.fixed_height .product_details::after { background: -webkit-linear-gradient(rgba(179,173,173, 0) 0%, rgba({$bg_rgb}, 1) 85%); background: -o-linear-gradient(rgba(179,173,173, 0) 0%, rgba({$bg_rgb}, 1) 85%); background: linear-gradient(rgba(179,173,173, 0) 0%, rgba({$bg_rgb}, 1) 85%); } .product-list.bordered.mini .thumbs_bg .product, .product-list.bordered .thumbs_bg .product, .product-list.bordered .thumbs_v2 .product { border: none !important; }
255,255,255 замените на свой код цвета в rgb-формате, если нужен НЕ белый цвет.
255.255.255 – это белый цвет в rgb-формате, в #hex-формате – это #FFFFFF.
Онлайн конвертер #hex в rgb: https://www.webpagefx.com/web-design/hex-to-rgb/
Доп. стили для плагина Скидка в процентах:
.svp-minus-percent { float: right; font-size: 16px !important; font-weight: bold; }Отдельный цвет для каждого уровня меню товаров.
.top-navbar-2 .top-nav > li ul { background: #000; } .top-navbar-2 .top-nav > li ul ul { background: #333; } .top-navbar-2 .top-nav > li ul ul ul { background: #666; } /* и т.д. */
Цвета только подберите под себя.
Высота кнопок в плагине Комплекты товаров
body .productsets-set .productsets-button { height: 38px; }Смена цветов бейджев Нет в наличии и Под заказ
.desktop .thumbs .product .badge-transparent .badge.outofstock, .touch .thumbs .product .badge-transparent .badge.outofstock, .product-list.list_view .product .badge-transparent .badge.outofstock, .product-list.list_thumb_static .product .badge-transparent .badge.outofstock, .product-list.table_view .view_class .product .badge-transparent .badge.outofstock { background: rgba(0,0,0, .5); } .product-list .thumbs_bg .product .product_info, .product-list .thumbs_v2 .product .product_info, .desktop .thumbs .product:hover .badge-transparent .badge.outofstock, .touch .thumbs .product.visible .badge-transparent .badge.outofstock, .product-list.list_view .product:hover .badge-transparent .badge.outofstock, .product-list.list_thumb_static .product:hover .badge-transparent .badge.outofstock, .product-list.table_view .view_class .product:hover .badge-transparent .badge.outofstock, .badge.outofstock { background: rgba(0,0,0, .7); } .desktop .thumbs .product:hover .badge-transparent .badge.outofstock, .desktop .thumbs .product:hover .badge-transparent .badge.outofstock:after, .product-list.list_thumb_static .product:hover .badge-transparent .badge.outofstock, .product-list.list_thumb_static .product:hover .badge-transparent .badge.outofstock:after, .product-list.list_view .product:hover .badge-transparent .badge.outofstock, .product-list.list_view .product:hover .badge-transparent .badge.outofstock:after, .product-list.table_view .view_class .product:hover .badge-transparent .badge.outofstock, .product-list.table_view .view_class .product:hover .badge-transparent .badge.outofstock:after, .touch .thumbs .product.visible .badge-transparent .badge.outofstock, .touch .thumbs .product.visible .badge-transparent .badge.outofstock:after { color: rgba(0, 0, 0, 0.8); }Изменение подсветки характеристик в фильтрах
/* Цвета в изначальном состоянии */ .sidebar_content .filters .filter-param { background: #dcdada; /* фон */ color: #000; /* цвет шрифта */ } .sidebar_content .filters .filter-param .a_body label { color: #000; /* цвет шрифта */ } /* Цвета в состоянии при наведении курсора */ .sidebar_content .filters .filter-param { background: #aba9a9; /* фон */ color: #000; /* цвет шрифта */ } .sidebar_content .filters .filter-param .a_body label { color: #000; /* цвет шрифта */ }Замените коды цветов (которые начинаются с #) на собственные значения.
Для подбора цвета можно воспользоваться этим сервисом.
Изменения размеров шрифтов в меню:
/* Для горизонтального меню */ top-nav>li>a { font-size: 12px; } /* Для вертикального меню в боковой колнке */ .sidebar-nav a { font-size: 12px; }День добрый!
А как изменить цвет текста бокового меню категорий в админке? Когда разворачиваю категорию и подкатегории в ней, то все одним цветом, хочется подсветить открытую категорию и подкатегорию в ней, где сейчас добавляю или редактирую товары, для простоты ориентировки на местности.
Скрин с хотелкой приложил.
И ещё один момент.
Создал пользовательский блок. Все стили, которые там указываю, не работают. Что-то не так делаю?
В админке – никак.
Данный блок работает только во фронтенде (той части сайта, которую видят посетители) и только в теме proStore.
Тема дизайна никак не может влиять на внешний вид админки.
Создал пользовательский блок. Все стили, которые там указываю, не работают. Что-то не так делаю?
Специально не стал код оформлять <>, чтоб видно было, как вставлял в блок prostore.user_css
{strip}
.sidebar .navbar-nav > li.pro_open_li { background: #E55254; /* Фон */ color: #000000; /* Цвет текста */
}
.cart-discount { color: #E55254;
}
a:hover, #page-cart label:hover, .autofill-result .item-autofill a:hover, .photo-info a:hover, .breadcrumbs .last, .sub-categories.list-inline li.selected a:hover, .sorting.list-inlineli.selected a:hover, .sublist.list-inline li.selected a:hover, .hint a:hover, .hint:visited:hover, .hint a:visited:hover { color: #E55254;
}
{/strip}
Берём первую строку вашего кода. Она предназначена для окрашивания развёрнутых пунктов меню. Которых у вас нет.
О том как развернуть меню, есть ссылка в комментарии, из которого вы брали код.
Это первое. Второе – цвета нужно фона и цвета нужно поменять, чтобы было видно, что код работает. В коде представлены цвета по-умолчанию.
Собственный цвет ссылок при наведении работает.