#1

Admonitions without icon and color

Hello. I’m trying to achieve a behavior similar to the HTML <details> tag but with the ability to render markdown and other useful stuff inside it. I tried the admonition plugin and it looks pretty cool but I have a problem. For my particular case, it would be useful if the block didn’t have an icon and any color, like the simple <details> tag, but I didn’t find a way to set it up with the plugin.
Is it possible to achieve such behavior with the admonition plugin or any other way?

#2

Each Admonition type has a matching CSS class. You could, therefore, create a custom Admonition type (let’s call it “blank”) and use a CSS snippet targeting that class. Some quick testing shows that this CSS snippet works to remove the icon from the title block, no matter which icon is chosen for the custom class:
.admonition-blank .admonition-title-icon {display: none !important;}
If you don’t ever want Admonitions to have icons, you could omit the .admonition-blank at the start but at that point you’re probably just not going to want to bother with the plugin.

A quick look at the inspector shows that the title text of the Admonition is referred to by the class .admonition-title-markdown if you want to style that. To get rid of the color, I used this snippet:
.admonition-blank .admonition-title {background-color: #00000000 !important;}
Disclaimer: I’m a hobbyist and came up with this in a couple minutes of faffing about, so if it bugs something out I apologize!

1 Like
#3

Your suggestion about icons worked! But the one about the background color didn’t. I tried ticketing with CSS but couldn’t find the needed parameter as I don’t have any knowledge of CSS. Still, thanks a lot for the help!

#4

Strange! You could try the following, which for me removes all color from the title, title background, and border: .admonition-blank {--admonition-color: #00000000 !important;}
The plugin seems to use the --admonition-color variable to compute the color of various elements within each type of admonition, so by overriding that to a color with no opacity, it should take care of all those elements at once.

#5

This also didn’t work :slightly_frowning_face:
I tried something like this with different classes like .admonition-blank.admonition-plugin and things around that, but still no result

#6

Unless I’m mistaken as to what you’re looking for, there is already a feature to allow this in the plugin. If you add a field for title: and color: and leave them blank, it will render without both.


```ad-note
title:
color:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla.
```

How it renders in my current theme:

image
image950×131 2.21 KB

You can actually control the color right in the admonition. Check out the “Options” section of the plugin’s Github readme page for more details.

Edit - codeblock

#8

The behavior I would like to achieve is a bit different. I would like to have a collapsable admonition, so I will need a title, Also the color: parameter can be used to disable the outline color, but not the background one. Here is an example with a white theme:

```ad-blank 
color:
test
```

image
image758×165 2.78 KB

I would like to get admonition without both the title icon and background color.

The main idea is to be able to hide big blocks of information inside such blocks without drawing additional attention. For example, explanations and examples can be easily skipped if not needed but will always be here for you to read.

#9

@trimple - Yes, adding the collapse behavior makes things much harder.

I do know you can keep the collapse behavior by adding title: &nbsp; but that still leaves the icon. I don’t think it’s possible to add a custom admonition without an icon.

image
image1016×73 10.5 KB

You could probably work around this by creating a transparent icon yourself and calling that. Sorry, I’m not in a position to attempt that right now.
Good luck!

#10

You could use:

title: &nbsp;
icon: 
```
#11

Thanks a lot for the help anyways! Have a great time.

1 Like
#12

Thanks for the reply. This does not disable the icon :slightly_frowning_face: Also I would need a title it is ok, but I don’t want the colors.

#13

Just for clarifications. I would like to have behavior something like this:

Name of the bock Some proper **markdown** with MathJax, Mermaid, colored code blocks support.

The block above doesn’t have any background colors and frames. This is what I’m trying to get.
Maybe this is a bit weird request to have though.

#14

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