.css question

Lounge
1

Good morning,

is there a parameter for userchrome or userstyle that I could use to have highlighted text (i.e ==text==) not show as a square box but rather as an oval shape, like the tags at the bottom of the editor window?

Regards,
kai.

2

Try the below in userstyle.css.

mark {
    font-size: 12px;
    padding: 4px 10px;
    background-color: rgb(244, 245, 246);
    color: rgb(115, 133, 152);
    border-radius: 100px;
    border-width: 0px;
    }

So that they match, the settings have been taken from the css for the tag buttons (light theme).

Using the above the code ==highlight== becomes image

If it is only the shape you want to change use:

mark {
    padding: 4px 10px;
    border-radius: 100px;
    border-width: 0px;
    }

image

2 Likes
3

That is precisely what I was looking for, thank you very much.

Background: I have always envied the users of the inline-todo plugin, which displays the assignee in confluence-style. I do not use this plugin, but would like to have a similar visual impact.

Your solution is exactly what I was looking for;
thank you kindly,
kai.

4

Apparently I can modify a number of css parameters in the userchrome or userstyle files. But is there a readeable repository of paramers used by Joplin I can can access? Or is this all general css-stuff that I neded to look up elsewhere?

Cheers,
kai.

5

There is no list of parameters. The way to find the names of any elements you may want to try to modify is to use the Development Tools built into Joplin.

This post gives an introduction.

1 Like
6

Yes, I was aware of that, but I have difficulties using it properly. For instance, using the dev tools (element inspector) for my original question the highlighted object is called "strong"; not "mark" as you correctly pointed out.
So what am I missing here?

Cheers,
kai.

7

Have you made the text you are highlighting bold?

<strong> means bold, <mark> is highlight.

You can see it here in the element inspector.

image
image932Ɨ487 73.1 KB

If you highlight bold text the inspector shows you the last element used. If you look at this screenshot you will see that the strong or bold text is wrapped in <mark> tags.

image
image933Ɨ550 75.5 KB

In the viewer pane most of the tags you will see are standard html tags as Joplin has converted the markdown to html. Tags like strong, bold, a, div span, p, mark are standard html and after a while you will recognise them and what they do.

8

Sorry, my mistake, the example used was in fact bold. With a non-bold object it works as you suggest.

Thanks again for the feedback; made my notes prettier.

Cheers,
kai.

1 Like