How to change size of tinted box in Glass theme

Figured out how to change the opacity of the glass wrapper (tinted box), but still need to modify the size.
Thank you.

Could you let us know how you changed the opacity of the tinted box?

Thanks

Hi @creative_containers

Use the following CSS rule in Custom CSS option to change the Glass theme glass box’s background color.

.glass-wrapper{background-color: #947878 !important;}

But the above won’t add a transparency to it. To make it transparent you have to use rgb. You can use this tool or this one to generate rgb color codes.

.glass-wrapper{background-color: rgba(160, 80, 80, 0.322) !important;}

Hope this helps.

Thanks!

I added the following to the custom CSS box on the IgniteUp Options screen, which gave me some control. Play with the decimal value at the end of the rgba parameters, adjusting to taste:

.glass-wrapper{
background-color: rgba( 0, 0, 0, 0.522 );
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
margin: 100px 0;
padding: 30px 20px;
}

Hope that helps.

I would still like to know how to change the size of that section.

Hi @kcherbel

To change the width of the Glass box, you will have to edit the template. We are using Twitter Bootstrap classes to keep the width 50% of the page.

If you are familiar with Twitter Bootstrap, please engage in changing the classes for the parent <div> of <div class="glass-wrapper"> in includes\templates\glass\glass.php file.

If you want to make it bigger a bit for desktop browser sizes, change both classes “col-md-6 col-md-offset-3” to “col-md-8 col-md-offset-2” in the above mentioned file.

Hope it helps.
Thanks!

Tried making adjustments, but never liked my results, then realized I had a misconception about the interaction of the glass-wrapper area and the background, so I reverted to the original design width.

However, I did make one adjustment to the glass.php file that I think is an improvement – at least it made a big improvement in my esthetic performance. I added the following line to better place the background for smaller screens:

background-position: center;

Without that line, my BG image was aligned to top-left, so the center of the image was off screen on smaller screens. Now the center of my image is in the horizontal center of the screen, no matter the screen size, plus the BG image scales better to all the screen sizes I tried!