Modify title / captions in lightbox panel
phaserbeam
Registered Users Posts: 452 Major grins
I'm using a white background on my site. The problem with having a bright/white background is that if you open a photo in lightbox i find it annoying to get the white bars on the left/right side of the photo because it's not stretched. See screenshot on the left.
As a noob i was able to fix most of the colors in the panel and navigation elements so it fits my needs (see screenshot on the right). I prefer a dark background in lightbox and a darker panel background since that looks better even if the lightbox shows a bright image.
What i could not yet fix is the title / captions element.
The way it looks now is ok as long as it is collapsed. What i want to change is when i move the mouse over it the title / captions will be fully displayed but the background should be more darken (something like rgba(10,10,10, 0.80)) and the text should be white so it's more easy to read.
Here is the code i'm currently using (might be wrong but it works so far):
Any ideas how to make the popup of title+caption with a darker background and white text while the mouse is over it (i.e. hover effect), please?
I would like to have the code on the entire site inside of a CSS box.
As a noob i was able to fix most of the colors in the panel and navigation elements so it fits my needs (see screenshot on the right). I prefer a dark background in lightbox and a darker panel background since that looks better even if the lightbox shows a bright image.
What i could not yet fix is the title / captions element.
The way it looks now is ok as long as it is collapsed. What i want to change is when i move the mouse over it the title / captions will be fully displayed but the background should be more darken (something like rgba(10,10,10, 0.80)) and the text should be white so it's more easy to read.
Here is the code i'm currently using (might be wrong but it works so far):
.sm-user-ui .sm-lightbox-panel,
.sm-user-ui .sm-lightbox-tools,
.sm-user-ui .sm-lightbox .sm-lightbox-nav {
background-color: rgba(20, 20, 20, 0.600)!important;
}
.sm-user-ui .sm-lightbox-tools .sm-fonticon-XCross2 {
font-size: 36px;
}
.sm-user-ui .sm-lightbox-tools .sm-lightbox-close {
background-color: rgba(50, 50, 50, 0.100)!important;
color: #fff!important;
}
.sm-user-ui .sm-lightbox-tools .sm-lightbox-close:hover {
color: #fff!important;
opacity: 1.0;
}
.sm-user-ui .sm-lightbox .sm-button-skin-default .sm-fonticon {
color: rgba(128, 128, 128, 0.8)!important;
}
.sm-user-ui .sm-lightbox .sm-button-skin-default:hover .sm-fonticon {
color: rgba(220, 220, 220, 0.8)!important;
}
.sm-lightbox-caption,
.sm-lightbox-title {
color: #aaa!important;
}
.sm-lightbox-basic {
background-color: #000;
}
Any ideas how to make the popup of title+caption with a darker background and white text while the mouse is over it (i.e. hover effect), please?
I would like to have the code on the entire site inside of a CSS box.
0