Search code examples
csstwitter-bootstrap-3lessui.bootstrap

Alpha channel and opacity in a Bootstrap theme

I am trying to port an accordion control to a ui.bootstrap accordion. Most elements that I am dealing with in the ui.bootstrap version are panel classed elements in vanilla Bootstrap.

I have created (using the theme customizer) css to set the backgrounds, borders and text coloring, but I cannot seem to set the opacity in the customizer, and it seems to have no effect when I hand-set it in css.

I don't know much about Less. Is opacity not supported on these panel elements due to competing or inherited styles that I am just not seeing?

In my css bootstrap theme, I have tried setting things like the following:

.panel-default > .panel-heading {
  color: #ffffff;
  background-color: #000000b3;
  border-color: #000000;
}

For an example of what I am trying to achieve, see below: enter image description here

Solution

  • The issue here is the 8 digit hex color notation being used.

    background-color: #000000b3;

    Whilst there is support in maany modern browsers (not IE or Edge) this may not be recognised by CSS pre-processors or some IDEs.

    enter image description here

    I would suggest that you employ RGBA notation as an alternative or a fallback.

    background-color: #000000b3; 
background-color: rgba(0,0,0,0.7)

    A handy converter can be found right here on Stack Overflow - Convert 8-digit hex colors to rgba colors?