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,
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)
Hey @vikaspotluri123 thanks again for your support and expertise here. I’ve now got this working on all posts and pages and looks pretty sweet.
to make this really amazing … do you think it’s possible to only show it on posts / pages with an internal tag like #sponsored
Not to worry if not … im very happy with the implementation - thanks again :)
You might need to modify your theme to make that happen (if you’re using internal tags), since I don’t think there’s a way to check if a post has a specific internal tag without making a theme change 
Another resource to check out, which will achieve the same end:
Hi @vikaspotluri123
It’s possible to add this div on another part of homepage? For example just before to post-feed.
Thanks!
It should be possible! If you share the theme you’re trying to use, and where you want it to go I can give you the proper element to query
Hey @vikaspotluri123 me again! I hope you’re doing okay.
I now have this working below my header as per the original code you provided but when I set a post template to full feature the global alert appears on top of the image as it all becomes the header.
Any suggestions on how to get around this? Thanks in advance
Can you share an example URL with the issue?
Where or how?
thanks… 
Hey - I have actually settled for leaving a disclaimer in the body of the post/page and I am able to target only posts with affiliate links by using the following code:
document.querySelector(‘.gh-article.post.tag-hash-affiliate .gh-content.gh-canvas’).prepend(globalAlert)
Hope this comes in handy for anyone else with a similar request
Using the above code injection, replace document.getElementById('gh-head') with document.querySelector('#site-main .inner')
Not working. I think the best solution is put <div class="global-alert"></div> directly. It’s possible? But how i add the disclaimer text…