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.
2 Likes
Usage
- 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;
}
- 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");
}
- 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.
6 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.
2 Likes
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
How about this?
Thank you for your work!
However, something is not working right, or I made a mistake. I will need to post two times, because I have two screenshots and new users are not allowed to insert more than one in one post 
I followed your instructions and inserted your css code into custom css, like this:
However, when I wanted to try it out, it looks like this:
You can see that the tile (‘Testpage’) is moved somewhat down - but no Image appears. Did I do something wrong? Is the CSS-snippet no longer working with RemNote 1.5.3?
Thanks - and hey, I’m really enjoying RemNote, so thanks for this as well.
the rem tag should not include the dash :
Right: pagebanner daily
Wrong: pagebanner-daily
You can see the picture
3 Likes
Wonderful, thank you very much!
1 Like