-
Posts
-
Hello,
I’m trying to find the CSS code to change the attributes for the “Framed Text” that appears behind the Caption Title and Caption Text on a Fullwidth Easy Slider. The default is a black box set to about .6 opacity. I’d like to do a few things. Change the opacity, change the color, change to rounded corners and blur the box so it doesn’t have sharp edges and blends into the background more.
Would you please send me the CSS script that I can alter? Thank you!
– John
Hey John,
Do you want this applied on all fullwidth easy slider? or it’s specific? if specific then please give us a link to your page containing the said slider, so we can try to give you css code that should help.
Best regards,
NikkoHi John,
Could you please attach a mockup of what you’re trying to achieve?
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaHello,
There is a link in the Private Box below to the development website. What I’m trying to do in the Fullwidth Slider is transform the black box behind the white text. Here are the attributes I’d like:
– Blurred box
– Change the opacity to make it more transparent
– Make the corners of the black box rounded
– Change the color..Let me know if that’s enough information. Otherwise I suppose I can mock it up in Photoshop for you.
Thank you!
~ JohnHi John,
Thanks for the clarification. Please try the following in Quick CSS under Enfold->General Styling:
.caption_framed .slideshow_caption .avia-caption-title { background: rgba(0,0,0,0.3); border-radius: 5px; color:red; }Best regards,
RikardThank you. This is very helpful to start from. There are a couple of other attributes I’d like to manipulate. First, is there a way to blur the framed black box behind the caption title? Not the title text itself but the black box behind it.
Second, this script above only adjusts the Caption Title and not the Caption Text under the title. Would you please supply the script for the Caption Text as well.
Also, what file in the Editor can I find these scripts for later reference?
Thank you very much!
– JohnHi John,
We apologize for the late response, try using this code for both title and caption below it:
#top .avia-slideshow-inner .caption_framed .slideshow_caption .avia-caption-content p, #top .avia-slideshow-inner .caption_framed .slideshow_caption .avia-caption-title { background-color: rgba(0,0,0,0.2); border-radius: 10px; }to change the color, try adjusting rgba (Red, Green, Blue, Alpha) values the 0,0,0 returns a black color and 255,255,255 (highest value) returns white, just try adjusting those, the 0.2 value is for opacity/transparency, lowest value is 0 and highest is 1, if you need to make it more transparent try to use 0.1, or if you think it’s too transparent set it higher like 0.3.
As for border radius, 0 value will result to rectangular edge, if you give it higher value like 12px, it will be more rounded.
Hope this helps.Best regards,
NikkoThank you very much! You guys are always so good at responding to questions. Much appreciated!
– John
Hi John,
Glad we could help and thanks for the kind words :-)
Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardJust one more thing regarding this thread that didn’t get answered. Is there a way to blur the black boxed background? I’m not talking about transparency/opacity settings, but spreading and blurring the box edges like one would do in Photoshop.
Thank you. – John
Hi jgdoyle1,
There’s a blur feature for css, however it does blur everything inside the element not just the background image, so it’s not suitable solution.
This can still be done, however more knowledge on both html will be needed to do this modification and a lot of modification in enfold structure to do it, though we’d like to help you as much as we can, this would take a lot of time to do and outside the scope of our support :(Best regards,
Nikko
- The topic ‘Fullwidth Easy Slider – Change Framed Text attributes’ is closed to new replies.