Search code examples
phpcsswordpresssidebar

Setting transparent background in PHP or CSS

I'm using a Wordpress plugin in sidebar that forces me to select a background color (currently #ffffff) and I'm trying to override that option to achieve transparency. I am not able to simply leave that field blank in my Widget options. I have tried to modify via CSS with no luck. I believe the relevant code is below:

?>
            <li style="background-color: <?php echo $bg_color; ?>" class="<?php echo $icon_filename; ?>"><a target="_blank" href="<?php echo $$icon_url; ?>"><?php echo $icon_filename; ?></a></li>
            <?php
            }
        }
        ?>

Thanks in advance!

Solution

  • Set the opacity using rgba()

    background-color: rgba(255, 255, 255, .5);

    It's not widely supported because it is a CSS3 property, so you can set background-color or use opacity instead, but if you are using opacity it will also make the child element opaque, but there are many hacks where you can use opacity and prevent child elements from becoming opaque too

    If you don't need the background at all simply use background: none;

    Demo