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:
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?
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 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 .
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!
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>