Alpha channel and opacity in a Bootstrap theme

Question

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:

Hex8 isn't well supported...could that be the issue. Why not use RGBA? — Paulie_D, Oct 24 '18 at 10:30
try using '!important;' tag to overwrite the inherited styles. — Prachi Mishra, Oct 24 '18 at 12:57
@PrachiMishra !important did not see to do it interestingly. — CodeWarrior, Oct 24 '18 at 17:49
@Paulie_D RGBA worked like a charm. If you write an answer, I will be sure to mark it and upvote it. — CodeWarrior, Oct 26 '18 at 10:22

score 1 · Accepted Answer · answered Oct 26 '18 at 10:48

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.

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?

Alpha channel and opacity in a Bootstrap theme

1 Answers1