Styling not applied to preview panel

Hi there!

I’ve built a blog using Hugo with my own custom template. To manage my content I’ve added netlify cms, so far so good. Everything seems to work as intended and I’m able to create and publish new posts through the cms.

My problem comes when previewing my posts in the preview panel.
The preview have no style:
nostylenetlifycms

I tried to follow the instructions here and added a style.css to my static/admin folder.

My admin/index.html looks like this:
`

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    <!-- Include the script that enables Netlify Identity on this page. -->
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
    <script src="https://sharadcodes.github.io/hugo-shortcodes-netlify-cms/dist/hugo_shortcodes_netlify_cms.js"></script>
    <script>
      CMS.registerPreviewStyle("/style.css");
    </script>
  </body>
</html>`

However my preview is still displayed without any styling.
What am I missing?

Thanks.

Assuming you’re using classes and such to apply styling, you’ll have to recreate your html using custom preview templates: https://www.netlifycms.org/docs/customization/#registerpreviewtemplate.

The hugo starter template has some great examples: