Playing with the newly released global variables in @webstudio.is

🪄 Create on the Global Root
👀 Reference on all pages and inside Slots

Simpler yet, use the getElementById() method in the script to target the placeholder.

4. Add an HTML Embed and enter the script code shown in the image.

See our year placeholder's ID (i.e., 𝚢𝚎𝚊𝚛) in the script? Make sure they match.

And presto 🐇! No more manual year updates or zombie site vibes.

3/3

1. In your copyright text, include a placeholder for the year. Anything will do.
2. Wrap the year placeholder in a span.
3. Give the span an ID (e.g., 𝚢𝚎𝚊𝚛) so we can target it with a script... 👉

2/3

That "2022" in a website's copyright credits? It says "zombie site." 🧟‍♂️

Bots to the rescue! 🤖

Let's make a dynamically updating year in @webstudio. 🧵👉

1/3

The @webstudio.is style guide starts with a dark theme 🌙.

Been there, done that? 🕶️

Start with a light theme instead 🔆:

1. Add the Craft Style Guide
2. Copy the CSS variables for the light theme
3. Select the Global Root element
4. Paste the copied CSS variables

docs.webstudio.is/university/c...

Love how @webstudio.is now lets you easily edit long CSS values:

🚁 Hover to auto-scroll the value in the field
👆 Click to open a code editor dialog