Okay
  Public Ticket #1211443
CSS in the slider
Open

Comments

  • Ed started the conversation

    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. 

    Attached files:  BizLaw.jpg

  •  100
    Igor replied

    Hi,

    please show me what you did so far so I can suggest something

    Regards,
    Igor

  • Ed replied

    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

  •  100
    Igor replied

    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

  • Ed replied

    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

  •  100
    Igor replied

    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

  • Ed replied

    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

  •  100
    Igor replied

    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