How to change color and opacity of text-box background for Storyboard

Change Background Opacity

1) Click into “design” and into “edit html/css”

2) Click on “main_style.css” to open the CSS editing page

3) Locate this code:

.text-box-light{
padding: 20px;
background: rgba(255,255,255,0.8);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.text-box-dark{
padding: 20px;
background: rgba(0,0,0,0.8);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

These two code control the background for the LIGHT text box and DARK text box. The highlighted code is where you can edit the opacity. Zero being completely transparent and ONE being complete solid. You can choose a decimal number between zero to one.

4) Save and publish your change

 

Change Background Color

1) Click into “design” and into “edit html/css”

2) Click on “main_style.css” to open the CSS editing page

3) Locate this code:

.text-box-light{
padding: 20px;
background: rgba(255,255,255,0.8);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.text-box-dark{
padding: 20px;
background: rgba(0,0,0,0.8);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

We use rgb color code. You can insert your own rgb color code in the highlighted code above to change the background color

4) Save and publish your change

Tags: