I want to create a text box with a colored semi-transparent background that spans the width of the browser and is responsive. I have attached an example of what I want, done in PhotoShop.
I put the background image into the slide, then added a text layer and applied every one of the standard text styles in Unite Slider. Some of them have the text background, but none have a text background that will run the width of the browser. I considered putting another layer in between the background and the text layer, but I don't know what height and width to make it.
I did some CSS research, and nothing really made much sense to me. I'm not much of a CSS guy.
Thank you but this does not help me. I need the specific responsive CSS to craft a full browser- width background to my text layer.
The example you provide, which I applied to a new element called "excerpt-wide", does not do this. The background still sits only behind the text, not the full width of the slider.
Look again at the photoshopped example that I attached.
I want to create a text box with a colored semi-transparent background that spans the width of the browser and is responsive. I have attached an example of what I want, done in PhotoShop.
Hi,
please show me what you did so far so I can suggest something
Regards,
Igor
Nothing, really, Igor.
I put the background image into the slide, then added a text layer and applied every one of the standard text styles in Unite Slider. Some of them have the text background, but none have a text background that will run the width of the browser. I considered putting another layer in between the background and the text layer, but I don't know what height and width to make it.
I did some CSS research, and nothing really made much sense to me. I'm not much of a CSS guy.
Ed
Hi,
create a new style in the layer configuration and add the following into the Advanced Editor
{ font-size: 30px; color: #ffffff; text-decoration: none; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.7); padding: 10px 10px 10px 10px; width: 100%; display: block; text-align: center; border-width: 0px; border-color: #ffffff; border-style: none; }Regards,
Igor
Thank you but this does not help me. I need the specific responsive CSS to craft a full browser- width background to my text layer.
The example you provide, which I applied to a new element called "excerpt-wide", does not do this. The background still sits only behind the text, not the full width of the slider.
Look again at the photoshopped example that I attached.
Ed
Hi,
if you tried my suggested code you will see that it does exactly what you are looking for and that it is fully responsive
Regards,
Igor
Ah ha!
Wouldn't work in Chrome, so I checked in Firefox... it worked. Went back to Chrome, cleared all history and it worked there too.
Thanks for sticking with me. I appreciate the help. Very simple fix, the best kind :)
Kind Regards,
Ed
Hello,
Awesome! I'm glad the problem is solved.
If you have 5 minutes, we will much appreciate if you would write a review for Unite slider on the JED. You can submit it here:
https://extensions.joomla.org/extensions/extension/photos-a-images/slideshow/unite-slider
Thank you very much!
Regards,
Igor