Casper CSS/code injection help

Themes
1

I’m using the hosted version of Ghost (just set up yesterday). I’d like to do two things on the Casper home page and am hoping they can be done with code injection.

1 - Change the home page feed to ONLY include featured posts (and exclude latest posts). Alternatively, load the featured posts first (instead of the latest).

2 - Add a button somewhere in the banner image, below the title text for a call to action). (Am guessing this is a stretch)

My draft site is: https://sustainable-leadership-for-good.ghost.io/

Thanks for any advice you can offer!

2
  1. The easiest would be to change the order of the posts, this can be done from the routes file. On the main collection, you can set the order: order: featured desc

Check this guide for more info:

  1. You can try adding this code in your Code injection > Site footer:
<script>
const siteHero = document.querySelector('.site-header-inner')
if (siteHero) {
	const ctaWrap = document.createElement('div')
	const ctaButton = document.createElement('a')
	ctaButton.innerText = 'Test'
	ctaButton.setAttribute('href', '/test/')
	ctaButton.style = 'margin-top: 2rem'
	ctaButton.setAttribute('class', 'gh-head-button')
	ctaWrap.appendChild(ctaButton)
	siteHero.appendChild(ctaWrap)
}
</script>

Change the innerText and href property values as needed.