Changing transparency/opacity of the slider text background

by Press Customizr|Published 24 September 2013

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

2) Copy/paste the following code

.carousel-caption {
 background: rgba(0, 0, 0, 0.2);
}

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 :

.carousel-caption {
 background: none;
 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

AUTHOR

Press Customizr

Hi! Our team is working everyday to help you publish your WordPress content the best possible way. :) Thanks for visiting our website. You can also visit our knowledge base.

357 posts

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

40 comments

Simone
3 August 2015, 20 h 34 min

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
  5 August 2015, 13 h 17 min
  
  Hello,
  you should be able to access the custom css box navigating through Appearance -> Customize -> Advanced Options -> Custom CSS
  
  Hope this helps.
Brendan
9 July 2015, 3 h 59 min

Hi! I have applied the code in custom CSS to darken the opaque layer – it does not seem to work in this latest version of Customizr Pro 1.1.12 – site: http://www.pocketrocketpower.com

How do I find code that works? thank you!
- Brendan
  9 July 2015, 4 h 16 min
  
  [UPDATE] it seems to affect the mobile (responsive) version but not the desktop version!
  - Nicolas
    9 July 2015, 8 h 09 min
    
    Hi Brendan,
    try the following css snippet :
    
    .item .carousel-caption { background: rgba(0, 0, 0, 0.4); }
    - Brendan
      9 July 2015, 8 h 42 min
      
      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
      - Nicolas
        9 July 2015, 8 h 45 min
        
        Ok, thanks for your feedback.
        This is weird : can you please open a new support topic about this in the Customizr support forum ?
        Thanks
        
        Brendan
        9 July 2015, 20 h 21 min
        
        Hi,
        
        yes I opened the new support topic at the Customizr forum. Thank you!
        
        Brendan
Maryam
1 December 2014, 23 h 07 min

Dear Nicolas,

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

Regards,
Maryam
Maryam
1 December 2014, 22 h 38 min

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
- Nicolas
  3 December 2014, 7 h 13 min
  
  Hi Maryam,
  Can you please post your support request in Customizr support forum.
  We’ll do our best to help and it will benefit to other users facing the same problem(s).
  Thanks for your understanding,
  Nicolas.
Steph
28 November 2014, 2 h 14 min

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
Anjali
9 September 2014, 12 h 14 min

how can i make a slider which is transparent and move on the image
Bunn
11 July 2014, 19 h 01 min

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
  12 July 2014, 9 h 01 min
  
  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! 🙂
Sally Farmer
7 July 2014, 9 h 36 min

Can you remove the background on just one slide but not the others? if so how?
Mickael
4 July 2014, 0 h 19 min

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.
- Richard
  12 July 2014, 3 h 22 min
  
  Mickael you can change slider size by using this: Slider height snippet
  - Nicolas
    12 July 2014, 8 h 29 min
    
    Thanks for the contribution @Richard!
    - Mickael
      12 July 2014, 9 h 07 min
      
      Thank you both! I found a way using your answers.
Jeff
19 June 2014, 11 h 51 min
you can also radius the corners of the slider text background
```
/* darken slider text background and radius box corners */ 
.carousel-caption {
background: rgba(0, 0, 0, 0.4);
border-radius:    10px 10px 10px 10px;
}
```
- Nicolas
  19 June 2014, 15 h 00 min
  
  Yep thanks for the tip Jeff. Nice!
Maryam
2 May 2014, 18 h 03 min

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
27 April 2014, 23 h 16 min

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
  28 April 2014, 6 h 26 min
  
  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
    30 April 2014, 12 h 35 min
    
    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
      2 May 2014, 15 h 36 min
      
      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.
Bob
17 February 2014, 18 h 45 min

Can you remove the call to action from a slider so that I can create the Text I want on the Slider it self ?>
- Nicolas
  18 February 2014, 10 h 09 min
  
  Hi Bob, you can disable the call to action button, just set no links.
  More about slider creation here : http://www.presscustomizr.com/creating-a-slider-with-the-customizr-wordpress-theme/
  Hope this helps?
Hdl
23 January 2014, 1 h 50 min

i need change the size more width of slider text background. can you help me ?
Marianne Munro
5 January 2014, 2 h 48 min

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
  5 January 2014, 9 h 34 min
  Hi Marianne, if you don’t want to see this text background, you can use the following code :
  
  .carousel-caption { background: none; }
  - Marianne Munro
    6 January 2014, 17 h 35 min
    
    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
      6 January 2014, 17 h 41 min
      
      Hi, for IE, here’s the updated code to disable this background :
      
      .carousel-caption { background: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); }
      
      Cheers
      - Marianne Munro
        6 January 2014, 20 h 52 min
        
        That did the trick! Thanks so much!
        
        Nicolas
        6 January 2014, 20 h 57 min
        
        You are welcome Marianne!
Tom Ha.
30 November 2013, 11 h 03 min

Quickly and easily… love it… works great!!!
- Nicolas
  30 November 2013, 11 h 09 min
  
  Thanks Tom. Enjoy the theme
Patrick Burns
1 October 2013, 8 h 31 min

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!
- Dave Bardell
  3 October 2013, 13 h 58 min
  
  I suggest you ask this in the Forum to get a wider audience.

Comments are closed.