Notion like icon/emoji and wallpaper


I think it would look very stylish if we could add pictures and icons to our rems like notion.

Am a fan of this idea. Glad someone else shared my thoughts precisely. Some if us a visual creatures…hence our live for the concepts/descriptors way of learning…

1 Like

Yes. What if we could also change our background into an image. That would be really very nice. Tiddlywiki let’s you do this.

1 Like

Usage

  1. Add this to Custom CSS (What is Custom CSS and how do I use it?)
Code to paste into a CSS code block
[data-document-tags*="pagebanner"] #DocumentTopRow:before {
  content: "";
  display: block;
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
  background-size: cover;
  background-repeat: no-repeat;
}

[data-document-tags*="pagebanner"] #DocumentTitle {
  position: relative;
}

[data-document-tags*="pagebanner"] #DocumentTitle [data-rem-tags~="emoji"] {
  position: absolute;
  top: -160px;
  left: 10px;
  width: 100px;
  height: 106px;
  padding: 10px 13px;
  background: white;
  border-radius: 50%;
  font-size: 75px;
}
  1. Configure each banner you want to have. Here for example a banner which is applied with the tag #pagebanner daily:
Code to paste into a CSS code block
/* Customize banner instances */
[data-document-tags~="pagebanner-daily"] #DocumentTopRow:before {
  background-image: url("PASTE IMAGE URL HERE");
}
  1. Tag pages. Note that an emoji at the start of the page title up as well.

As an image url you can use any image on the internet (e.g. from https://unsplash.com/) or image pasted into RemNote Web (haven’t tested Desktop but that might work as well).
Right click the image > copy image url and replace PASTE IMAGE URL HERE with it.

Images are set to cover the banner, so you might want to cut the image accoringly before pasting into RemNote.

5 Likes

You have to be more concrete with what you want, e.g. post a screenshot. E.g. you can do this:

[data-document-tags~="daily-document"] {
  background-image: url("https://images.unsplash.com/photo-1586074299757-dc655f18518c?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1268&q=80");
  background-size: cover;
}
1 Like

how can I make background image full screen

If you really want a fullscreen background image you can do it like this:

body {
  background-image: url("https://images.unsplash.com/photo-1586074299757-dc655f18518c?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1268&q=80");
  background-size: cover;
}
#document {
  background-color: transparent;
}

But I personally find that rather hard to read stuff on.

1 Like

Nice work!

I actually had a go at this one but wasn’t successful.
I tried to make it so that the banner image could be pulled from the first child Rem. But I couldn’t figure out how to make it be applied to another (parent) Rem, other than itself. Is that’s even possible…

I’ve pasted the Css in Css block and when I tagged the file I want to add a cover photo to (nothing appears)


Here it’s the tag appears but there is no place to type the URL for the photo

if it worked with you please help me because it didn’t work with me