Removing header when embedding within a kanban card

What I’m trying to do

Using the Kanban plug-in I want to be able to embed content from under a header in another note but for it to not show the header, only the content beneath it.

Things I have tried

I have found and used various methods for removing headers when embedding using css snippets. Such as here using

.hide-embedded-header1 .markdown-embed h1{
	display: none; 
}

and then adding

---
cssclass: hide-embedded-header
---

to a note to hide embedded headers within that note. I like this option because it allows control over whether headers are included or not on a note by note basis.

This works, just not with the Kanban plugin.

The same using this css snippet for headerless transclusions - it works, but not in the kanban plug-in. Both of these methods work when the kanban board is in markdown mode but stop working when kanban is activated.

It seems like the answer is probably a snippet that specifically targets the embedding of headers within the kanban plug-in. I have tried combining these snippets with bits of snippets that affect the look of the kanban plug-in specifically but I know very little about css and have had no success.

Does anybody have any idea how I could achieve this? It would be greatly appreciated.

I’m trying to follow what you’re doing, but I’m not grasping it. Given a Kanban board like TestKanban, with the headers “A” and “B”, are you just trying to do ![TestKanban#A] without getting the A header? Or is it something else you’re trying to do?

If doing like the above, why can’t you then use the cssclasses ?

If your use case is different, please gives us some examples so we can understand what you’re doing, and when it fails.

Thanks for the reply. Yes you seem to have understood what I’m saying but maybe a more complete description would make it clearer. I want to have various Kanban boards where I’m listing tasks into columns named after months:

Board1

## Jan
- [  ] some task
- [ ] another task

## Feb
- [ ] more tasks
etc.

I then have a master board that brings together all of these tasks with each board getting a separate card

MasterBoard

## Jan
- [ ] Board 1 tasks<br>![[Board1#Jan]]
- [ ] Board 2 tasks<br>![[Board2#Jan]]
- [ ] Board 3 tasks<br>![[Board3#Jan]]
etc.

Using the snippets, in markdown mode this displays how I would like it without bringing in the header “Jan” from boards 1, 2, and 3. However, when I switch to kanban mode, each card has a big “Jan” header at the top. It’s usable but rather annoying.

I tried replicating that setup, and found the following elements related to the embed:

image

This part came from B stuff<br>![TestKanban#B]], so maybe something like:

.kanban-plugin__markdown-preview-view h2 {     
  display: none;
  /* background-color: green; /* */ 
}

I’m slightly worried that this would hide all h2 headers though in your embed, but the thing is you need to play around with the CSS selector. Maybe the following would be even more to the point related to the embedding:

.kanban-plugin__markdown-preview-view > .kanban-plugin__embed-link-wrapper, 
.kanban-plugin__markdown-preview-view:has(.kanban-plugin__embed-link-wrapper)  h2:first-child  {
  display: none;
}

This snippet removes both the link wrapper link (that’s the first line), and the first h2 of the embed, if I’m not mistaken.


Anyways, part of the trick related to stuff like this is to use the Element pane in Developers Tool. This will show something like the image above, and then you need to pick out the most unique parts and combine into a CSS selector which suits your need. In the first variant, there is a comment with background-color, so if you remove the leading /* it’ll kick into action (if the display: none isn’t there). I use code like that make sure that my selector hits the target before I start hiding stuff.

Do note that I’m not the best CSS artist around, but hopefully this should get you started!

1 Like

Thanks so much! That second option is hiding embedded headers but not headers in general.

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