1 ACCEPTED SOLUTION
I found a few non-invasive ways of doing this.
This method adds a colored container and works with both static and dynamic content blocks.
<style>
.myContainer {
background: #3399FF;
width: 100%;
height: 100%;
position: absolute; //These last 3 are necessary
top: 0; //or else a thin white ribbon
left: 0; //will be around the perimeter.
}
</style>
<div class="myContainer">
<!-- Your Contents Here -->
</div>
Alternatively, here is a method using jQuery to change the widget's actual background's color. This only works in dynamic content blocks, not static ones.
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<script>
<!-- Set Background Color -->
$j('#myDisplay').closest('[data-uuid]').children(':first').css('background', '#3399FF');
</script>
<div id="myDisplay">
<!-- Your Contents Here -->
</div>
</j:jelly>
Those two code sections produce the following result, assuming you hid the widget's header. (Which is my intention anyhow for this visual, as no widget header belongs in my use case.)
I hope that helps someone out!
Kind Regards,
Joseph
