Ghost Rebuild v2
Modifying the base template the ships with Ghost, Casper. Here I'll document my process learning Ghost templating structure. Vamo puesh ~ si o no?
![Ghost Rebuild v2](/content/images/size/w2000/2024/06/20220826_194405.jpg)
The original theme is called Casper: https://casper.ghost.io
Though there seem to be a few changes from what is on the demo site 🧐 ... that I'll need to investigate.
Either way, I'm kinda of realizing that this is a part of my art ... I start with simple structures, and then I streamline them further.
I did the same thing with the Twenty theme in Wordpress, as well as a few base themes with GeneratePress.
Because often they are robust themes!
(I really like the menu button for mobile!)
Still a beginner
I just started looking at the theme files for Ghost themes; and it's looking very accessible. Though like most things, will take a bit more time to do the really cool stuff.
Though I've changed the header font colors, which is most easily seen on mobile.
I also limited the frontpage articles to only articles that are featured ... not the latest articles ~ which I think will be useful.
As well, I added the Soundcloud embed at the bottom.
The next trick will be to add a list of articles after the Soundcloud link, I think. As well, I would like to add icons for social links.
Here's the CSS that's used via Code Injection:
<style>
.site-header-content p {
line-height: 1em;
opacity: 1;
font-size: 1.5em;
font-family: serif;
text-shadow: 3px 3px 2px black;
}
#gh-head {
background-color: transparent;
color: #fff;
opacity: 1;
font-size: 1.1em;
}
.gh-head-brand .gh-search svg {
stroke-width: 4;
}
.has-cover .gh-burger:before {
background-color: #fff;
height: 4px;
}
.has-cover .gh-burger:after {
background-color: #000;
height: 4px;
}
.gh-head-open.has-cover #gh-head, .gh-head-open.has-cover #gh-head .gh-head-actions {
opacity: .95;
}
</style>
Adding the list below required the following code:
(Need to copy in the code 😇.)