Changing transparency/opacity of the slider text background


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


1) Click on Customiz’it! button and open the Custom CSS panel.

2) Copy/paste the following code

3) the last value (0.2) is the opacity : 1 is black, 0 is transparent. Just try diferent value to find the desired opacity.

 

A quick update following the comments. If you need to fully disable this transparent background, use the code snippet below :

 


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



40 thoughts on “Changing transparency/opacity of the slider text background

  • Simone

    I’m trying to change the transparency of the slider text background. But I can’t figure out how to open up the custom CSS panel so that I can use the code snippet you provide in this post??

    • Rocco Aliberti

      Hello,
      you should be able to access the custom css box navigating through Appearance -> Customize -> Advanced Options -> Custom CSS

      Hope this helps.

      • Nicolas Post author

        Hi Brendan,
        try the following css snippet :

        • Brendan

          Hi Nicolas

          Thank you for your reply – I tried that snippet – it only seems to work when I view the site on mobile! (same result as original snippet)

          Brendan

  • Maryam

    Dear Nicolas,

    I solved the problem of the website via FTP.
    seems like everything is fixed now.

    Regards,
    Maryam

  • Maryam

    Hi Nicolas,

    Could you please someone help me please. It is very urgent. I updated the wordpress and customizer and did some silly changes to int.php and the whole page collapsed, I tried to paste the original codes again but i even lost the access to the domain part. I have absolutely no access to the admin any more. This website is for my a friend.
    all I am receiving is
    Parse error: syntax error, unexpected ‘else’ (T_ELSE), expecting function (T_FUNCTION) in /home/newsk932/public_html/wp-content/themes/customizr/inc/init.php on line 201

    could you please tell me how to get access to the admin again and solve this issue. I am having a heart attack here. please help me.
    website is :
    http://new-skin.co.uk/

    Regards,
    Maryam

  • Steph

    Hello,

    I am trying these codes in Customizr 3.2 and they do not seem to be working. Is there any way I can get these to work or is there another code I can use to make the background of the text darker?
    Thanks

  • Bunn

    LOVE LOVE LOVE the theme…

    I have a few questions.

    Do you have a recommended filesize (and pixel dimensions) for uplioaded images? Slides, gallery images etc? I am an artist and I always worry about my images getting distorted. ead getting started and I’m a bit unsure of the best image specs.

    Is there a way to change the opacity of the rectangular text box in the slider? I know you can change text opacity… but what about the box? Do they change together when you adjust opacity for the text?

    Is tiled galleries via JetPack disabled with this theme? I can’t seem to get the option when I create a gallery.

    Thanks so much for a kickass theme! PLEASE don’t stop updates and support. Not anytime soon 🙂

    I

    • Nicolas Post author

      Hi Bunn,
      1) Image sizes : here are the default image sizes used in Customizr. The theme is designed to keep aspect ratio of all images on any type of screen.

      2) rectangular text box in the slider : this is what this snippet is about 😀

      3) the theme is compatible with the Jetpack gallery. If you enabled it, Customizr will detect it and override the default theme’s gallery rendering.

      Don’t worry, this is not about to stop! 🙂

  • Mickael

    Hi Nicolas, I was wondering how you could change the size of the slider. I went through the customizer part but did not manage to find how to change the width and height. Can you please share some tips.

  • Jeff

    you can also radius the corners of the slider text background

  • Maryam

    Hi Nicolas,
    Thank you very much for your help. I use IE8 on my laptop and it was really good to know that is the reason I see the images rectangular.
    I am relieved now. Many thanks once again.
    Have a great weekend.

  • Maryam

    Hi,

    Thanks for the beautiful Customizr Theme.

    I created a website with WordPress Customizr and it has got a child theme too. I used the codes you mentioned above to remove the background box on the slider and it was working well however recently after I did the updates for the website the box went back to normal and seems like the code is not working any more and I have no idea what else I can do.
    Moreover, the three circle images below the slider changed to rectangles too and I absolutley did no changes to them.
    If you could please help me to solve me these issues, I will be so grateful.

    Many thanks

    • Nicolas Post author

      Hi Maryam, I just checked your website (nice by the way !) and it seems to be fixed?
      Can you share what you did to fix this?
      Thanks!

      • Maryam

        Hi Nicolas,

        Thanks for checking my website and for your comment.
        I realised that I had a mistake in typing the code you left above regards removing the background box on the sliders and I fixed the coding so it started working again. The code I used is
        .carousel-caption {
        background: none;
        filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
        }
        and the part which was missing and was causing problem was the dot before carousel.

        regards the three rectangular images below the slider, I had no succes to solve the problem yet however I realised that they look circular in iphone and ipad but in my Sony Vaio laptop they look rectangular which I still have no idea how to fix it.

        Thank you once again for the beautiful Customizr Theme and if you could please give us a code which can make the rectangular images to circular in all different pcs and laptops, I would be very grateful.

        Many thanks,

        Maryam

        • Nicolas Post author

          Hi Maryam, the circular images uses a CSS3 property that is supported by all modern browsers. Unfortunately some older browsers (like IE 8 or less) don’t support it, that’s why it is displayed rectangular.

  • Marianne Munro

    I still can’t get the ‘box’ behind the text to disappear. I have added the above code to custom css and set the transparency to 0.0 from 0.2 and it is still there. What am I doing wrong?
    Thanks

    • Nicolas Post author

      Hi Marianne, if you don’t want to see this text background, you can use the following code :

      • Marianne Munro

        Thanks. That works good for newer browsers but for some reason still seems to show on slightly older browsers. Is there a code I can add that would eliminate it on those too as my client is using an older browser.

        • Nicolas Post author

          Hi, for IE, here’s the updated code to disable this background :

          Cheers

  • Patrick Burns

    Is it possible to get a box similar to the one in the slider to go around text in pages? I want to put some images as backgrounds in pages, but depending on format, the images either cover half or all of the page box. Sometimes the writing becomes very difficult to read, but in the slider it is ok because of the contrast.

    Many thanks!

Comments are closed.