Yes, you are looking a the Casper Theme

Changing the Ghost Casper theme without changing the theme. It is possible with some CSS and Javascript. I even have the light / dark button.

Yes, you are looking a the Casper Theme
Photo by Alvin Lenin / Unsplash

Casper, it is the Default theme for Ghost. And I like the theme, but not everything. How ever with the most cheapest Ghost Pro "Starter" kit (only 9 dollar per month... ouch!) you can only have the standard Themes.

No custom themes, No custom integrations

I'm not sure why, but the 9 dollar price will not let you change the official and free themes. You can install those and nothing else.

SO you are stuck on those themes right? Well.. with a little CSS and JavaScript magic you can actually change a lot! And the best part is, You will not touch a theme file at all! So all the future upgrades will not destroy your site (I hope).

So yes you are currently looking at the standard Casper Theme, with a bit of my own CSS/Javascript Magic!

Changing the Ghost Casper Theme

CSS and Javascript are your friends!

Not sure if you know what CSS and Javascript is... but well okay I'll explain in a few sentances.

CSS is a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.

JavaScript a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, maybe not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)

So now you know! :-) Within the backend of Ghost you have a section called Code injection. You can find it when you press the Gear sign ⚙️ on the left bottom side of the backend. Then scroll down and press "Code Injection"

There you got two sections. One is for stuff you want to put in the top of your site called : Site Header

Code here will be injected into the {{ghost_head}} tag on every page of the site.

The other is alllllll the way down in your site and is called : Site Footer

Code here will be injected into the {{ghost_foot}} tag on every page of the site.

If you want to use Google analytics and give all your Data to google you put analytics code usually in the Site Header. I'm only using CSS in the site header.

My JavaScript is in the footer.

Yes, you really are looking at the Standard Caper Theme

Remove Login and Subscribe in Casper Theme

Ghost want's to turn your audience into a business. With more subscribers you will have to pay more money to the creators of Ghost. Now I don't mind paying for something, but having something as paying more when you have more (paying and non paying) subscribers... I don't like.

But Ghost is putting a lot of effort in setting those Subscribe buttons on your site, even if you turn it off on the backend. So let's start with removing the Login and Subscribe buttons and any other subscribe form on the site.

You will need to put the following code in the Site Header field.

.cover-cta, .members-login, .members-subscribe, a.gh-head-button, .footer-cta{
	display: none;
}

Yes! That is all! It does not really removes it. I could, with some javascript. But with this code it just sets it hidden. And that is okay.

Create a Light on / off switch

When Ghost created the default theme casper it had a white background. Then they created a Casper theme that had the dark version based on your pc or mac settings.

Nobody liked it. And a lot of users asked for a switch! The creators of Casper put it back to white in the latest version. No switch, no OS dependancy white only.

Luckily they did create a simple option to set it to black!

document.documentElement.classList.add('dark-mode');

The only problem is that it stays Black... once you Go Black, You cannot go Back!

Well, do I have the solution for you!

First start with a new menu item.

You can put in in the main menu or secondairy menu... yes even both!

Press the ⚙️!

Go to "Navigation"

Then put the following text in the name field. (exact, if you don't it will not work!)

let there be💡

In the URL field put this

#not

Yes again it has to be exactly this. You can change both, but then you will have to change the below JavaScript.

Put the below javascript in the Site Footer part of the "Code Injection" page you can find after pressing ⚙️.

<script>   
// By setting this elements var the script looks for the "nav-let-there-be" classes    
var elements = document.getElementsByClassName("nav-let-there-be");

// this part gets the cookie content or a default value
var ld = getCookie('lightdark');
// sets the theme to dark or light
if(ld == 1){
    document.documentElement.classList.remove('dark-mode'); 
}else{
    document.documentElement.classList.add('dark-mode');
}

// function to a cookie called darklight
function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}    

// function to look for a cookie called darklight and returns the content of it.
function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  // no cookie found? return 0 to set everything to DARK
  return 0;
}        
    
// function to set the theme to dark or licht and change the content of the click element. 
var light_dark = function(el) {   
    if(ld == 1){
        ld = 0;  
        // set the cookie
        setCookie('lightdark', 0, 100);
        // change the dark or light in the theme
        document.documentElement.classList.add('dark-mode');
        // change the text in the div
        el.currentTarget.innerHTML = "<a href=\"#not\">Let there be💡</a>";
    }else{
        ld += 1;
        setCookie('lightdark', 1, 100);
        document.cookie = "lightdark=1";
        document.documentElement.classList.remove('dark-mode');
        el.currentTarget.innerHTML = "<a href=\"#not\">Turn off the 💡</a>";       
    }
};

// with this loop it goes through the "nav-let-there-be" classes and adds an click eventlistener on it. It also changes the content so it shows two different kind of text when the light is on or off
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', light_dark);
    if(ld == 1){
        elements[i].innerHTML = "<a href=\"#not\">Turn off the 💡</a>";
    }else{
        elements[i].innerHTML = "<a href=\"#not\">Let there be💡</a>";
    }    
}
</script>
That is it!

Have Fun!

Oh? You want all the changes I have made?

Okay... Just put the following CSS in the Site Header part and take a look at the changes on your site!

<style>
/* this part gets a google font that I like for the H1's */
@import url('https://fonts.googleapis.com/css2?family=Holtwood+One+SC&display=swap');

/* removes the login and subscribe parts on your site */
.cover-cta, .members-login, .members-subscribe, a.gh-head-button, .footer-cta{
	display: none;
}

/* sets the menu bar to BLACK */
.gh-head{
  background: black!important;
}

/* set some fixed height and padding for the header on the homepage */
.site-header-content{
    min-height: 400px!important;
	max-height: 400px!important;
    align-items: none;
	padding: 6vw 3vw; 
}

/* as the titles in the header are above on each other the placed image should be way back */
.site-header-cover{
	z-index: -50;
}

/* set the site header text */
.site-header-content h1 {
    transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    background-color: #000;
    color: #fff;
    padding: 0 0.6em;
    font-family: 'Holtwood One SC', serif!important;
}  
   
/* set the site sub header text */
.site-header-content p {
    position: relative;
	z-index: -1;
    top: -5px;
    text-align: right;
    float: right;
    background-color: #000;
    color: #fff;
    background-color: red;
    padding: 0 0.6em;
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    font-family: 'Holtwood One SC', serif;
}

/* some css needed for mobile devices */
@media only screen and (max-width: 1276px) {
	.site-header-content p {
        margin: 15px 13vw 0 auto;
    }
}
    
@media only screen and (max-width: 1075px) {
	.site-header-content p {
        margin: 25px 13vw 0 auto;
    }
}
    
@media only screen and (max-width: 903px) {
	.site-header-content p {
        margin: 35px 13vw 0 auto;
    }
}    
    
@media only screen and (max-width: 800px) {
	.site-header-content p {
        margin: 35px auto 0 auto;
    }
    .site-header-content h1 {
        margin: 60px auto 0 auto;
    }
}
    
@media only screen and (max-width: 645px) {
	.site-header-content p {
        font-size: 6vw;
    }
    .site-header-content h1 {
        font-size: 8vw;
    }
}

@media only screen and (min-width: 646px) {
	.site-header-content p {
        font-size: 2em;
    }
    .site-header-content h1 {
        font-size: 2.5em;
    }
}  
    
@media only screen and (min-width: 801px) {
    .site-header-content h1 {
        margin: 60px auto 0 12vw;
    }
}      
    
@media only screen and (min-width: 1277px) {
   	.site-header-content p {
        margin: -5px 13vw 0 auto;
    }
}
@media only screen and (min-width: 1500px) {
   	.site-header-content p {
        margin: 5px 20vw 0 auto;
    }
    .site-header-content h1 {
        margin: 60px auto 0 20vw;
    }    
}    
@media only screen and (min-width: 2000px) {
   	.site-header-content p {
        margin: -5px 25vw 0 auto;
    }
    .site-header-content h1 {
        margin: 60px auto 0 25vw;
    }    
}

/* Header changes for post overview */
h2.post-card-title, .article-title {
    background: black;
    transform: rotate(3deg);
    -webkit-transform: rotate(359deg);
    padding: 10px;
    color: #FFF;    
}

/* some fun with the images on post overview */
img.post-card-image:hover {
    transform: scale(1.2) rotate(3deg);
}
img.post-card-image {
    transition: transform 1.5s ease;
}    

.post-card-primary-tag,.article-tag a {color: #26a8ed;} 

</style>