Marking headline with colored background in Slider Item

This topic has 16 replies, 3 voices, and was last updated 3 weeks ago ago by Tony Rodriguez

  • 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.
    15 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

    Avatar: Bleausard
    Bleausard
    Participant
    April 20, 2026 at 17:51

    Thank you. I will come back to you in a few days with the final tweaks for the project.

    Have a nice time. Best regards, Clem

    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    April 21, 2026 at 08:25

    Hello, Bleausard,

    Thank you for your message. We appreciate your update and look forward to receiving the final tweaks for the project.

    Have a wonderful day.

    Best Regards,
    8Theme’s Team

    Avatar: Bleausard
    Bleausard
    Participant
    April 24, 2026 at 08:52

    Dear Andrew,

    here I come back sooner than expected. I unfortunately encountered some weird problem on my website, where I would need immediate action, because doing further work could be useless in case this is a fatal problem (which I don’t expect, though).

    After a quite trivial action (I remember exactly and can explain if necessary) suddenly and with no intend the typo of parts of the site changed. 2/3rd of the page now show italic typo. I went to the Customizer and again set non italic typo, but it did not stick in the system anymore. The italic typo shows up all over the page. I attach 2 screenshots showing the difference. On 3 pages it is normal, on 8 or 9 pages all typo is italic. Also the red button top right is italic on all pages, which should have normal typo.

    Also from that moment on on desktop device the change from desktop view to mobile view did not jump over when reducing the with of the browser window, which it did before. On mobile device the mobile version still shows up. I have no idea what could have caused this behaviour.

    I kindly ask you to look into it and rebuild the setting if necessary to show all typo in normal style.

    During this you may also set the 2-block style for the headlines on the starting page like we talked before (see above conversation).

    Thank you so much for your help.

    Best regards
    Bleausard

    Please contact administrator
    for this information.
    Files is visible for topic creator and
    support staff only.
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    April 24, 2026 at 09:07

    Hello, Bleausard,

    Thank you for providing access. We have made the necessary changes; please check if the issue has been resolved. Also, kindly remember to clear your browser cache.

    Best regards,
    The 8Theme Team

    Avatar: Bleausard
    Bleausard
    Participant
    April 24, 2026 at 10:16

    Dear Andrew,

    thank you, but unfortunately neither the typo problem nor the headline background has changed (2 different browsers, both cache cleared). On mobile no headlines appear at all.

    Please check again from your end. Thank you.

    Best regards,
    Bleausard

    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    April 24, 2026 at 16:13

    We have resolved this issue by adding the following custom CSS.

    @font-face {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url('/wp-content/fonts/poppins/font.woff2') format('woff2') !important;
    }
    body {
    
        font-family: 'PoppinsFix', sans-serif !important;
    
    }

    Best regards,
    8Theme Team

    Avatar: Bleausard
    Bleausard
    Participant
    April 24, 2026 at 16:56

    Dear Andrew,

    Thank you so much. The typo problem seems to be solved, which was most important for now. Great!

    For the other tweaks I will come back to you next week. Have nice weekend.

    Best regards,
    Bleausard

    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    April 24, 2026 at 17:34

    Dear Bleausard,

    Thank you very much for your message. We are glad to hear that the typo issue has been resolved, as it was the most important matter for now. That’s great news!

    Please feel free to reach out to us next week regarding the other adjustments.
    Wishing you a pleasant weekend.

    Best Regards,
    8Theme’s Team

    Avatar: Bleausard
    Bleausard
    Participant
    May 13, 2026 at 12:04

    Thanks for the support! My topic “Marking headline with colored background in Slider Item” has been successfully resolved.

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 13, 2026 at 12:04

    Dear Bleausard,

    We really appreciate your time and engagement within the WordPress & WooCommerce community

    Your feedback drives every improvement we make in XStore — helping us deliver a smoother and more flexible experience with each update.

    Your input makes a real difference.

    Topic closed.
    The 8Theme Team

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

The issue related to '‘Marking headline with colored background in Slider Item’' has been successfully resolved, and the topic is now closed for further responses

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