2014-02-04

Lightbox blogspot css (меняем оформление)

Lightbox blogspot
В прошлом уроке я рассказала почему не может не работать lightbox в blogger. В этой статье мы будем изменять внешний вид лайтбокс в blogger.
Схема изменений:
лайтбокс-css схема
Для того, чтобы изменить оформление лайтбокс, вставьте код, приведенный ниже перед кодом ]]></b:skin>:
<style>
/* Цвет фона lightbox*/
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(image-url-address) !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}
/* Граница изображения */
.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;
}
/* Кнопка закрытия */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(http://img-fotki.yandex.ru/get/9820/40839264.15/0_a95bd_c625f6eb_S.gif) no-repeat !important;
width: 24px !important;
height: 24px !important;
}
/* Цвет панели (Bar) */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
}
/* Цвет текста */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}
/* цвет текста панели (количество картинок) */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}
</style>
Стиль, который приведен в примере, создает следующий вид лайтбокс – на белом фоне с закругленными углами картинок, серой панелью:
/* лайтбокс блоггер

Вы можете настроить lightbox на свое усмотрение, изменяя css
Если вы хотите использовать в качестве фона lightbox изображение, то в коде пропишите дрес фонового изображение:
background-image: url(image-url-address) !important;
Если вам нужна помощь в настройках лайтбокс на blogger, то пишите комментарии к записи.

10 комментариев :

Элси комментирует...

интересно! Надо попробывать как-нибудь! Это в шаблон блога вставлять код, я так понимаю?

Элси комментирует...

А вот еще))) Наташа, напомни пож. как находить тот или иной отрезок кода в шаблоне))) Я редко это делаю и пока не запомнила) спасибо заранее!

Mycrib комментирует...

Да, Элси, в шаблон

Mycrib комментирует...

По некоторым вопросам blogger хочу написать FAQ, но все руки не доходят. В частности , вопрос по поиску отрезка кода в шаблоне я бы поставила на первое место.
Шаблон блога -> изменить html. Писать в каждой статье мне лень, но в комментариях всегда спрашивают.
В коде шаблона нужно поставить курсор в любое место, затем нажать сочетание клавиш CTRL+F и ввести в окно отрезок кода, который требуется найти. Enter

Maximilian Edelman комментирует...

СПАСИБО

Анонимный комментирует...

Добрый день! А как сделать чтобы кнопка закрытия была не в правом верхнем углу а прилипала к изображению?

Иванова Наталья комментирует...

Анонимный, к сожалению, не могу подсказать вам про кнопку закрытия ((

Анонимный комментирует...

Натаья спасибо! Еще вопрос если можно. При использовании лихтбокса(когда открываешь изображение и закрываешь),если вы заметите смещается сам сайт на величину скролла. Если добавить перед ]]> код body {overflow-y: scroll; } то все нормально на браузерах фирефох и опера, но на хроме это не срабатывает.Подскажите пожалуйста решение а то это очень раздражает!

Иванова Наталья комментирует...

Пользуюсь хромом, не замечала такого эффекта

Анонимный комментирует...

Ну вот даже на вешем примере http://table-html.blogspot.com/2014/02/dfg.html откройте изображение и наедите курсор на какое нибудь слово потом щелкните и курсор будет не у этого слова а сместится просто внимательно приглядеться

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML