ghost does not show me the styles of the editors cards

Themes
1

I am building a blog using the default hgost “source” theme, but when I add a card editor such as the card header, when I view the page it does not show me the display styles.

Can somebody help me?

Thank you so much

page
page1905×496 36 KB

preview
preview1917×808 23.8 KB

2

Is this the latest version of Ghost? The picture of your screen is confusing me, because I wouldn’t expect text above menu bar (with < pages and unpublish etc).

Is the problem in the editor, or the published page or preview? From the screen you posted, I’m guessing the editor?

3

The top image shows the front-end, the bottom one the editor, highlighting the missing header card styles on the front-end.

@Duban_Velez how are you hosting / how have you installed Ghost?

4

Are you on Windows? There’s a known bug where the card assets (needed to get the headers to work) don’t actually get built. There are workarounds here:

(Aside to Kevin - wow, ok, so I apparently need more caffeine today. That’s two questions answered in the original post and counting…)

5

At the moment I have ghost installed locally, in the first image you can see the preview of the page and in the second you can see in the editor, what I am doing is modifying the CSS directly in the theme.

Is it good practice to do that?

css
css598×550 26.1 KB

6

You could put your changes in either the theme or in code injection. Code injection is really nice for quick changes, and it means that if you download an updated copy of Source later, you don’t have to merge your changes. But getting the css changes into the theme and properly minified means they’ll load slightly faster, and can make version control easier, since all your styling is in the theme file.

Two possibilities:

  1. You don’t have specific enough CSS selectors, and so the changes you made aren’t visible. If you inspect the element (F12) and can see that the style exists but is crossed out, that’s a problem with selectors.
  2. That theme requires that the CSS be built. Did you run the build step? If you aren’t seeing your style changes, and don’t see any evidence that they even exist in dev tools (f12), that’d be my first guess. npm install and then gulp (for live reloading) or gulp zip (to build a package for install.