help controlling background color transparency separate from font color transparency
Nicholas, your customisations are awesome, so glad I came across your and Aaron Murphey CSS HTML code.
Things are working pretty well, and I have the same issue for both my Slideshow and LightBox Title and Caption panel requirement.
I have tried to get this to work, but can't seem to figure out how to Separate the opacity setting for the background in the panel and the font opacity. (I want a background color for the title bar as medium gray with 50% transparancy, and Caption light gray with 50% transparance, then have full black opacity for the fonts. Can you please help? ALso, is there a separate variable for the Keyword font color too?
THank you very much for any help you can offer.
from this Gallery's LIGHTBOX ( https://schlacter.smugmug.com/customize/Other/House-1940-Maple-Place-Riverwo/ ), this doesn't work: (using different colors to see different sections taking hold):
(I try to make a very little opacity purple background, and then have Title font=Red, Caption font=Green, and Keywords font=Blue.
.sm-user-ui .sm-lightbox .yui3-widget-ft .sm-lightbox-panel {
background-color: #FF00FF !important; /* can use transparent as value too */
opacity: 0.25 ;
/* background-color: transparent !important; /* transparent !important; */
}
I think you're better off using this for transparency, 0.6 in this. Opacity seems to take the whole block, all layers down.
background: rgba(0, 0, 0, 0.6);
Thank you, very helpful.
If you don't mind, do you now how to expand the vertical size of the Caption box in the Slideshow?
I am trying to avoid having scroll bars.
I found this code from A. Murray but it doesn't seem to be working.
/* Make the slideshow captions take up all the room they can */
.sm-slideshow .sm-tiles-info-over .sm-tile-info p {
overflow: auto !important;
text-overflow: ellipsis !important;
white-space: normal !important;
}
/* Let the captions fill the height required */
.sm-slideshow .sm-tiles-info-over .sm-tile-info p {
Comments
Nicholas, your customisations are awesome, so glad I came across your and Aaron Murphey CSS HTML code.
Things are working pretty well, and I have the same issue for both my Slideshow and LightBox Title and Caption panel requirement.
I have tried to get this to work, but can't seem to figure out how to Separate the opacity setting for the background in the panel and the font opacity. (I want a background color for the title bar as medium gray with 50% transparancy, and Caption light gray with 50% transparance, then have full black opacity for the fonts. Can you please help? ALso, is there a separate variable for the Keyword font color too?
THank you very much for any help you can offer.
from this Gallery's LIGHTBOX ( https://schlacter.smugmug.com/customize/Other/House-1940-Maple-Place-Riverwo/ ), this doesn't work: (using different colors to see different sections taking hold):
(I try to make a very little opacity purple background, and then have Title font=Red, Caption font=Green, and Keywords font=Blue.
.sm-user-ui .sm-lightbox .yui3-widget-ft .sm-lightbox-panel {
background-color: #FF00FF !important; /* can use transparent as value too */
opacity: 0.25 ;
/* background-color: transparent !important; /* transparent !important; */
}
/* Tweaks for lightbox title/caption appearance */
/* original arguments line: */
.sm-user-ui .sm-lightbox-title, /* { */
.sm-lightbox-basic .yui3-widget-ft {
color: #FF0000 ;
background-color: transparent;
opacity: 1;
/* font-size: 20px; */
}
/* ORIGINAL Aarguments line: .sm-user-ui .sm-lightbox-info .sm-lightbox-keywords p { */
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption {
color: #00FF00 ; /*#101010; /* dark gray */
background-color: transparent;
opacity: 1;
/* margin-bottom: 0.2em; */
}
/* ORIGINAL Aarguments line: .sm-user-ui .sm-lightbox-info .sm-lightbox-keywords p { */
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-keywords .sm-gallery-keywords{
color: #0000FF ; /*#101010; /* dark gray */
background-color: transparent !important
opacity: 1;
/* margin-bottom: 0.2em; */
http://schlacter.smugmug.com
background: rgba(0, 0, 0, 0.6);
My Website index | My Blog
Thank you, very helpful.
If you don't mind, do you now how to expand the vertical size of the Caption box in the Slideshow?
I am trying to avoid having scroll bars.
I found this code from A. Murray but it doesn't seem to be working.
/* Make the slideshow captions take up all the room they can */
.sm-slideshow .sm-tiles-info-over .sm-tile-info p {
overflow: auto !important;
text-overflow: ellipsis !important;
white-space: normal !important;
}
/* Let the captions fill the height required */
.sm-slideshow .sm-tiles-info-over .sm-tile-info p {
height: initial !important;
/* ORIG height: initial !important; */
}
http://schlacter.smugmug.com