Change background color with Windowed panes (solved, 1.6)

Plugins and Custom CSS
#1

Hi! Since it seems there is no way to avoid Windowed panes now (Remnote team seems to have decided to remove the option in the new update), I’d like to have a code to change the color in that view. I currently use this code:

/* Main */

body {
        background: #f7f5f3;
}
.document--narrow {
    background-color: #f7f5f3;
}

#document-sidebar {
		background-color: #f7f5f3;
		}

#document {
background-color: #f7f5f3
}

.navigation-bar {
background-color: #f7f5f3;
	}
	
#document .document-title {
background-color: #f7f5f3;

}

However, with the windowed pane view, it looks like this:

Captura de pantalla 2022-02-08 135756
Captura de pantalla 2022-02-08 1357561073×595 70.5 KB

I’d like everything that is white there to be the color of my background. Thanks a lot for your help!

2 Likes
#2

Hi, @Eustachio! Sorry for the personal mention, but you seem to be extremely competent. Feel free to ignore this if you can’t find the time, but I’d really appreciate your help with this problem. Thanks a lot if you can help!

1 Like
#3

I didn’t read your post carefully so I thought you were sharing the CSS code, not asking :grin:. Sometimes my brain doesn’t work well with English (English as Second Language).

body, .tile__document, .document-header-top-bar, .mosaic-window-toolbar {
	background: #f7f5f3 !important;
}
.document--narrow {
    background-color: #f7f5f3;
}
#document-sidebar {
	background-color: #f7f5f3;
}

image
image1920×1080 159 KB

2 Likes
#4

Thanks, @TaQuangKhoi! You have returned the joy to my Remnote experience… hahaha. Just two thing are mising, the scrollbar (both in the sidebar and in the panes) and the, I guess, document header when in “focus mode” (focused mode? When writing, I mean). They both still appear in white. Thanks again!

1 Like
#5

Try this code… :sweat_smile::grin:

.mosaic-drop-target { /* Fix focus mode */
background: #f7f5f3;
}
/* Fix scroll bar */
::-webkit-scrollbar-track {
    background: #f7f5f3;
}
::-webkit-scrollbar-thumb {
	border: 4px solid #f7f5f3;
}
2 Likes
#6

Very close! Just the sidebar’s scrollbar (when not in use) and a weird border in the document header (in focus mode) remain to be stubbornly white, hahaha. I really appreciate your help!

1 Like
#7

Sidebar’s scrollbar:

::-webkit-scrollbar {
    background-color: #f7f5f3 ;
}

Can you provide me a screenshot? for the weird border in the document header.

2 Likes
#8

Captura de pantalla 2022-02-10 004902

It’s barely visible, just distracting. The middle line doesn’t bother me that much, but it would be great to have a full code for background color change.

1 Like
#9

There’s only the middle line in my situation.

image
image1884×1014 63.8 KB

This is my summary code to change background:

:root {
    --my-background-color: #f7f5f3; /* Use your favorite color */
}
body,
.tile__document,
.document-header-top-bar,
.mosaic-window-toolbar,
.document--narrow,
#document-sidebar,
.navigation-bar {
	background: var(--my-background-color) !important;
}
.mosaic-drop-target { /* Fix focus mode */
background: var(--my-background-color);
}
/* Fix scroll bar */
::-webkit-scrollbar-track {
        background: var(--my-background-color);
}
::-webkit-scrollbar-thumb {
	border: 4px solid var(--my-background-color);
}
::-webkit-scrollbar {
    background-color: var(--my-background-color);
}
3 Likes
#10

Ohhh, I closed and opened the app and it disappeared, including the middle line! Love it! You have my eternal gratitude. Best of luck to you, friend! :fist_right: :fist_left: :pray:

1 Like
#11

Hi,
Thanks for providing the code. I need a small tweak with this. Is there a way to change the white border to go back arrows that’s shown in this screenshot?

Screenshot 2022-02-10 130630
Screenshot 2022-02-10 1306301868×90 8.84 KB

1 Like
#12

I just realized that it seems to have been released a new update that brought back the ability to disable the Windowed panes view, and since I had it that way, it re-activated. That’s why I stopped seeing the white line. Just for curiosity I went back to Windowed panes and the line is still there. I don’t really plan on using that view, but I thought maybe you’d like to know :confused: Thanks anyway for all your help!

1 Like
#13

Do you mean Navigation Bar?

.navigation-bar {
	background: #f7f5f3;
}
2 Likes
#14

Perfect works like a charm. May I ask, how can I learn the property name of each entity and the appropriate attributes for it. I know a little bit of css. But the names the remnote uses for each property like .mosaic_window_toolbar is hard to find.

#15

We don’t know the names RemNote uses for each property too…
I always Inspect the page with Ctrl + Shift + I and check which .class affect this element :smiley_cat:

image
image1881×1001 219 KB

2 Likes
#16

Dear @TaQuangKhoi, these lines stopped working in 1.7, and I’m not able to find the new class. Would you lend a hand here? :pray:

Edit: Oh, I think i found it!

.rn-clr-background-primary { /* Fix focus mode */
background: var(--my-background-color);
}

(please correct me if I’m wrong). Thanks anyway, cheers!

2 Likes
#17

Also, it must be added

.mosaic-preview,

In this part of the code:

2 Likes
#19

Thanks, it fixed the background of Sidebar in Focus mode…

I have updated to my code: Custom-Background.css (github.com)

1 Like
#20

Which element this class effect? I see that the code can work without it… Maybe I missed something…

#21

Would you like to make everything in RemNote to one background color?
add these lines::

.popup-menu,
.react-datepicker__header,
.rn-clr-background-elevation-10, /*Account menu*/
.rn-clr-background-elevation-15, /*Omnibar*/

to

See the whole code at: Custom-Background.css (github.com)