Привет всем, моим читателям. Это снова я, с новыми идеями для наших блогов на платформе blogspot. Сегодня я хочу вам предложить интересное решение по замене фона Lightbox.
Но для начала я
расскажу, что за зверь это такой:
Lightbox – это
такой скрипт, отвечающий за галерею ваших фотографий и показанные в миниатюре.
Которые после нажатия увеличиваются в размерах. Стандартный Lightbox на платформе blogspot выглядит примерно так:
Стандартный фон Blogger Lightbox |
Возможно, кто-то захочет немного видоизменить его. Тогда я предлагаю вам заменить его на более живой и интересный фон + можно изменить
и кнопочку закрытия. Выглядеть это будет
примерно так
Измененный фон Blogger Lightbox |
Скрипт для изменения фон
/* Background Color */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(http://www.tarantulasworks.com/wallpaper/images/wallpaper/fractals/156.jpg) !important;
opacity: 0.9 !important;
filter: alpha(opacity=90) !important;
}
/* Images Border */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}
/* Close Button */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(http://cdn4.iconfinder.com/data/icons/aiga-symbol-signs/580/aiga_lefnddownarrow_inv-24.png) no-repeat !important;
width: 24px !important;
height: 24px !important;
}
/* Thumbnails Bar Color */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
}
/* Text Color */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}
/* Index Info (number of images) */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}
Разяснения:
http://www.tarantulasworks.com/wallpaper/images/wallpaper/fractals/156.jpg- адрес фона
http://cdn4.iconfinder.com/data/icons/aiga-symbol-signs/580/aiga_lefnddownarrow_inv-24.png -адрес кнопки закрытия
0.9 -прозрачность фона
Кнопочки закрытия я нашла по этому адресу http://cdn4.iconfinder.com
Фон я просто закачала понравившуюся картинку размерами 1900 на 1200
Ну что же, пожалуй на этом все. Па-па.
Пожалуйста не забывайте нажать
я вот не особо понимаю, а куда этот код или текст вставлять?
ОтветитьУдалитьЯрослава, это у меня дырявая бошка стала. Поправила код нужно вставить перед . Извините за накладку)
Удалитьдошло :) (до меня)
УдалитьНе понятно, что и куда вставлять. Через HTML в сообщении не вставляется. Аня, до конца объясните что и куда вставлять.
ОтветитьУдалитьЭто вставляется не через HTML сообщении а именно в шаблон. С лева (где вы выбираете гаджеты)под Дизайном есть ниже Шаблон. Нажимаете Шаблон- Изменить HTML- ищете через нажатие клавиш Ctrl+F нужный вам тег и вставляете, скрипт
ОтветитьУдалитьhttp://studying-blogin.blogspot.com/2012/12/html-blogger.html вот еще тут более понятней, что и где искать описанно
ОтветитьУдалитьСпасибо!
ОтветитьУдалить