LightBox в блоггер Изменить фон с использованием CSS

---

Обновлено: 27.03.2020 г.

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

Многие блоггеры используют эту функцию для увеличения изображений. С одной стороны, на черном фоне картинки заметно выделяются, но при открытии, как будто попадаешь в мир теней. Мне очень не нравится, хотя дело вкуса. Давайте рассмотрим примеры оформления и настроим веселее фон: 

Вкладка тема, делаем резервную копию. Нажимаем изменить HTML и находим строку <b:skin>...</b:skin>. Раскройте секцию CSS стилей, жмите на стрелку слева. Код CSS для оформления фона вставить выше строки ]]></b:skin>. Кто не знает, где найти строку, почитайте пост Как быстро и красиво оформить текст в блоге.

Самое простое оформление, белый фон

.CSS_LIGHTBOX_BG_MASK {

background-color:#f8f8ff !important; }

Основной зеленый и фон нижней границы

.CSS_LIGHTBOX_BG_MASK {

background-color: rgba(31, 124, 35, 0.28) !important;}

.CSS_LIGHTBOX_FILMSTRIP {

background-color: rgba(81, 151, 95, 0.79) !important;}

Светлый голубой и фон нижней полосы

.CSS_LIGHTBOX_BG_MASK {

background-color: #84b6bf !important;}

.CSS_LIGHTBOX_FILMSTRIP {

background-color: #404040 !important;}

Примеров можно показать много. Вместо цветового фона вставить картинку 

 .CSS_LIGHTBOX_BG_MASK {

background-image: url (адрес изображения) !important; }

Стиль CSS с фоном картинки и нижней границей

.CSS_LIGHTBOX_BG_MASK {

background-image: url (адрес картинки) !important;}

.CSS_LIGHTBOX_FILMSTRIP {

background-color: #404040 !important;} 

У кого в блогах много фотографий, изображений интерьера, по колдуйте и оформите в своем индивидуальном стиле. Тем более, что есть возможность оформить фон для каждой страницы разный. В редакторе блоггер перейти по вкладке HTML и внизу страницы вставить стиль CSS

<style>код CSS</style>

Кому стили CSS трудно вставить в шаблон, код ниже или свой вариант оформления, можно вставить дизайн добавить гаджет для всех страниц, сохраните внизу макета блога.

<style>

.CSS_LIGHTBOX_BG_MASK {

background-color:#f8f8ff !important; }

</style>

А у меня на сегодня вся информация. Вопросы задавайте в комментариях или в меню форма для связи. Удачи и всего доброго.

Почитайте другую информацию:

• Горизонтальное меню для блогов блоггер на сторонних шаблонах;
• Скрыть navbar atom attribution с помощью CSS Сохранить гаджет без названия заголовка;
• Переместить или удалить заблокированный гаджет в макете блога blogspot;
• Скрыть виджеты на статических и страницах сообщений с помощью CSS;
• Причина неработающих настроек и функций в панели инструментов блоггер;

Рекомендуемый контент: