Украшаем виджет – добавляем фон с помощью CSS

Здравствуйте, давайте добавим к одному из виджетов фоновую картинку! Украсим виджет!

Скачать исходники для статьи можно ниже

Фреш казино зеркало

Чтобы добавить пользовательские стили CSS на сайт wordpress, можно либо редактировать файл style.css темы (находится в пункте “Внешний вид”, подпункт “Редактор”), либо установить плагин – Simple Custom CSS:
Сайт плагина: “ru.wordpress.org/plugins/simple-custom-css/”
Автор плагина: John Regan, Danny Van Kooten
Количество активных установок: 300 000+
Преимущества:
– Simple Custom CSS позволяет добавлять собственные стили или переопределять стили CSS плагинов или темы.
– Стили, которые вы сохраняете здесь, останутся даже после переключения тем.
– Для использования вводите Ваш код CSS и нажимаете на кнопку “Обновить пользовательский CSS”. Так просто!

В данной статье воспользуемся вторым способом – установим плагин – Simple Custom CSS.
После активации и установки плагина в админке, в пункте “Внешний вид”, появится новый подпункт “Пользовательские стили”:

Здесь мы будем добавлять стили CSS для виджета, но для начала нужно узнать его id или class.

Вот на моем сайте есть виджет “УКРАШАЕМ САЙТ НА НОВЫЙ ГОД”:

, давайте добавим к нему фоновую картинку:

Чтобы определить id или class виджета нам нужно открыть сайт, например, Яндекс.Браузером, далее нажать на правую клавишу мышки и выпавшем меню выбрать пункт “Исследовать элемент”:

После этого откроется следующая панель:

С помощью кнопки в виде трех точек, расположенных вертикально, можно переместить данную панель влево, вправо, вниз:

Мне нравится, когда она находится внизу.

Затем кликаем левой кнопкой мышки по следующей кнопке (Select an element…), которая находится слева:

И перетаскиваем курсор мышки до нужного нам виджета, который должен выделится следующим образом, после чего в коде у нас подсветится id и class данного виджета:

В данном примере, id виджета: “custom_html-4”, а class виджета “widget_custom_html”.

Теперь можно добавлять CSS стили к данному виджету, а для этого воспользуемся плагином Simple Custom CSS и откроем подпункт “Пользовательские стили”, где напишем следующий код к данному виджету:

#custom_html-4 {
background-image: url("https://mnogoblog.ru/wp-content/uploads/2020/01/nypattern.jpg");
padding: 25px;
border-radius: 15px;
}

В данном примере мы использовали id виджета, но можно воспользоваться и параметром – class виджета, но тогда данный стиль распространится на все виджеты “HTML-код”, который я использовал для создания данного виджета.

Вот пример кода с использованием параметра – class:

.widget_custom_html {
background-image: url("https://mnogoblog.ru/wp-content/uploads/2020/01/nypattern.jpg");
padding: 25px;
border-radius: 15px;
}

В итоге виджет у нас стал выглядеть следующим образом:

Параметр “padding: 25px;” для своего виджета я поменял на “padding: 15px;”, так красивее.

Также можно использовать не картинку для фона, а просто цвет, вот код:

#custom_html-4 {
background: #B9EBFA;
padding: 15px;
border-radius: 15px;
}

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий