Create smart callouts that have a different icon and background color as needed

Support
1

Hello everyone. Day by day I am customizing Joplin so that he can respond to my needs. One of the changes made to the application, thanks to the userstyle.css file, is to use blockquotes to create callouts. The following code is part of the change made.

blockquote::before {
	flex: 0 1 auto;
	padding-right: 15px;
	font-size: 15px;
	content: "📌";
}

blockquote {
	display: flex;
	flex-flow: row wrap;
	margin: 0 0 20px !important;
	padding: 16px !important;
	background-color: var(--grey);
	border-left: 0 !important;
	opacity: 1;
}

blockquote p {
	flex: 1 0 90%;
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 300;
	font-size: 14px;
}

blockquote ul,
blockquote ol {
	flex: 1 0 90%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 45px;
	padding-top: 5px;
}

blockquote li {
	margin-bottom: 0;
	font-weight: 300;
	font-size: 14px;
}

What I would like is to make this callout "smart", I'm going to explain in detail: based on some conditions I would like to change both the icon and the background color in a "smart" way. Can you think of any ideas to make it happen? I hope I was clear. Thanks in advance to anyone who wants to help me.

2

This looks like what the Admonition Plugin does.

It has some presets for the following types

Type
note
abstract
info
tip
success
question
warning
failure
danger
bug
example
quote

image
image1475×1190 74 KB

(Click to enlarge)

EDIT Added the correct link for the Joplin Admonition Plugin.

2 Likes
3

@dpoulton Thank you very much for the answer, that's exactly what I meant, but I would like to get the same result with my own code, both to be able to maintain and customize it independently.

4

I'm not sure you will be able to get "smart" features without using the plugin (or a similar plugin you write yourself) as it adds css classes for each different callout type. At the moment you are limited to blockquote which you can only modify the once.

However in a reply to GitHub issue #4 for the plugin (see GitHub link above) the plugin author does say:

I just tried overriding a color via userstyle.css and it seems to work well. You can use markdownit-admonition.css as a reference.

The css file also contains the callout icons. The author does not specifically state it but maybe the icons could also be customised using userstyle.css?

5

Thanks @dpoulton, in the end I tried to create a solution myself using HTML tags and for the CSS the :has() selector, but using only these tools is limiting.

So I followed your advice, installed the Admonition markdown extension and customized the callouts inside the userstyle.css file.

6

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