Add additional Block-format into a Theme

Hi

I am trying to enhance my theme by geting an additional block-format - lets call it "Info" - into my theme.

My theme is an adjusted Barceloneta-Theme under Plone 5.0.8 with having some parts changed. I have some additional .less-files, which are defined to be imported into the main barceloneta.plone.less-file in order to mainly overwrite standard theme-settings or add some additional stuff.
-> This was done so by @agitator and works fine so far.

What works:

  • In Site Setup - TinyMCE-Settings, I can add my new block-format into the menu Block styles.

  • Then In the TinyMCE Settings - Formats-section I define:

    "loosli-info": {
       "block": "pre"
    },
    

Now I can apply this "Info"-format to my text, and - as expected - format "pre" is been applied.

BUT the point would be, that I am not using "pre"-format - that one I have already - but rather add an own format with other shading, border, color, font settings, ...

Here is, what I have done already:

  • There is a file called styles.loosli.less, which contains some additional styles we have (and that work). There I wanted to add this style:

    .loosli-info {
        color: @grey-dark!important;
        background: @blue-bg!important;
    },
    

    -> I can properly compile the theme.

  • In TinyMCE-Settings - block styles, (as already before) I have the following line:

    Info|loosli-info
    
  • under TinyMCE-Settings - Formats, the following is added:

    "loosli-info": {
       "block": "loosli-info"
    },
    

When I edit my page, within TinyMCE I can see the "Info"-Entry unter Format - Block, but when I want to apply my setting to a text-paragraph, it does not apply it :frowning:

I could imagine, that I just miss a simple puzzle-piece and would be glad to find it in order to fill the gap between my editor and the correctly formatted text...

Any inputs/help is very much appreciated, thank you!

Kind regards
David

The TinyMCE-Settings - Formats should be:

"loosli-info": {
    "block": "div",
    "classes": "loosli-info"
}
2 Likes

Great, thank you - now it seems a lot better!

Greetings and have a great weekend, David