Static HTML Content Block Background Color

[JosephW1]

Hello,

How do I change the entire background of a Static HTML content block's widget? The background of the whole widget.

Thank you for your time!

Kind Regards,
Joseph

[Maik Skoddow]

Hi @JosephW 

I played a while and found that solution:

(1) Set a title background color at the widget configuration

(2) Use the same background color for a HTML/CSS extension in a Static HTML content block:

The result looks like this (not completed yet)

Kind regards
Maik

If my answer replied your question please mark appropriate response as correct so that the question will appear as resolved for other users who may have a similar question in the future.

[Maik Skoddow]

Hi @JosephW ,

another approach is to use CSS-Code inside the Static Block HTML:

And the result looks like this (all widgets have a new background color)

Kind regards
Maik

If my answer replied your question please mark appropriate response as correct so that the question will appear as resolved for other users who may have a similar question in the future.

[JosephW1]

Thank you! Very creative. This approach is too aggressive for me, since it affects the entire grid stack.

[major li]

you may try something like :

<style>
  body {
  background-color: your static content color;
}
</style>

[JosephW1 · 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