Are we able to adjust the css formatting of the Rich Text output in the Prismic CMS?
For example, I'd like to give some more bottom margin to the heading and paragraph tags / blocks, just to make them spaced out a little nicer.
The ordered/unordered lists seem to have generous vertical margins, but all the other block elements tags are a little tight.
I also find that if the paragraph bottom margins are too small, then clients can get confused between line breaks and paragraphs, and will also add unnecessary line breaks between headings and paragraph elements due to the lack of visual space.
For example, if you were able to add bottom margins to only the paragraphs and header tags, it would make the world of difference to the editing experience:
And in the future, it would be even better still if you could allow us to upload / inject our own custom css. Then we can customise the sizing / margins / colors to more closely match the live environment, making it more intuitive for clients and content managers.
Hi @tim, thanks for reaching out about this. At the moment there isn’t any way to modify the CSS of the Prismic UI except for using a browser plugin/extension where you can manually add it.
I’ll add this to our feature request tracker, though, as a possible improvement for the future. Thanks for the suggestion!
And thanks for adding it to the feature request tracker. This would be a massive value add IMHO, especially the extra bottom margins on the paragraphs and headings.
I forgot to ask - is there any way the Prismic devs are able to tweak the CSS in the Rich Text WYSIWG editor in the meantime? By adding some more bottom margin to the headings and paragraphs?
I’ve just had 2 different users try editing content I setup, and as predicted they are finding it difficult to see a clear difference between paragraphs, and also between headers and paragraphs. This may result in poor quality formatting and/or unnecessary line breaks which I’m trying to avoid.
Anything you could do to assist would be much appreciated!
Hi @Levi, I don’t suppose there is any update on this one?
If theres anything I can do to assist I’d be more than happy to. e.g. writing some boilerplate css, or testing etc.
Even if it was somehow possible to add some custom css to the JSON Editor, that would be awesome. Or perhaps uploading a stylesheet to the media library, or having a stylesheet upload area in the settings, that would simply load last and target the content within the WYSIWYG editor.
I know this would be super useful for a lot of users, and I know it would make my clients very, very happy : )
Hi @tim, thanks for following up. I know that there are no plans currently to do something like this, sorry. But I’ve added it to our feature request tracker as a possible improvement for the future.
For now, I think the best option would be to use a browser extension to modify the CSS of the site. Something like this one for chrome should allow you to add your own custom CSS:
Personally I wouldn’t feel comfortable asking my clients to install a browser extension for this purpose, but I guess everyone feels differently about this.
Since there are some existing css bugs with RTL text and the editor, I’m hopeful you can add this simple functionality at the same time as fixing those? Since they would be editing the same CSS file, might as well kill 2 birds with one stone. That would be awesome!
edit - It looks like you are utilising ProseMirror (https://discuss.prosemirror.net/) for the main editor? The styling of the content within <div contenteditable="true" class="ProseMirror"> should be very simple as per their instructions, but if you need me to whip up something I’d be more than happy to!
