Removing overlay box
-
How can we remove the gray overlay box with title and URL and leave only a small [Read more] button?
//THANKS
-
Hello @bibliata
Sorry for my delayed response.
Can I know which layout and design you are using? You can also share your web page link on which you had setup the plugin so I can take a look and help you my best.echo do_shortcode( ‘[psac_post_slider design=”design-1″ dots=”false” sliderheight=”275″ show_date=”false” autoplay_interval=”2222″ show_author=”false” show_comments=”false” show_category=”false” limit=”7″ category=”11856″]’ );
Hello @bibliata
Thanks for sharing the shortcode. I created the same output where I have a small query regarding the grey background.
Please refer to the screenshot – https://prnt.sc/EQZeK330–X8 and let me know whether you are asking for point 1 or point 2?
Thanks
I guess point 1, as we do not have point 2 on our setup
That area usually is a picture / background
Hello @bibliata
As per my screenshot and your response you choose point no 1 but its a background color that we can manage with custom css and here is CSS
.psacp-post-slider-wrap .psacp-no-thumb .psacp-post-img-bg{background-color: #fff;}or
.psacp-post-slider-wrap .psacp-no-thumb .psacp-post-img-bg{background-color: transparent;}But as per your very first question and the shortcode (where you are just showing the title), you had asked for:
“remove the gray overlay box with title and URL and leave only a small [Read more]”
Can you please explain and tell me that you just want to display read more button?
THIS!
/* NUCLEAR OPTION - Force override all slider positioning */
/* Target every possible overlay container with maximum specificity */
html body .psacp-wrap .psacp-post-slide .psacp-featured-meta,
html body .psacp-wrap .psacp-post-slide .psacp-post-overlay,
html body .psacp-post-slider-wrap .psacp-featured-meta,
html body .psacp-post-carousel-wrap .psacp-post-overlay,
.psacp-wrap .psacp-featured-meta[style],
.psacp-wrap .psacp-post-overlay[style] {
position: absolute !important;
top: auto !important;
bottom: 0px !important;
left: 0px !important;
right: 0px !important;
width: 100% !important;
min-width: 100% !important;
max-width: none !important;
margin-left: 0px !important;
margin-right: 0px !important;
box-sizing: border-box !important;
height: 25% !important;
background: rgba(0, 0, 0, 0.77) !important;
background-color: rgba(0, 0, 0, 0.77) !important;
background-image: none !important;
border: 0px solid transparent !important;
border-radius: 0px !important;
box-shadow: none !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
padding: 15px 20px 15px 20px !important;
margin: 0px !important;
transform: translateY(0px) translateX(0px) !important;
-webkit-transform: translateY(0px) translateX(0px) !important;
-ms-transform: translateY(0px) translateX(0px) !important;
opacity: 1 !important;
z-index: 999 !important;
}
/* Force positioning on the image containers */
html body .psacp-post-img-bg,
html body .psacp-post-slider-content,
html body .psacp-post-carousel-content {
position: relative !important;
padding: 0px !important;
margin: 0px !important;
overflow: visible !important;
}
/* Remove any padding/margins that might constrain width */
.psacp-post-slide,
.psacp-post-carousel-content,
.psacp-post-slider-content {
padding: 0px !important;
margin: 0px !important;
box-sizing: border-box !important;
}
/* Override any centering styles that might be applied */
.psacp-featured-meta.psac-alignmiddle,
.psacp-post-overlay.psac-alignmiddle {
align-items: center !important;
justify-content: center !important;
text-align: center !important;
vertical-align: middle !important;
}
/* Text styling for readability on black background */
.psacp-featured-meta *,
.psacp-post-overlay * {
color: white !important;
border: none !important;
box-shadow: none !important;
text-shadow: none !important;
background: transparent !important;
}
.psacp-featured-meta .psacp-post-title,
.psacp-post-overlay .psacp-post-title {
margin: 0px 0px 8px 0px !important;
padding: 0px !important;
font-size: 22px !important;
line-height: 1.3 !important;
}
.psacp-featured-meta .psacp-post-title a,
.psacp-post-overlay .psacp-post-title a {
color: white !important;
text-decoration: none !important;
}
/* Remove any pseudo-elements that might interfere */
.psacp-featured-meta:before,
.psacp-featured-meta:after,
.psacp-post-overlay:before,
.psacp-post-overlay:after {
display: none !important;
content: "" !important;
background: none !important;
position: static !important;
}
/* Override specific positioning styles that might be set inline / [style="position"] .psacp-featured-meta,
[style*="position"] .psacp-post-overlay {
position: absolute !important;
bottom: 0px !important;
top: auto !important;
}
/* Backup selectors in case the plugin adds more specific classes */
.psacp-design-1 .psacp-featured-meta,
.psacp-design-1 .psacp-post-overlay,
.psacp-design-2 .psacp-featured-meta,
.psacp-design-2 .psacp-post-overlay {
position: absolute !important;
top: auto !important;
bottom: 0px !important;
left: 0px !important;
right: 0px !important;
width: 100% !important;
height: 25% !important;
background: black !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
transform: none !important;
}Hi @bibliata
Thanks for your response. In future, It will be great if you share the reference design so we can provide the CSS according to it.
Kind Regards,
CSS was already provided for the needed design.
It will be great if you can include what we submited
as a ready to use FREE option for other users as well//THANKS
The topic ‘Removing overlay box’ is closed to new replies.
