Hi!
I have been following the tutorials and the checking the forum but I can’t seem to find the answer for my issue. I recently created a static home page, using this tutorial: How to build a custom homepage for your Ghost theme
However, none of the styling from the theme has applied to the home page after I uploaded the modified casper files. For example, there is no font specified or margins. Do I need to go about this using Gulp? Or is there another to apply the global CSS to this new page?
The home.hbs page I created is simply a duplicate of the index.hbs page without the post divs.
Thank you!
Hey @farsiforeplay 
How did you make changes to Casper? Have you seen the development guide? It provides a great starting point for customizing casper:
Can you share the url to your site? There might be a misconfiguration in your theme that’s preventing the styles from being loaded
Thank you for your reply. I did see that development guide, but it was after I followed the other tutorial and added the home.hbs file to the casper files and then uploaded them to the site theme.
So that would be my question - should I use Gulp/Yarn?
The site is here: https://www.digitalequitylab.org/
Thanks for your help.
In the meantime, I’m installing yarn and its dependencies.
Looking at your site, it looks like the font is being applied. Are you trying to make the home page look like a post page, or did you have custom styles for it?
I want it to look like this: https://www.digitalequitylab.org/about/
(a different page that has the same information; the home page will replace this).
I want to replicate the styling (excluding the header) - font, margins, etc. I thought the CSS would apply to the home page the same way as other pages but it wasn’t automatic as expected. I’m hoping to not have to style that specific home page but apply the global CSS. Is that possible?
The main reason I’m asking you this is because I don’t think you need a custom home page, rather you can just use the post template to render the “home” page from the Ghost editor
As an example:
routes:
/:
data: page.home
template: post
collections:
/blog/:
permalink: /blog/{slug}/
template: index
If you create a page with the slug home, and use those routes, it should work
Hmm I tried that but there wasn’t anything available in the Editor do any styling. Did I miss a step? Do I need to change anything about my previous steps?
On second refresh, it looks like it broke the page. Nothing appears.
The editor does have an option for code injection if you’re just trying to style the home page - you can do something like
<style>
main {
max-width: 1040px;
margin: 0 auto;
}
</style>
Thank you Vikas. But it feels tedious to style just this page when the CSS already exists. I just want to apply the original CSS to pages that I add to the theme. Is that possible? How was the font applied as you mentioned in the earlier response? I don’t have custom styles.
And when I change the route from “template: home” to “template: post” the page disappears.
Hi Vikas,
Can we go back to this? For some reason when I follow this recommendation and adjust the routes.yaml file accordingly, I get a broken page and nothing appears (except for the black banner). So I adjusted and created a post instead for the “About information” - yet I get a 404 error and the posts appearing below. It’s confusing it with other posts as well, which I pushed to the “Work” page. Is there another adjustment I need to be making so that the home page stands alone and I can add the information as a post, as you suggested?
Thank you.
routes:
/:
data: page.home
template: post
# template: home
collections:
/work/:
permalink: /{slug}/
template: index
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
I went back to this strategy too, and the styling is not applying. For example, I added an h1 styling for color black/#000 and position center but no change. You said previously that CSS is being applied - from where exactly? Thanks.
Hey looks like I missed your post when you last posted 
Do you have a local development environment set up? If so, and you’re getting blank pages, my go-to is to {{log this}} in the template to make sure the data I expect is where I expect it.
Can you expand on the issue you’re mentioning for 404s? I’m a little lost.
You can ensure a post doesn’t get a URL by adding a filter to your main work collection - filter: tag:-hash-exclude should prevent any posts with the tag #exclude from getting a public URL 
Thanks for the reply.
I do have a local environment set up to be used but I haven’t configured it for this specific site yet because I am not the one who initially developed the site. And I haven’t found yet on how to make that all work. But I will if it will solve this issue!
The 404 issue — as you can see in the image — happens when I update the routes.yaml file to the code below, as you suggested. The excluded post still comes up and is tagged “exclude”. All of the posts appear on the home page rather than just the “exclude” post as I marked it with “home”. So I am still stuck and not able to style the home page either when it is a page (using the code injection). I’m getting nervous because the site will be announced and I’m still having the same issues. Thank you for your help.
routes:
/:
data: page.home
template: post
# template: home
collections:
/work/:
permalink: /{slug}/
template: index
filter: tag:-hash-exclude
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
I seem to be getting a similar problem after creating a custom homepage from the tutorials.
The dashboard code injection doesn’t work on the custom homepage and it’s also broken some (not all) of the global code injection across the site across the posts. I’m using Edge theme.
Any idea how a custom home page could break the CSS?
