Hide affiliate links in default Ghost default theme [updated]

How to remove ghost.org affiliate link from Casper theme's footer using CSS's nth-of-type property

Hide affiliate links in default Ghost default theme [updated]

Note: Post has been updated to support Ghost 4. See relevant section.

Ghost 3

Ghost comes with default theme called Casper which contains an affiliate link to ghost.org in the footer.

sample.blog.footer.with.affiliate.link-1

We can easily remove this using CSS's nth-of-type property. Add following snippet to Code Injection section of Ghost's Admin panel -

sample.blog.footer.without.affiliate.link.code.injection

<style>
    .site-footer-nav > a:nth-of-type(4) {
    	display:none;
    }
</style>

This is how the footer would look now.

sample.blog.footer.without.affiliate.link

CSS nth-of-type Overview

nth-of-type() property is a pseudo-class which matches elements of a given type, based on their position among a group of siblings. It's supported by all browser -
https://caniuse.com/#search=nth-of-type. It is similar to nth-child but more specific as it only looks for siblings for specific element type.

The interesting part of this property is the different input parameters it takes. It's supports input parameters like

  • integer - which basically translates to specific element's position (like how we have used in above example)
  • odd or even - which can select multiple elements in odd or even position
  • an+b - we can compute the formula as follow
    • a - a integer value
    • n - a counter (starts at 0)
    • + or - - add or subtract
    • b - an offset value

There is also a :nth-last-of-type.

Ghost 4

To remove the affiliate link in new version of Ghost, try this

<style>
    .outer.site-footer > .inner > div {
    	display:none;
    }
</style>