Okay
  Public Ticket #1987465
getting a background behind text on slider
Open

Comments

  • lparrella14 started the conversation

    Really loving the theme! It's very simple to use, great work. I have what I think are two pretty basic (probably css) questions... 

    1.) I was hoping you'd be able to tell me how to put some type of background behind the text on the homepage slider. That way it's easier to read.

    2.) Also is there a way I can put the text at the bottom of the slider (of course my client wants to see both...), or maybe even right under the slider like it looks on mobile (example attached). 

    Side question: is there a way to center the "company information" at the top of each page when it's on a mobile device?

    Attached files:  Screen Shot 2019-04-24 at 3.35.44 PM.png

  •  619
    Barry replied

    Hi there,

    Thank you for your compliment!smile.png

    1. To add some background behind the slide captions please add the following CSS to Appearance -> Customize -> Additional CSS:

    @media (min-width: 992px) {
        .jumbotron.carousel .carousel-text {
            background: rgba(0,0,0,0.4);
            padding: 20px;
        }
    }
    

    2. Moving the captions to the bottom of the slide will be possible with the following CSS:

    /* Move slide captions to bottom */
    @media (min-width: 992px) {
        body.header-wide .jumbotron.carousel .carousel-text {
            -webkit-transform: translate(0%, -20%);
            transform: translate(0%, -20%);
        }
    }
    

    You can change the minus 20% value to your own needs.

    Or if you want to display the captions below the slide image (like on mobile screen) use the following CSS instead:

    /* Move slide captions below images */
    @media (min-width: 992px) {
        .jumbotron.carousel .carousel-text {
            position: relative;
            padding: 50px 0;
        }
        body.header-wide .jumbotron.carousel .carousel-text {
            -webkit-transform: none;
            transform: none;
        }
    }
    

    3. The following CSS will center the topbar details on mobile:

    @media (max-width: 992px) {
        .topbar {
            text-align: center;
        }
    }

    Best regards,
    Barry

  • lparrella14 replied

    Hey Barry,

    Thanks so much for the detailed CSS! Been waiting on our client to get some feedback with this, and these are the questions that arose.

    1. Coloring behind homepage slider text: is there a way to make the transparent colored background smaller (width-wise)? So it doesn't fill up so much space across the image?

    2. Making the text go to the bottom of the picture: that CSS didn't make any changes for me. I even tried it in different sized browsers.

    3.) Getting the text below the homepage slider: I'm attaching a screenshot for this one. But if I increase the padding it just sends the black border lower on the page without really changing where the text is located. 

    4.) The center text works perfectly. But was just wondering if there's a way to just add a "click to call" button when it's on mobile? If not, no biggie.

    Thanks so much for the help so far too!

    Attached files:  Screen Shot 2019-05-10 at 3.25.57 PM.png

  •  619
    Barry replied

    Hi there,

    You're welcome!

    From the attached screenshot I see that the website is not the website that's added as "related" to this ticket which is  http://somd.pltester.com. Can you provide me the correct url of the website we're talking about.

    1. This will be possible by setting a fixed width to the caption element:

    @media (min-width: 992px) {
        body .jumbotron.carousel .carousel-text {
            width: 600px!important;
            transform: translate(45%, -50%)!important;
        }
    }
    

    If you want to adjust this you can change the 600 value. Please note that you also need to change the 45 value to keep the element centered.

    2. After reading this point and point 3 I don't understand what you're trying to achieve. Unfortunately you can't do both. Do you want to change the position of the texts more to the bottom of the image, or do you want to move the entire text caption element below the image (like on mobile screens)?

    To change the position of the texts more to the bottom area of the image you can change the minus 50% value in the CSS from point 1, for example:

    @media (min-width: 992px) {
        body .jumbotron.carousel .carousel-text {
            transform: translateX(45%) translateY(-20%)!important;
        }
    }

    3. But if you want to move the entire text caption element below the image you need to use this one instead:

    @media (min-width: 992px) {
        body .jumbotron.carousel .carousel-text {
            position: relative!important;
            transform: translateX(45%) translateY(0%)!important;
        }
    }
    

    As described in point two you have to pick one of the two options, both is not going to work.

    4. This is possible but requires a little bit of CSS to hide the button on mobile screens.

    You can add the following shortcode to the content textarea of the slide:

    [button href="tel:123456"] Tap to Call [/button]
    

    Then you can add the following custom CSS to hide the button from desktop screens:

    @media (min-width: 992px) {
        body .jumbotron.carousel a[href^="tel:"] {
            display: none!important;
        }
    }
    

    Best regards,
    Barry

  • lparrella14 replied

    Well our one client @: wm.pltester.com wants the wording under the image. and the client @ somd.pltester.com wants the wording to have the colored background. So we're not doing both to the same url, we're doing one for each of the clients. The other url is wm.pltester.com I didn't even think about the urls making it different. 

  •  619
    Barry replied

    Hi there,

    Unfortunately I didn't know that until I opened the attached screenshot. It is easier and more effective to provide custom CSS when I can inspect the code on the correct website. All the previous CSS I wrote in this ticket is based on the somd.pltester.com, but wm.pltester.com has a different header layout for example and that requires a different CSS selector to target the elements for the slidersmile.png

    1. Make the wording under the image for wm.pltester.com

    @media (min-width: 992px) {
        .jumbotron.carousel .carousel-text.center {
            position: relative;
            padding: 50px 0;
            transform: translate(45%, 0%)!important;
        }
    }

    If you would like to remove the dark background behind the texts please also add:

    .jumbotron .item { background: #fff; }
    .jumbotron.carousel .carousel-text h1 { color: #464646; }
    

    2. Make a transparent colored background behind the wording for somd.pltester.com (and reduce the transparent width)

    @media (min-width: 992px) {
        body.header-wide .jumbotron.carousel .carousel-text {
            width: 600px!important;
            transform: translate(45%, -50%)!important;
            background: rgba(0,0,0,0.5);
            padding: 30px;
        }
    }

    Please let me know if that did the trick.

    Best regards,
    Barry