Marking headline with colored background in Slider Item

This topic has 6 replies, 2 voices, and was last updated 1 hour, 37 minutes ago ago by Andrew Mitchell

  • Avatar: Bleausard
    Bleausard
    Participant
    April 16, 2026 at 10:31

    Dear all at 8theme!

    Thank you for your great themes, support and ideas.

    How can I mark the headlines and add colored text background in the slider items to make them readeable even on mixed up images? Is it possible, maybe by extra class with css? What would be the css command?

    Or any other idea? Please note: in case Elementor has the setting – I do not like to install and use Elementor, as I found it is too confusing for me due to unclear over ridings of settings already done by other builders as it seems.

    Thank you so much for your help!

    Files is visible for topic creator and
    support staff only.
    5 Answers
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    April 16, 2026 at 11:10

    Hello, Bleausard,

    Thank you very much for your kind words and appreciation of our themes, support, and ideas.

    To make the headlines in your slider items more readable on mixed background images, you can indeed use an extra CSS class. For example, you may add a custom class to your slider text element and then apply a background color with some transparency. Here is a sample CSS rule you could use:

    .your-custom-class {
        background-color: rgba(0, 0, 0, 0.5);
        color: #ffffff;
        padding: 10px;
        display: inline-block;
    }

    You can adjust the color, transparency, and padding values as needed. This approach does not require Elementor and can be applied directly through the theme’s Custom CSS section or your child theme’s stylesheet.

    We hope this helps you achieve the desired result. Please let us know if you need any further assistance.

    Best Regards,
    8Theme’s Team

    Avatar: Bleausard
    Bleausard
    Participant
    April 17, 2026 at 12:01

    Dear Andrew,

    thank you so much for your help, it is absolutely appreciated.

    I tried with your suggestion, but could not get, what I desire to. I tried with

    display: inline-block;,

    with

    display: inline; together with box-decoration-break: clone;

    and completely without

    display: inline-block;.

    Different results all over. I attach 3 files in the private section, the one named “desired-result.jpg” (built in Photoshop) is what I would like to get: each line should have it´s own background.

    Thank you again for any thoughts.

    Kind regards, Bleausard

    Files is visible for topic creator and
    support staff only.
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    April 17, 2026 at 13:24

    Hello, Bleausard,

    To accomplish this, you need to split the text “Wirtschaftsportal Neues Deutschland” into two blocks, placing the word “Deutschland” in a separate block. After that, you can add the custom CSS. If you provide us with FTP access, we will be happy to do this for you.

    Best regards,
    8Theme Team

    Avatar: Bleausard
    Bleausard
    Participant
    April 17, 2026 at 17:56

    Thank you, Andrew!

    Splitting the text into two blocks – can I do this on my own and if yes, how do I do this? In in broad outline…

    I am interested in learning. 🙂

    Thank you!

    Best regards, Bleausard

    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    April 20, 2026 at 08:42

    Hello, Bleausard,

    To do this, you will need to go to the slider settings and change the title there. Unfortunately, without access to the administrative part of your website, we are unable to provide further recommendations, as we do not know exactly how your slider is configured.

    Best regards,
    8Theme Team

  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.