Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #375346

    is there a possibility to create a transparency for the background of a promo box or create a transparency for a text block?

    I would like to include a slightly transparent text section on to a background image using the color section for it:

    The idea to make it look nice on a mobile, since the text overlaps the image:

    Thanks in advance for your reply!


    Hi poppenhaeger!

    Add this to your custom CSS.

    .av_promobox { background: transparent !important; }



    Hi Elliot,
    many thanks.

    Is there a possibility to
    a) remove the border of the promobox?
    b) make the box semi-transparent? (the 100% transparency does not solve my problem)




    Replace the code with this:

    .av_promobox { background: rgba(255,255,255,.8); border: none; }



    Hi Ismael, thanks,
    but your code doesnt’ add any semi-transparency to the promo box, it just removes the border right?
    Is there any way to add a semi (or gradual) transparency to the box?
    (If I’m totally wrong, please accept my immediate apology and correct me).

    Best regards



    You can adjust the transparency with the last value (.8).

    I checked your link again and it looks like your using textblock elements there though so your probably wanting something like this.

    .avia_textblock p {
      background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5) !important;
      padding: 10px;

    Best regards,


    Hi Elliott,
    I have more or less the same question:

    We’d like to have the background partly transparent, for example here:

    I used the above quick css: .av_promobox { background: rgba(255,255,255,.8); border: none; }

    But nothing shows.
    Is it correct to enter it under: Enfold: allgemeines Styling: Main Content, oder alternate Content?



    Which part of the page would you like to apply a transparent background to? A screenshot will help. You need to add custom css codes to the Enfold > General Styling > Quick CSS field.




    I am not sure if this is the right topic for my problem, but I want to know if I somehow can make my icon boxes transparent?

    I have tried with this code in quick css, but it does not seem to fix my problem:

    .page-id-2449 .main_color.iconbox_top .iconbox_content {
    background: rgba(255,255,255,.8);



    Please try this instead:

    .page-id-2449 .iconbox_icon {
      background: rgba(255,255,255,0.8) !important;

    Best regards,



    Thanks for the quick reply. It still does not work. The box around the text is still solid white.

    Not that is concerns my issue but I guess it would be the same problem if other people wanted it to be another solar than white. In this case the perfect scenario would be a 50%ish transparency.

    Do you know what might be wrong?

    Thank you,


    Hi andreasjustesen,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    .page-id-585 .main_color.iconbox_top .iconbox_content {
      background: rgba(255, 255, 255, 0.3);

    If you need further assistance please let us know.
    Best regards,


    Still not working..
    Is it the code that are not working or is it another issue?


    Hi andreasjustesen,

    I think we misunderstand each other. The code is working, but probably you want a different thing. Could you please attach a mockup of what you’re trying to achieve?

    View post on

    Best regards,

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.