Code injection to remove ghost link from caspar footer theme?

Developer help
1

Just want to figure out how to remove the Ghost link in the footer of the Caspar theme?
Basic code knowledge so is there an injection I can use to get it removed?

Appreciate any help on the matter!
Thanks in advance :slight_smile:

2

I think you can go to the default.hbs then remove this line <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>

3

Put this in your code-injection:

<style>
  /* The footer links to ghost keep coming back */
  .site-footer a[href^="https://ghost.org"] { display: none; }
</style>
4

Doesn’t work.

I also tried .site-footer-nav as this is also a commonly peddled solution to this problem.

The alternative I found was to edit default.hbs.

Honestly, I’m new to Ghost and I’m feeling pretty nonplussed about how configuration works.

5

Within the style tag, you can :

  • Match the exact URL, hence target that specific link
a[href="https://ghost.org/"] { display: none; }
  • Or use ^ so it will match any URL starting with ghost.org(including the footer you mentioned).
a[href^="https://ghost.org"] { display: none; }

I searched Casper repo and this is the only place where there is an outgoing link to ghost.org, so above two methods will produce the same results with current Casper code.

6

It should work - being basic CSS… so the things to check are:

  1. Are you using a different / custom Theme? The code is for Casper, and the CSS selector looks for links that are a child of the .site-footer class - other themes may not use this class.
  2. Make sure you use the exact and complete code - adding spaces and rearranging things can break things

If you are using Chrome, you can use the developer tools to look at your actual HTML and determine why the CSS selector is not finding the link.

If you change the .hbs files, you will probably lose your change at the next Theme upgrade.

Note that this is not really Ghost configuration, it is just a CSS tweak.

7

P.S. You could try making the selector less specific:

<style>
  a[href^="https://ghost.org"] { display: none; }
</style>

but this will affect ALL links to ghost.org anywhere, on all pages.

8

I confirmed that the link is exactly:

https://ghost.org/

It wasn’t working because of the trailing slash.

For completeness, for Casper v.4.0.5 and Ghost v.4.6.4, this is what I put in Code injection > Site Footer:

<style>
/* Suppress the Ghost link in the footer. */
    .site-footer a[href="https://ghost.org/"] {
        display: none;
    }
</style>

Thanks.

1 Like
9

Note that the original used ^= rather than just =

^= means ‘starts with’ - so the trailing / was not needed.

The net has a long history of issues with the trailing slash - worth a search on a rainy day.

10

worked beautifully! Thanks!