Django + Froala: style fix

Froala provides a great WYSIWYG editor for Django admin, but on page the styles for django-froala-editor didn’t work no matter what I tried. It didn’t look like what I get at all.

At some point, it was clear that providing a quick fix would suffice. I made a short style sheet to make these styles work on Django templates. It is my example that fits my needs. I don’t eliminate the fact that I failed to find an organic solution to this via package files.

Styles for Froala I suggest

        .fr-img-wrap {
            padding: 10px 0 0 0;
        .fr-img-wrap img {
            max-width: 200px;
            border: none;
            margin-bottom: 10px;
        .fr-fil, .fr-fir {
            padding: 10px;
            border: solid lightgrey 1px;
            margin: 10px;
            max-width: 220px;
            border-radius: 10px;
        .fr-fil {
            float: left;
            margin-right: 20px;
        .fr-fir {
            float: right;
            margin-left: 20px;

This gets me this result that can be used for the journal/company blog application:

Example of a company Blog template “Katya tests the journal”

It works with captions as well:

Example with a caption “Meme text”


The wider the screen the better it works. Here is a showcase:

IPhone 5/SE (decent), IPhone 6/7/8 or IPhone X/11 (can be regulated with an elaborate image positioning), IPhone 6/7/8 Plus (the best as is the widest)

Caption just elongates the picture are so it is fine on smaller screens too:

IPhone 5/SE, IPhone 6/7/8 or IPhone X/11, IPhone 6/7/8 Plus

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.