All themes except Source have broken header and footer

Developer help
1

And

  • How was Ghost installed and configured?
    Via ghost install
  • What Node version, database, OS & browser are you using?
    Node v18.20.6, MySQL 10.3.22, AlmaLinux 8, Firefox Developer Edition
  • What errors or information do you see in the console?
    What’s strange is that there are none
  • What steps could someone else take to reproduce the issue you’re having?
    After installing ghost, install any theme except Source

Also my Nginx config:

location / {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto https;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header Host $http_host;
      proxy_pass http://127.0.0.1:2368;
    }
    
    # revisioned/fingerprinted images can be cached forever
    location ~ "/assets/images/(.*)-([a-z0-9]{10})\.(?:png|jpe?g|tiff)(.*)$" {
      expires           max;
      add_header        Cache-Control public;
      add_header        Vary Accept;
      proxy_pass        http://127.0.0.1:2368/$uri$webp_suffix;
      access_log        off;
    }
  
    # revisioned/fingerprinted css and js can be cached forever
    location ~* \.(?:css|js) {
      expires           max;
      add_header        Cache-Control public;
      proxy_pass        http://127.0.0.1:2368/$uri;
      access_log        off;
    }
  
    # non revisioned/fingerprinted images only cache for 1 week
    location ~* \.(?:gif|png|jpe?g)$ {
      expires           1w;
      add_header        Cache-Control public;
      proxy_pass        http://127.0.0.1:2368/$uri;
      access_log        off;
    }
2

Looks like you’re missing some css styles. How are you installing the theme? Is it by clicking the theme image in the admin panel, or uploading a zip?

This can happen with locally edited themes if you have a problem with your build step. It could also happen if there’s a problem with your deploy.

Please share some details about how you’re installing the broken theme(s).

3

I have tried both options and unfortunately they give the same result

4

So let’s compare the bit of text that says “Latest issue”. Here’s the demo (digest.ghost.io)

image
image264×643 19.1 KB

Here’s your site:
image
image267×604 18.6 KB

Wherever you’re getting your theme from, it looks like it has been built without most of the required styles. You’ve got the right names for those css files, but they don’t seem to have the right contents. Here’s what it should have: Themes/packages/digest/assets/css/screen.css at 2eeffca2184d6f2a38ad0537f9c666e495e30661 · TryGhost/Themes · GitHub

Can you provide some more details on exactly how you’re installing the theme? If you click the ‘digest’ theme image, you should get a copy with all the styles, straight from the repo. I just tried it, and it looks fine.

5

I hope this video will give you all the information you need :slight_smile:

6

OK. So what’s proxying in front of Ghost? My new theory is you’re serving the wrong theme’s screen.css file.

7

If you go click the ‘development mode’ button in cloudflare, or set it to dns only, does the problem disappear?

8

Nginx 1.26.3, the config is attached in the first post :slight_smile:

9

Your site’s headers say you have Cloudflare in front of it.

10

I cleared the cache in CloudFlare, so I don’t think Development Mode makes sense. Also, if the issue is in CloudFlare’s cache, the content would be different when trying to load CSS with a parameter. For example, https://blog.gnz.is/assets/built/screen.css?v=2. But for some reason the content is the same

11

Yes, Cloudflare –> Nginx –> Ghost

12

You look like you’re serving the source specific css, which is why digest looks wrong. It isn’t your browser cache, because I see it too. I’d bet on you have your caching set to ignore query variables, but if you’re not able to put it in development mode or turn Cloudflare to dns only briefly to confirm this is a caching problem, then I don’t think I have any other ideas to help you.

13

Hang on… is this to blame?

14

Removed all parameters for all locations except / and cleared the Cloudflare cache – it works. Thank you very much for your responsiveness <3

1 Like