Table cell formatting

marcorom7 · 2024-10-22T11:14:36.567Z

Operating system

macOS

Joplin version

3.0.15

Desktop version info

Joplin 3.0.15 (prod, darwin)

ID del Client: c6d62d9931b64997bc2a1e08bf890606
Sinc. versione: 3
Profilo versione: 47
Portachiavi supportato: Sì

Revisione: 598677b

Backup: 1.4.1
Note Tabs: 1.4.0

Sync target

Dropbox

Editor

Markdown Editor

What issue do you have?

Hello,
I created a to do list in a table which looks like a calendar. (see Screenshot). (A calendar app won't allow to change single row sizes.)
Then I found this method in Stackexchange, which allows to emphasize and colour for example odd rows, so I don't need to do this for new rows.
Everything works perfectly until I exit the Edit Mode.Then the cell colours and text emphasis is gone.

Here's the code:

<div class="P">
<style>
    .P th {
        background: lightgrey;
    }
    .P tr:nth-child(odd) { background: lightblue;
		font-weight: bold;
	}
    </style>

<div class="P">

| LUNEDÌ | MARTEDÌ | MERCOLEDÌ | GIOVEDÌ | VENERDÌ | SABATO | DOMENICA |
| --- | --- | --- | --- | --- | --- | --- |
| 21  | 22  | 23  | 24  | 25  | 26  | 27  |
| Pat<br><br>Open<br><br>Lat geb | Far |    | GEP<br>**12.00 joh** | Dut | |     |
| 28  | 29  | 30  | 31  | 1 NOV | 2   | 3   |
| Ghe |     |     |     |     |     |     |
</div>

Screenshots

Joplin table.png1748×769 128 KB

Log file

-1729595342156.log (81.9 KB)

dpoulton · 2024-10-22T12:07:57.279Z

marcorom7:

Everything works perfectly until I exit the Edit Mode.

By "exit the Edit mode" do you mean pressing the button that looks like this?

rich_text_editor282×200 3.33 KB

That is not leaving edit mode, that is swapping to a different editor.

If that is what you are doing to "exit the Edit mode" please expand the section below.

Explanation

Joplin has two editors that users can use for note-taking.

The icon shown by the arrow below is for the Rich-Text Editor. This is an all-in-one WYSIWYG editor for your notes.

The other button (in the red square below) is the Markdown Editor. You can "exit" the edit mode by changing the view or "layout". The arrow points at the Toggle Editor Layout button which changes the layout (or CTRL+L). Each time you press it it will cycle between editor only, split view and viewer only.

If you do not want to cycle between all three views when you press the Toggle Editor Layout button, the sequence can be controlled using View > Layout button sequence.

The below animation shows Joplin set to toggle between "Viewer" and "Split View".

Peek 2024-10-22 13-03

marcorom7 · 2024-10-22T16:58:00.686Z

Hi, thank you for the explanation.
Yes, as you supposed, I actually meant that this happens when I switch to the Rich-Text Editor, by pressing the Toggle Editor Layout button.

Here's an image of what I get in the Rich-Text Editor:

Joplin table after1101×609 83 KB

Comparing it with the other screenshot you see that the rows containing the month days aren't coloured and the text isn't bold anymore. But in daily use I'd like to work in the Rich-Text Editor, and the cell formatting would help orientation, especially when the table gets bigger by adding rows.

dpoulton · 2024-10-22T20:36:11.087Z

The different editors do not work the same way so moving between them can result in a loss of formatting. I think your problem may be that moving to the Rich Text Editor (RTE) ignores your <style></style> section.

Put the css in userstyle.css and just add only the <div> class to the note. It seems to work as the css for the class is no longer part of the note. It also means that you can use that class in any note.

In this example I have called the class "planner" and I have nested the css but it does the same thing.

userstyle.css

.planner {
    th {
        background: lightgrey;
    }
    tr:nth-child(odd) {
        background: lightblue;
        font-weight: bold;
    }
}

Note Editor

<div class="planner">

| LUNEDÌ | MARTEDÌ | MERCOLEDÌ | GIOVEDÌ | VENERDÌ | SABATO | DOMENICA |
| --- | --- | --- | --- | --- | --- | --- |
| 21  | 22  | 23  | 24  | 25  | 26  | 27  |
| Pat<br><br>Open<br><br>Lat geb | Far |    | GEP<br>**12.00 joh** | Dut | |     |
| 28  | 29  | 30  | 31  | 1 NOV | 2   | 3   |
| Ghe |     |     |     |     |     |     |
</div>

editor_switch

marcorom7 · 2024-10-23T08:45:21.224Z

Wow, man, that’s elegant, thank you @dpoulton ! It's working now.

For beginners like me, I would add that you have to create the userstyle.css here: ~/.config/joplin-desktop/. It took me a little to find this out here.

Is there a way to create a userstyle.css (or similar) for the Android app?

marcorom7 · 2024-10-23T10:33:59.601Z

Excuse me, now I noticed that in the Rich-Text Editor the header doesn't keep the grey colouring. You can see this also in the animation you posted yesterday.

dpoulton · 2024-10-23T11:16:30.901Z

marcorom7:

I noticed that in the Rich-Text Editor the header doesn't keep the grey colouring.

Well spotted! I think I just concentrated on ensuring that the blue background worked!

Try:

.planner {
    th {
        background: lightgrey !important;
    }
    tr:nth-child(odd) {
        background: lightblue;
        font-weight: bold;
    }
}

There's a bit more information about using custom css in Joplin here.

marcorom7:

Is there a way to create a userstyle.css (or similar) for the Android app?

At this time custom css is limited to the desktop clients. I do not know if it would even be possible to implement on the mobile clients (I am not a dev just another user).

marcorom7 · 2024-10-25T11:03:30.174Z

Thanks a lot!
This solved also the first row background problem.
Nice to meet you