How to use dynamic icons and wallpapers in Notion?

I have heard such a sentence in my impression. Notion made us find the fun of DIY QQ space back then. We have not been able to find the true master of this sentence, but it is quite interesting to think about it carefully.

I have heard such a sentence in my impression. Notion made us find the fun of DIY QQ space back then. We have not been able to find the true master of this sentence, but it is quite interesting to think about it carefully.

summary

The content of this article is introductory, no theoretical foundation is required, but you need to know how to modify the text to achieve the effect you want.

• Customize Calendar Icon and Bing wallpapers;
• Modify the custom calendar Icon time to keep the date unchanged;
• Modify custom calendar Icon date color, highlighted.

see the effect?

Notion icon embed

Notion’s Icon is the content that supports embedded image format. Compatible formats are: PNG, JPG, GIF, SVG, BASE64 characters.

If you want your Notion icon or Cover to move, try embedding a GIF image. For example, make a moving picture of a gloomy spring and the fragrance of flowers.

How to embed Icon

Find the Add icon button on the Page, click and select the icon you want. Note that Notion Page and Notion Database are displayed differently. Notion Database is displayed on the left, which is smaller than Page.

The reason is that @Jack posted a link in the TG group of the Notion Chinese community:

 https://shkspr.mobi/svg/calendar.svg

When you visit this link in your browser, it will display this month, this day and this week, which is amazing. But after trying to embed this link into Notion, the original picture is displayed, and the picture of the day is not obtained. Out of curiosity I tried to take a look at the source code of this calendar icon.

The original author embeds the JavaScript script in the SVG image. Notion disables the execution of the JavaScript script for security reasons, such as avoiding XSS, so the default text is displayed.

I tried to make the first version last night, but I can only get the time of the day. If I want to display yesterday, the day before yesterday or any day, I can’t do it.

❤️Here I would like to thank Afuture . With his reminder, the above effect can be achieved by customizing the link parameters. And Afuture finally implemented a very good version, which is the version currently used.

Embed a Calendar Icon that automatically gets the time

Embed daily changing date

 https://linmi.cc/calendar/

Copy the link above, Add icon, find the Url, paste it in and confirm.

Embed fixed date

 https://linmi.cc/calendar/index.php?date=2020-03-09

The date after date=2020-03-09 is the date that can be modified. For example, to generate a calendar Icon for May 10, then you can write: 2020-05-10 , put it after ?date= , and you will get

 https://linmi.cc/calendar/index.php?date=2020-05-10

points for improvement

Considering that the current link obtains the time in China, it is not so easy to use for foreign countries, so a time zone option will be added later, and the link generation is based on the time zone.

Embed live wallpaper background

The fixed wallpaper background is very monotonous. It is better to try changing one every day, and you can also change your good mood by the way.

How to embed background in Notion

Notion embeds the background in the same way as Iocn embeds. We find Add cover, click to customize the background.

Embed live wallpaper

Here I will not build it myself, but use a third-party service. Students who are interested in tossing and tossing can try to customize it themselves: https://github.com/xCss/bing 、 http://bing.creepersan.com/ document .

 http://www.neweb.top/bing.php

Adjust background position

If the background doesn’t look very comfortable, try adjusting the position of the image.

Summarize

In fact, this type of embedded wallpaper still has a lot of room for imagination. For example, the picture can regularly display the fan drama, exchange rate, weather, and clothing situation played on the day.

More likely, try to embed other software tasks into it?

Reference link

• This SVG always shows today’s date

routine

Welcome to the Notion Chinese Community: linmi.cc/n