Красивый вид виджета "Карточка" с виньеткой на uKit

Для реализации данной инструкции на собственном сайте необходимо
приобрести премиум-пакет «Про».

В этой инструкции мы расмотрим способ прикрепления виньетки к виджету Карточка.

Виньетка (фр. vignette) — украшение в книге или рукописи: небольшой рисунок или орнамент в начале или в конце текста. Виньетка представляет собой небольшую орнаментальную или сюжетную композицию...

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

Результат работы

Шаг 1: загрузка виньетки на сайт

Перейдите в редакторе сайта в библиотеку изображений и загрузите на сайт подготовленное изображение виньетки. Затем, нажмите в левом углу загруженной картинки на значок лупы, на открывшейся для предпросмотра - картинке, кликните правой кнопкой мыши, и в выпадающем меню выберите пункт Скопировать ссылку картинки (в разных браузерах, название пункта меню может отличаться):

Библиотека изображений

Скопированную ссылку сохраните в любом текстовом редакторе (скоро она нам пригодится), и выйдите из редактора в панель управления сайтом.

Шаг 2: добавление стиля на сайт

В панели управления сайтом нажмите в виджетах сайта на Свой код:

Свой код в панели управления сайтом

Далее, создайте новую вставку кода, назовите её, например, Стили и добавьте в неё следующий код:

<style>
 .ul-goods-view-item:before {
 content: '';
 background-image: url();
 background-size: contain;
 background-repeat: no-repeat;
 position: absolute;
 width: 0px;
 height: 0px;
 top: 0px;
 right: 0px;
 z-index: 1;
 } 
 </style>

Найдите в добавленном стиле строку background-image: url(); и добавьте между одинарными кавычками скопированную ранее ссылку на изображение.

Затем, в параметрах width: 0px; и height: 0px; необходимо изменить значение 0px на размер Вашей виньетки. Рекомендую использовать квадратные изображения виньеток. Рассчитывать пропорции при указании размеров будет намного проще!

За положение изображения отвечают параметры top: 0px; и right: 0px;. В данном примере виньетка будет располагаться в правом верхнем углу. Если необходимо разместить слева, измените right на left. Соответственно, если необходимо разместить внизу, измените top на bottom. Значения этих параметров позволяют смещать картинку. Чтобы получить результат указанный в самом начале, код был таким:

<style>
 .ul-goods-view-item:before {
 content: '';
 background-image: url();
 background-size: contain;
 background-repeat: no-repeat;
 position: absolute;
 width: 150px;
 height: 200px;
 top: -14px;
 right: -15px;
 z-index: 1;
 } 
 </style>

Важно помнить, что параметры зависят от размеров самой виньетки, а также выбранного шаблона.

Сохраните добавленный стиль. В настройках укажите в head и добавьте к нужной странице в разделе Применить к страницам.

Настройки добавленных стилей

Опубликуйте и наслаждайтесь.

Понравился материал?
Вы можете воспользоваться услугами автора материала – исполнителя Divly!