About Casper Theme

This is what the Casper theme used to look like. But it doesn’t look like this in the new version. How can I do this again?

Maybe you are looking dark version in the current theme. https://demo.ghost.io/
Is not it?

I think what @Dienw is referring to is the columns/grid. The current version of the default (Casper) theme has one “primary” post card that spans the content width, and then 3 columns of post cards that are all the same size and shape.

@dienw, you would have to modify the template, I believe.

Hey @Dienw!

You could try to download one of the previous versions of Casper from GitHub.

Not sure which previous version has the layout you are looking for.

Hope this helps.

Yes, I was going to suggest this, but @Dienw, note that you won’t be able to use some of the latest (and greatest) features of Ghost such as the membership portal if you decide to use an old version of the Casper theme.

Just to add onto this as well, I also do wish there was a simple way to “break up” the infinite 3 column layout in the latest version of Casper as it becomes quite monotonous once you have more than 10 or so posts on the page. But I’m not the one doing the coding work, and the Ghost team is doing a great job, so I’m not complaining :joy:

Not sure which previous version has the layout you are looking for.

The size of the columns can be overwritten by code injection using grid-column-start, grid-column-end and grid-column (shorthand for start and end). They can be modified on the posts selected with :nth-child selector of the .post-feed. The numbers that define which children should be modified and what the column size should be can be adjusted as needed.
For example:

<style>
.post-feed :nth-child(3n+1) {
  grid-column-start: span 2;
}
.post-feed :nth-child(5n+1) {
  grid-column-start: span 3;
}
</style>