How to add class ipsBox to the WYISWYG widget?

[Sonya*]

Hi,

in my theme I have customized the background color of the website, so that it is different from the default. When I add an WYISWYG widget (Pages) to the website, the widget misses the CSS class ipsBox. It means that there is literally no box (borders or background) like in other widgets. How can I add a class to the widget, so that it is displayed the same way as other widgets/boxes?

How it looks like now:

How I would like to have it:

Thank you!

[bfarber]

You'd have to edit as HTML (either from the AdminCP, or by using an account that can post HTML), and then manually wrap the HTML contents of the WYSIWYG block

<div class='ipsBox'>
  whatever you already have
</div>

 

[Sonya*]

@bfarber, this breaks layout a bit. As the box has not the same width as the other boxes on the site. It is slightly smaller as the class is inlined. I have found another "simple solution".

I have edited the template cms->front->widgets->Wysiwyg and added ipsBox to the widget itself:

<div class='ipsWidget_inner ipsPad ipsBox ipsType_richText' data-controller='core.front.core.lightboxedImages'>
	{$content|raw}
</div>

It looks the same way now as other boxes.

[Daniel F]

Have you tried to use 

div class='ipsWidget_inner ipsPad ipsBox ipsType_richText' data-controller='core.front.core.lightboxedImages'>
	content
</div>

Instead of

Quote

<div class='ipsBox'>
  whatever you already have
</div>

?
There shouldn't be a need to edit the widget template

[Sonya*]

I have edited the template by adding ipsBox along with ipsWidget. It looks good now. No need to edit HTML while creating a WYISWYG block and the block itself has the same width and style as other boxes. By adding HTML into widget content I have slightly different width of the box as ipsWidget has padding.

[kmk]

On 9/10/2019 at 2:22 AM, Daniel F said:

Have you tried to use 

div class='ipsWidget_inner ipsPad ipsBox ipsType_richText' data-controller='core.front.core.lightboxedImages'>
	content
</div>

Instead of

?
There shouldn't be a need to edit the widget template

This work fine??? 

[Sonya*]

11 hours ago, kmk said:

This work fine??? 

I have not tried this as my moderators do not have any HTML knowledge and in this case they need someone who would add it for them. Additionally they tend to break HTML while editing the widget, as they do not use HTML view for it.