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



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

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

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

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

Простое оформление лайтбокс, используя свойства CSS, фон белый

.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>

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

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



Автор статьи ✎ Olga Protasova Выпуск ✹ 2/16/2016 Ярлыки ►


Открыть комментарии →

11 коммент. :

  1. У меня почему-то не сработало. Фон так и остался чёрным. Может надо предварительно обнулить стили? Но я не знаю как.

    ОтветитьУдалить
  2. Галина здравствуйте. Какой у Вас шаблон. Тестировала во всех, работает, даже вставляла гаджетом. В "Корпорации" у меня и без CSS картинки открываются на белом фоне. Проверьте правильно ли скопировали, важна каждая точка. .CSS_LIGHTBOX_BG_MASK { Посмотрите точка есть вначале.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Оля! Скопировала аккуратно, с точкой. Шаблон Simple жёлтый

      Удалить
  3. Галина, посмотрите по ссылке, шаблон такой? Нажмите на картинку, все работает. Код CSS добавила гаджетом. Где-то ошибка, посмотрите еще раз внимательно.

    http://ovp23.blogspot.com/2016/02/blog-post.html

    ОтветитьУдалить
  4. Да, гаджетом и у меня получилось, спасибо!

    ОтветитьУдалить
  5. Галина, все таки почему в шаблоне не сработал код, я вставляла в шаблон, рабочий.

    ОтветитьУдалить
  6. Оль, у меня что-то вообще непонятное происходит. Я целый день потратила, пытаясь исправить цвет заголовков гаджетов. В шаблоне вставляю исправления, сохраняю - и ничего не меняется, а в визуальном дизайнере шаблонов у меня погасли кнопки "Применить к блогу" на всех блогах и во всех браузерах. Задала вопрос в группе "Blogger Форум. Вопросы и ответы", даже скриншот вставила, и никто не ответил. Даже просмотров, кроме моих собственных нет. Я уже паникую, т.к. совсем не знаю - в чём причина такого.

    ОтветитьУдалить
  7. Галина, кнопка "Применить к блогу" становится активной, когда измените что-то в настройках дизайна. Попробуйте изменить цвет заголовка например, кнопка должна активироваться.
    По цвету заголовков желательно ссылку на скриншот шаблона, что и куда вставляли.

    ОтветитьУдалить
    Ответы
    1. Ой, точно! Кнопка активизировалась, но я рано радовалась. Как и в прошлый раз у меня - какой-то глюк при корректировке заголовка гаджетов. Изменения вносятся не в гаджет, а в верхний колонтитул (дата сообщения)

      http://i-fotki.info/19/7a78307272ba4a9c33ddad216136edcd5bdb65238496261.png.html

      Я потому и полезла в шаблон

      http://i-fotki.info/19/2d0ebaa22fd1abb7fb5012e02407c57b5bdb65238496261.png.html

      Удалить
  8. Галина, написала на почту. Посмотрите для начала адрес. Часто и много глюков в блоггер из-за неправильного адреса. Отпишитесь.

    ОтветитьУдалить
  9. Спасибо Вам, добрый человек! Я уже получила и ответила. :)

    ОтветитьУдалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *