Change background color with Windowed panes (solved, 1.6)

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:

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

2 Likes

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

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;
}

2 Likes

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

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

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

Sidebar’s scrollbar:

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

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

2 Likes

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

There’s only the middle line in my situation.


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

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

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?

1 Like

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

Do you mean Navigation Bar?

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

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.

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:

1 Like

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

Also, it must be added

.mosaic-preview,

In this part of the code:

2 Likes

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

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

1 Like

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

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)