Custom CSS for TTRPG statblocks?

General
1

Hi! I’ve just started using SilverBullet after migrating from Logseq last week - love what I’m seeing so far!

I’ve been trying to find a way to get really nice-looking TTRPG notes and statblocks inside SilverBullet (recently came across this thread around querying the Open5E API within SilverBullet which looks quite promising (not sure if it works with V2 or not)). I also know that it’s possible to specify a custom CSS class for a page using frontmatter, which can then be styled using custom space-style code.

My main question is: would it be possible to apply custom space-style to a particular statblock section of a page, or render a section of a custom-styled page within another page?

I’m essentially wanting to find a way to replicate the behaviour from this Obsidian-focused GitHub repo inside SilverBullet.

Any assistance on this would be greatly appreciated :slight_smile:

2

If I understand you correctly, something using tags comes to mind.

.sb-table-widget:has(.hashtag[data-tag-name="table-to-style"]) {
  outline: red solid 5px;
}

If you now have a table

| A | B #table |
|---|---|
| 1 | 2 |

With the tag you specified you can style that table. You can also hide the tag using css. Tables without that tag don’t get styled. There are probably easier solutions, but this comes to mind right now.

If this doesn’t work maybe this API is of use to you. It’s a little lower level but you can just insert html with any style you want.

3

Excellent, thanks for that. The HTML API looks like it’ll do what i need. Is it possible to set up a page template (or slash command) with some boilerplate to make it easier to input data for multiple stat-blocks? Given it can’t be copy-pasted Markdown if I go down this route.

4

You could write a space lua function, which takes the data in a table and returns the html for that table.

5

Awesome, thanks again. Will continue to learn Space Lua and see what I can come up with.

6

Hey!

Do you have a snippet or an idea how could this be made with highlighted texts?
Also, how could anyone hide the tag? I’m not very experienced in css

7

What are you specifically trying to do? You can just highlight using ==Highlighted Text==

8

I meant to set different colors to highlighted text, for eg. ==#blue hello world== should be blue, and ==#yellow hello world== should be yellow. I did attempt this with modifying your solution but couldn’t make it work. I thought maybe you have some idea

9

Cooked something up, don’t burn yourself.

.sb-hashtag[data-tag-name="blue"]:has(.sb-highlight) + .sb-highlight,
.sb-hashtag[data-tag-name="blue"]:has(.sb-highlight, + .sb-highlight) > .sb-highlight,
.sb-hashtag[data-tag-name="blue"]:has(.sb-highlight) + .sb-highlight + .sb-meta.sb-highlight,
.sb-meta.sb-highlight:has(+ .sb-hashtag[data-tag-name="blue"]) {
  background-color: blue !important;
}

.sb-hashtag[data-tag-name="blue"]:has(.sb-highlight) + .sb-highlight {
  display:inline-block;
  text-indent: -1ch;
}

.sb-hashtag[data-tag-name="blue"]:has(.sb-highlight, + .sb-highlight):not(:has( + .sb-highlight + .sb-highlight.sb-meta)) {
  display: none;
}
1 Like
10

It works really good! Thank you for helping out!