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:

Hello,
I opened an issue on GitHub because I’m in a similar situation.
I do use classes in my CSS, but even when I tried with some simple raw CSS only to change the body background, nothing applied to the preview panel…

Thanks for your help!

Hi, I thought I’d add my piece here since I’ve also been a victim to this issue :joy:

Do the previews work locally? (LocalHost)

Unfortunately after weeks of troubleshooting I just created a new site and copied over the majority of the files from the existing one.

Look I know this isn’t really the answer you are looking for but… hey It worked for me and didn’t really have a big impact.

Here is my post.

Thanks for sharing!
Well, I’m not on Netlify, I host my site on GitLab pages, so not sure how I could create a new site, maybe creating another repo :thinking:.
I haven’t tested the CMS locally, I’ll play a bit with my config to allow me to do this and see if it helps.
Too bad there is no solution for this in your different threads and issues, hope I’ll find my way out!

1 Like

Yea, I wish you the best. If you find a solution make sure to message me :))

Kyle.

Testing locally the CMS helped me, thanks again !
I figured it out, it was caused be my locale registering, which need to be in another script block to avoid breaking the style. Weird!

<script>CMS.registerPreviewStyle('https://my-blog.com/css/my-blog.css');</script>
<script>import { fr } from 'netlify-cms-locales';CMS.registerLocale('fr', fr);</script>
1 Like

That’s great news!

I’ll link to your post in my thread as the solution :partying_face: