Breakdance4fun Logo

How to add the missing alignment style for the RichText element

Starting with Breakdance 1.7, the RichText element can now use the good old tinyMCE editor.

One small problem: the image alignment options don't work in the frontend.

Here's an example with a left-aligned image:

Richtext Alignment Example

It will not be aligned outside the TinyMCE editor and the result will look like this:

Lorem ipsum dolor sit amet aliquyam sadipscing aliquyam veniam sit duo sea et. Amet at et voluptua eu eos dolor sit elitr sit sed duis dolor dolor et amet ut. 

Dino Vector AI image

Lorem est sit diam facilisis at vero magna ipsum accusam takimata sanctus luptatum ipsum aliquyam magna sadipscing et duo. Stet est sadipscing.

Sed sit rebum ut diam at magna duis. Eirmod at amet kasd magna erat. Sit accusam elitr sadipscing dolor facilisis et ipsum voluptua gubergren et sea eirmod accumsan ipsum clita ipsum. Supa Mike for President stet stet sanctus accusam dolores gubergren commodo voluptua magna. Liber sit exerci ut sit tincidunt sit dolores duis kasd laoreet no vero sadipscing erat no nonumy commodo.

To fix the issue, we just need to add the missing CSS (in a Code Block or in the Global Settings / Code / CSS Stylesheet) :

.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
margin: 0.5em 1em 0.5em 0;
}

.alignright {
float: right;
margin: 0.5em 0 0.5em 1em;
}

Then it will look like expected, in Breakdance and in the frontend:

Lorem ipsum dolor sit amet aliquyam sadipscing aliquyam veniam sit duo sea et. Amet at et voluptua eu eos dolor sit elitr sit sed duis dolor dolor et amet ut. 

Dino Vector AI image

Lorem est sit diam facilisis at vero magna ipsum accusam takimata sanctus luptatum ipsum aliquyam magna sadipscing et duo. Stet est sadipscing.

Sed sit rebum ut diam at magna duis. Eirmod at amet kasd magna erat. Sit accusam elitr sadipscing dolor facilisis et ipsum voluptua gubergren et sea eirmod accumsan ipsum clita ipsum. Supa Mike for President stet stet sanctus accusam dolores gubergren commodo voluptua magna. Liber sit exerci ut sit tincidunt sit dolores duis kasd laoreet no vero sadipscing erat no nonumy commodo.