Table of Contents
Keeping the year in our site footer updated every year is a pain. We’ve all forgotten to do it. But what’s the answer? Well you can add a bit of code in Carrd and have it dynamically update by itself.
No having to remember, no having to go in and edit it.
How to set it automatically
All you need to do is add an Embed element, set it to Code, Visible, and add the following HTML:
<div class="date">
© <span id="copyright"><script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script></span>
| Created by <a href="https://twitter.com/yourname">@yourname</a>
</div>That will give you something like this:
© 2022 | Created by @yourname
You can obviously change that to your own text, but just keep everything inside the <span> tags where you want the year to appear.
Styling the text
The problem with adding text in and Embed element is that it’s not styled. So in order to match the rest of your site you need to add another Embed element at the end of your page. Set it to Code, then Hidden and Head. Add some CSS like this:
<style>
.date { color: #000000; font-family: Manrope, sans-serif; font-size: 0.625em; }
@media only screen and (max-width: 600px) {
.date { font-size: 0.875em; }
}
</style>- This CSS requires you to keep the HTML wrapped in a div with a class of “date”
- Change the stylings to the colours, fonts and sizing you would like
- You’ll notice there’s different sizing for desktop and mobile screen sizes in this CSS.
Written by
