I was wondering if it's possible to add a text box below the images on the Penci Featured Slider...
I'm using style 37, and I love this layout, but unfortunately, if the image is a lighter color, the white text becomes very hard to read.
I want the text box to still be attached to each image, that way I can place the post title there, that way its easy to read. I would also like this text box to share the same border radius as the image above it, which would be 5%.
There is still a shadow at the bottom, how could I remove this and make the section plain white, that way the text is sitting on a plan white color, thanks!
I was wondering if it's possible to add a text box below the images on the Penci Featured Slider...
I'm using style 37, and I love this layout, but unfortunately, if the image is a lighter color, the white text becomes very hard to read.
I want the text box to still be attached to each image, that way I can place the post title there, that way its easy to read. I would also like this text box to share the same border radius as the image above it, which would be 5%.
Thanks so much!
Hi,
Please go to Appearance > Customize > Custom CSS, then paste the following code:
.featured-area.featured-style-37 .penci-slide-overlay {Then clear your site cache and reload.position: static;
}
.featured-area.featured-style-37 .penci-slide-overlay .penci-mag-featured-content {
position: relative;
left: 0;
bottom: 0;
width: 100%;
padding: 20px 5px;
z-index: 9;
}
.featured-area.featured-style-37 .penci-slide-overlay .overlay-link {
background-color: transparent;
}
.featured-area.featured-style-37 .penci-mag-featured-content h3 a {
color: black;
}
.featured-area.featured-style-37 .penci-item-mag {
border-radius: 5%;
background-color: white;
border: 1px solid #f1f1f1; /* change border width/color here*/
overflow: hidden;
}
Best Regards,
PenciDesign.
Excellent,
There is still a shadow at the bottom, how could I remove this and make the section plain white, that way the text is sitting on a plan white color, thanks!
Hi,
Please edit CSS code like this:
.featured-area.featured-style-37 .penci-slide-overlay { position: static; } .featured-area.featured-style-37 .penci-slide-overlay .penci-mag-featured-content { position: relative; left: 0; bottom: 0; width: 100%; padding: 20px 5px; z-index: 9; } .featured-area.featured-style-37 .penci-slide-overlay .overlay-link { background: white; } .featured-area.featured-style-37 .penci-mag-featured-content h3 a { color: black; } .featured-area.featured-style-37 .penci-item-mag { border-radius: 5%; background-color: white; border: 1px solid #f1f1f1; /* change border width/color here or remove this line*/ overflow: hidden; }Best Regards,
PenciDesign.
Perfect!!!