Tana
→
Use AI to Style Your Tana Publish Pages
If you've been exploring Tana, you might already know about its handy feature allowing you to publish notes as web pages directly from the app. Publishing a page is simple: just press Command + K, choose "Publish Tana page," and you'll immediately see a live preview of how your page looks. Although Tana gives you basic customization, it's somewhat limited. However, there's a fun way to enhance your Tana pages dramatically by leveraging AI-generated CSS.
In this tutorial, I'll walk through how you can effortlessly give your Tana Publish page a stunning retro gaming console makeover, complete with animations and stylish font effects.
Step 1: Publish Your Tana Page
Begin by selecting the page you'd like to publish. Press Command + K, select "Publish Tana page," and once you're satisfied, click "Publish." Now, your content is live on the web.
Step 2: Generate Custom CSS with AI
Copy your published page's URL and head over to your favorite AI assistant, such as Claude or ChatGPT, that can generate code. Request a creative CSS makeover like so:
"Hey, can you create a CSS file for this web page that makes it look like a retro gaming console? Go all out with animations, cool font effects, and anything else fun!"
Don't forget to share the published URL with the AI. The AI will analyze your existing page and generate a unique, customized CSS file in just a few seconds.
Step 3: Host the Generated CSS File
Once you've received your CSS file:
Download the CSS file provided by the AI.
Head over to gist.github.com.
Drag and drop your downloaded CSS file into a new public gist.
After creating the gist, click on the "Raw" button to get the URL of the raw CSS file.
Due to some hosting limitations with Gists, you'll need an additional quick step:
Go to raw.githack.com.
Paste your raw CSS URL here, then copy the new URL provided.
Step 4: Apply Your CSS to Tana
Now, return to Tana:
Press
Command + Kagain, select "Debug node," and scroll down to find "Publish settings."Open "Node publish settings" and locate the "Custom CSS" field.
Paste your newly created URL here.
Close the settings and republish your page.
Enjoy Your Stylish Retro Gaming Tana Page!
Reload your Tana Publish page, and voilà! You'll see your plain note transformed into a nostalgic retro gaming console interface. You might notice special animations, glowing text, or even a classic CRT filter effect—just like the good old arcade days.
The beauty of this approach is flexibility; if the style isn't exactly your taste, you can iterate the CSS until you get exactly what you want.
Get Creative!
This method isn't limited to retro themes. Using AI-generated CSS opens up endless possibilities. From sleek, minimalist designs to vibrant, interactive animations—your imagination sets the limit.
I'd love to see your unique creations! Feel free to share your styled Tana pages and inspire others.
Happy styling!