[shaun2k]

Hi,

I wanted to have an <aside> container in my posts and found out that it was possible to add a  paragraph format by adding  custom formats  to the “customElements” in the theme’s config.json.

Add to "customElements" in config.json
----------
{
   label": "Aside block-right",
   cssClasses": "post__aside",
   selector": "aside"
}

Custom css
----------
.post__aside {
  margin-top: 1.7rem;
}
@media all and (min-width: 37.5em) {
  .post__aside {
    float: right;
    margin: 1.7rem 0 1.7rem 3.4rem;
    max-width: 40%;
    position: relative;
    z-index: 1;
  }
}
.post__aside > :nth-child(1) {
  margin: 0;
}

However, unlike the “Info”, “Highlight”, “Success” and “Warning” paragraph formats which worked on a <p> paragraph selector, the <aside> paragraph style works only if there was already a block of text marked out with <aside> and </aside> selectors. End result being <aside class=”post__aside”>

My question is: how can we add <aside> as a block format like the “Pre”, “Code” or “Blockquote” paragraph blocks.

Thanks

[Tomasz Dziuda]

Hi,

You can try to override field:

block_formats: ‘Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Address=address;Pre=pre;Code=code;Blockquote=blockquote’,

In the TinyMCE config – maybe it will help for your case

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[candidexmedia]

Tomasz Dziuda wrote:

Hi,

You can try to override field:

block_formats: ‘Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Address=address;Pre=pre;Code=code;Blockquote=blockquote’,

In the TinyMCE config – maybe it will help for your case

Hi Tomasz! How can I get this to work? I’ve consulted the “How to add custom config or JS for post editor?” page, “Changing user formatting controls” and Content Formatting. I’ve tried editing the tinymce.script.js and tinymce.override.json located in the theme root, to no avail. Adding customElements for the Editor in config.json was a breeze, but adding custom HTML tags is proving to be very difficult…

[Author]

Posts