Css code to change background color of html note

Support
1

Operating system

Windows

Joplin version

2.12.19

Desktop version info

Joplin 2.12.19 (prod, win32)

Client ID: e50c1c82ecd748139f64b18f925cf0fe
Sync Version: 3
Profile Version: 43
Keychain Supported: Yes

Revision: 7081046

Enhancement: 1.2.1
Search & Replace: 2.2.0
Text Colorize: 1.2.3

Editor

Rich Text Editor

What issue do you have?

Hi Everyone,

I really like some help for my poor css.
I just imported enex file from evernote export and import into Joplin in html format.
I choose html format to preserve the format that otherwise will be lost in markdown.

I'd like to change the background color of the rich text editor to green.
I have set it up for markdown mode and markdown preview.

Here is my userchrome.css

div.CodeMirror-lines, input.title-input, iframe.noteTextViewer, body#tinymce.mce-content-body.jop-tinymce, body{
	background-color: #b3ecb8 !important;
}

Here is my userstyle.css

div#rendered-md{
	background-color: #b3ecb8 !important;
}

However the background color of the rich text editor is still white. It is white only for the html note imported from evernote.

I tried to set new css by inspecting elements. If I change

.tox,  .tox-edit-area__iframe{
background-color: 
}

in the troubleshooting tool, it works. the rich text editor's background becomes green.
However, pasting the code into userchrome.css does not work after restarting.

What css code should I use here?
Many thanks!

Screenshots

1.png
1.png1302×1000 73 KB

2

userchrome.css:

div.CodeMirror-lines, body {
  background-color: #b3ecb8;
}

input.title-input {
  background-color: #b3ecb8 !important;
}

userstyle.css:

div#rendered-md, #tinymce {
  background-color: #b3ecb8;
}

Removed invalid selectors and !important flags. #tinymce targets the Rich Text editor background.

This forum post shows you which CSS file affects which area of the application for both editors.

3

Thanks for answering the question. Unfortunately it does not work.

First of all, iframe.noteTextViewer has to be there,

iframe.noteTextViewer{
	background-color: #b3ecb8 !important;
}

The effect is to set the background color of the markdown preview (two-panel view) to be green.

After switching to rich editor view (single panel), the background color is still white.

4

OK, I have a temporary solution.

I add the following to userstyle.css:

iframe#tinymce-17023894015759239_ifr{
  background-color: #b3ecb8;
}

It looks like 17023894015759239 is a random id, but works for all the html notes.
Not ideal though. Is there better solution?

I have upgraded to the latest:

Joplin 2.13.9 (prod, win32)

Client ID: e50c1c82ecd748139f64b18f925cf0fe
Sync Version: 3
Profile Version: 44
Keychain Supported: Yes

Revision: 1bbec44

Enhancement: 1.2.1
Search & Replace: 2.2.0
Text Colorize: 1.2.3

5

I replied after confirming my code works as intended. It sets the background color for both editors and the Markdown preview.

Neither iframe declaration had any effect in my client. That random ID also changes every time I open Joplin.

If adding the !important flag to my userstyle.css declaration doesn't work, I'm all out of ideas.

6

OK, it looks like a bug. You code works, but the rich editor has green background only after it is somehow reset by the markdown edtior.

Here is the procedure.
I revert back to your userstyle.css

div#rendered-md, #tinymce {
  background-color: #b3ecb8;
}

open troubleshooting tools and press F5.

If the first note is html note, and the editor is one panel, then the background is white.
I can change that by selecting a markdown note, the rich editor now has green background. Then I go back to the html note, the rich text editor continues to have green background.

However, if I further toggle two-panel and then go back to one-panel, the background becomes white again.

So the solution is that in rich text editor, I have to first open a markdown note to set the background green, and then html note in the rich text editor will have green background.

7

My CSS works without workarounds but I haven't imported notes as HTML. Maybe the imported HTML is the remaining culprit.

Have you tried importing your HTML note in version 2.13 with its improved ENEX import?

Have you tried creating a new Markdown note and pasting the imported HTML into it?

8

Hi Muzak,

Yes I have tried. I have exported enex files containing a single note.
This is the same. Once I toggle two panel and go back to one panel, the background becomes white.

This actually worked!
I pasted the html content of an import note into the markdown editor.
Toggle two-panel and then one-panel. The background is still green. So what's the issue here?

9

That is good to hear.

I don't know what the specific issue is, but HTML notes are not as well supported by Joplin as Markdown notes.

10

Then is there a systematic method of converting the html imported notes to markdown note but with the original html code?

11

I would love to know that as well. I opened another thread also asking about formatting notes with markup HTML, but I wonder if we could solve this in another way, i.e., importing the HTML from from Evernote into Joplin as notes with markup Markdown, but without converting the HTML to Markdown.

14

I have a work around figured out last week.

It turns out that the html notes are stored internally as html file, even when you edit it in the markdown editor.
The evidence is that if you export a html note to markdown + front matter, the output file is still an html file!

So the solution is the following:

  • export notes to markdown + front matter
  • change the html file extension to md
  • import the markdown + front matter backinto joplin

Then even though this note contains extensive html markup, in Joplin it is recognized as a markdown note, and the background color works because as we know it works for the markdown notes!

15

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.