Jump to content

How to add class ipsBox to the WYISWYG widget?


Sonya*

Recommended Posts

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:

screenshot-localhost-2019_09.07-09-55-15.png.ba57718e674e5d5adf36b1e0aa8ac979.png

How I would like to have it:

screenshot-localhost-2019_09.07-09-56-14.png.cef0a45c1f77678636b748ee200aee97.png

Thank you!

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 weeks later...
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??? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...