# CSS formatting in the Prismic CMS

**URL:** <https://community.prismic.io/t/css-formatting-in-the-prismic-cms/125>\
**Category:** Prismic for Content Creators\
**Created:** [April 9, 2020, 2:07pm UTC](https://community.prismic.io/t/css-formatting-in-the-prismic-cms/125 "2020-04-09T14:07:26Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![tim](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/tim/32/8921_2.png) [@tim](https://community.prismic.io/u/tim)\
**Post date:** [April 9, 2020, 2:07pm UTC](https://community.prismic.io/t/css-formatting-in-the-prismic-cms/125/1 "2020-04-09T14:07:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tim](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/tim/32/8921_2.png) [@tim](https://community.prismic.io/u/tim)\
**Post date:** [April 9, 2020, 6:26pm UTC](https://community.prismic.io/t/css-formatting-in-the-prismic-cms/125/2 "2020-04-09T18:26:40Z")

</div>

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:

```
.editor-wrapper .widget-StructuredText .ProseMirror>p {
    margin-bottom: 20px;
    line-height: 26px;
}

.editor-wrapper .widget-StructuredText .ProseMirror>h1, .editor-wrapper .widget-StructuredText .ProseMirror>h2, .editor-wrapper .widget-StructuredText .ProseMirror>h3, .editor-wrapper .widget-StructuredText .ProseMirror>h4, .editor-wrapper .widget-StructuredText .ProseMirror>h5, .editor-wrapper .widget-StructuredText .ProseMirror>h6 {
    margin-bottom: 20px;
    line-height: 1.4;
}

```

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.

---

<div class="post-metadata">

**Author:** ![Levi](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/levi/32/24_2.png) [@Levi](https://community.prismic.io/u/Levi)\
**Post date:** [April 10, 2020, 9:18am UTC](https://community.prismic.io/t/css-formatting-in-the-prismic-cms/125/3 "2020-04-10T09:18:53Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![tim](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/tim/32/8921_2.png) [@tim](https://community.prismic.io/u/tim)\
**Post date:** [April 10, 2020, 9:27am UTC](https://community.prismic.io/t/css-formatting-in-the-prismic-cms/125/4 "2020-04-10T09:27:36Z")

</div>

Hi @Levi, thanks for following up on this.

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.

Cheers

---

<div class="post-metadata">

**Author:** ![tim](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/tim/32/8921_2.png) [@tim](https://community.prismic.io/u/tim)\
**Post date:** [April 10, 2020, 1:07pm UTC](https://community.prismic.io/t/css-formatting-in-the-prismic-cms/125/5 "2020-04-10T13:07:13Z")

</div>

Hi @Levi,

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!

---

<div class="post-metadata">

**Author:** ![Levi](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/levi/32/24_2.png) [@Levi](https://community.prismic.io/u/Levi)\
**Post date:** [April 10, 2020, 1:21pm UTC](https://community.prismic.io/t/css-formatting-in-the-prismic-cms/125/6 "2020-04-10T13:21:12Z")

</div>

@tim Thanks, I’ll pass this feedback along to the Product/Dev team to see if there is anything they can do in the meantime.

---

<div class="post-metadata">

**Author:** ![tim](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/tim/32/8921_2.png) [@tim](https://community.prismic.io/u/tim)\
**Post date:** [April 10, 2020, 4:00pm UTC](https://community.prismic.io/t/css-formatting-in-the-prismic-cms/125/7 "2020-04-10T16:00:39Z")

</div>

Thanks @Levi, that would be awesome : )

---

<div class="post-metadata">

**Author:** ![tim](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/tim/32/8921_2.png) [@tim](https://community.prismic.io/u/tim)\
**Post date:** [May 13, 2020, 12:46pm UTC](https://community.prismic.io/t/css-formatting-in-the-prismic-cms/125/8 "2020-05-13T12:46:44Z")

</div>

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 : )

---

<div class="post-metadata">

**Author:** ![Levi](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/levi/32/24_2.png) [@Levi](https://community.prismic.io/u/Levi)\
**Post date:** [May 14, 2020, 9:00am UTC](https://community.prismic.io/t/css-formatting-in-the-prismic-cms/125/9 "2020-05-14T09:00:12Z")

</div>

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:

> **[User JavaScript and CSS](https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld)**
>
> User JavaScript and CSS on any website

---

<div class="post-metadata">

**Author:** ![tim](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/tim/32/8921_2.png) [@tim](https://community.prismic.io/u/tim)\
**Post date:** [May 14, 2020, 11:15am UTC](https://community.prismic.io/t/css-formatting-in-the-prismic-cms/125/10 "2020-05-14T11:15:47Z")

</div>

Thanks @Levi, thats a shame ☹

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/](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!

---

<div class="post-metadata">

**Author:** ![Levi](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/levi/32/24_2.png) [@Levi](https://community.prismic.io/u/Levi)\
**Post date:** [September 21, 2020, 4:00pm UTC](https://community.prismic.io/t/css-formatting-in-the-prismic-cms/125/13 "2020-09-21T16:00:37Z")

</div>



---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [February 22, 2021, 12:55am UTC](https://community.prismic.io/t/css-formatting-in-the-prismic-cms/125/14 "2021-02-22T00:55:28Z")

</div>



---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [February 22, 2021, 3:47pm UTC](https://community.prismic.io/t/css-formatting-in-the-prismic-cms/125/15 "2021-02-22T15:47:16Z")

</div>



---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 12:49pm UTC](https://community.prismic.io/t/css-formatting-in-the-prismic-cms/125/16 "2021-12-09T12:49:23Z")

</div>