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. I’ll show you how.
Pro tip: First, create your date as a normal Carrd text element, and style it as you would like it to be. That way you can use it later in this tutorial as reference, to match your code styling.
How to set the footer date automatically in Carrd
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:
You can obviously change that to your own text or link, but just keep everything inside the <span> tags where you want the year to appear.
Styling the text on your date
The problem with adding text in an Embed element is that it’s not styled. So in order to match the styling you want, you need to some CSS.
Add another Embed element at the end of your page. Set it to Code, then Hidden and in Head. Add some CSS like this:
<style>
.date { color: #000000; font-family: Manrope, sans-serif; font-size: 0.625rem; }
@media only screen and (max-width: 600px) {
.date { font-size: 0.875rem; }
}
</style>- This CSS requires you to keep all the HTML wrapped in a div with a class of “date”
- Change the stylings to the colours, fonts and sizing you would like – if you followed my tip and created your date in a Carrd text element first, you will have a guide. For example, switch ‘Manrope’ in the above code for the font you used in Carrd, switch the font size number for the size you used in Carrd, and switch the colour too.
- You’ll notice there’s different sizing for desktop and mobile screen sizes in this CSS, which is optional.
We hope you liked this tutorial. Check out other Carrd tips & tricks.
Written by
