Global disclaimer

Hi talented People! I am in need of some help.

Does anyone have a smart way to be able to show a global disclaimer similar to the Wirecutter example shown here?

Ideally through code injection as I’m not good with theme edits, but open to all options.

I am using the free Headline theme on my ghost site.

Many thanks for your support!

You can use something like this in your code injection footer:

<style>
.global-alert {
    padding: 1.5rem 0;
    background: rgba(0 0 0 / 0.15);
    text-align: center;
    margin-top: 3.5rem;
}
</style>
<script>
    const globalAlert = document.createElement('div');
    // If you need to insert markup, use this line:
    globalAlert.innerHTML = '<strong>Announcement</strong>: Something to announce'
    // If you only need to insert text, use this line:
    globalAlert.textContent = 'We independently review everything we recommend. When you buy through our links, we may earn a commission.';
    globalAlert.classList.add('gh-inner', 'global-alert');
    document.getElementById('gh-head').appendChild(globalAlert);
</script>

Thank you so much @vikaspotluri123 I have just tested this out and it works a treat! I’m super happy.

Out of interest,

  • is it possible to style the disclaimer using a Ghost callout card?
  • is it possible to add the banner inside the article/page container?
  • To add the banner inside the page container, change the last line of the script:

    before: document.getElementById('gh-head').appendChild(globalAlert);
    after: document.querySelector('.gh-article').prepend(globalAlert)

Note that you might need to tweak this behavior if your post has a cover image.

  • To make it look like a callout card, you can modify the second to last line of the script.

    before: globalAlert.classList.add('gh-inner', 'global-alert');
    after: globalAlert.classList.add('gh-inner', 'global-alert', 'kg-card', 'kg-callout-card', 'kg-callout-card-grey'); (you can change grey to any of the supported colors)