Idea: Custom CSS (updated to data attr)

Fixed or Completed
1

I really like when I have an option for custom CSS in apps, like in Roam, LogSeq, Obsidian or RemNote.

Here is my suggestion how it could work:

image
image730×511 34.9 KB

1 Like
2

I recommend you use a browser extension for this. The downside of this approach is that I can’t guarantee that future changes won’t break your css. This is even more of an issue for Kinopio than some of those other tools because the Kinopio interface evolves relatively fast

3 Likes
3

Fair. The issue with the extension is that it does not work with the desktop app. But I get your point.

2 Likes
4

More important for me would be, if there were some data- attributes :). Like that would have something like data-tags=“tag 1, tag 2” etc. That would allow styling of cards based on their tags :).

But again, I understand if it is no high priority :).

1 Like
5

+1 to adding data attributes so I can see @CatoMinor work some magic :slight_smile:

6

sounds good, just added data-tag-name attr to tags on card. let me know if you want other data attrs

2 Likes
7

that’s neat, just brainstorming: you could use this mechanism to take cards with a certain tag out of absolute positioning and create a list somewhere in the space (by targeting those cards and setting their position to static, like I did here: Cards displayed in a list - Clubhouse - Kinopio Club)

8

Amazing. I will try to describe a little bit more where I wished to have data-attributes, why and what one can do with them.

I will start what one can do with them with some examples from Roam:

  • I have used #c-COLOR tags to change highlighting color of the subsequent ^^highlighted text^^
  • I have used tags to color whole blocks, create specific blockquotes etc. (like #commnet, #important etc.)
  • I have used TODO to affect appearance of cards in various ways
  • In RemNote, I have used specific tags to add, e.g., icons to some specific type of pages (like for articles, books etc.).

Other people did many great things with that. And I admit that this is a little bit fiddling and playing. However

So what I would need for this to work?
data- attributes: Ideally for tags and types of connections

However, important is “where”?
In order for me to use them, they have to be on the right level. Otherwise, I cannot select them by CSS selectors - or I can select them but not use them for much.

Here are some examples:

  • data-tag-name should be on the level of “name-segment”
    image - So one can use a tag to change the appearance of the following text.
  • data-tags could be in - so I could change the appearance of the whole card.
  • is-checked class could be also in the element
  • each connection on the level of “path” could have “data-connection-name” with the name of the connection.

Is this something urgent?
Not at all. :slight_smile: Just brainstorming and trying to explain what one can do with that.

1 Like
9

maybe the css .has selector would work for this?

I think you can use it to identify .cards that has (aka contains) .tags with specific data attrs

2 Likes
10

oh arg doesn’t look like :has is supported by browsers yet…

2 Likes
11

:has is in the specs already for so long … and it is still only in the Safari Preview version. :confused:

2 Likes
12

so let me see if I have this right.

on .name-segements

for md txt segments:

data-segment-types=STRING (tag, link, bold, h1, h2, h3, emphasis, strikethrough, codeBlock, code. In some cases multiple types might be in the same segment eg "bold text")

for tag segments:

data-tag-color=STRING
data-tag-name=STRING

on .cards

data-checkbox=STRING (either '[]' or '[x]')
data-background-color=STRING
data-tags=STRING “cool-tag1 tag2” stringified list

on .connection .paths

data-type-name=STRING

does this sound right?

2 Likes
13

That sounds very good! Ideally, .card element would have “data-tags” with the list of all tags used. :slight_smile:

1 Like
14

Yeah, +1 to this. Getting a list of tags at the card level would let you use tags to drive conditional formatting, etc.

1 Like
15

Update my post above w data-tags for cards. How’s that look?

2 Likes
16

Sounds good, just one small issue. Theoretically, it is possible to have commas in tags. Wouldn`t that couse some problems? “[tag1, tag2]” But probably not.

Roam uses: “[“tag1”,“tag2”]” - This is, however, actually against HTML specs! :smiley: If you chose this route, replace the “tag1” by ‘tag1’ :slight_smile:

RemNote has: data-rem-container-tags=“tag1 tag2”

Which may seem weird but it actually replaces all spaces, commas, : etc. in tags by “-”, convert to small letters , i.e. “A long, tag” becomes “a-long-tag” . To me, this does not look like as the worst solution.

I will check LogSeq later :).

However, your original solution seems also fine to me :). Just putting here a couple of things to consider.

1 Like
17

Good point. I can reuse the code that turns space names into urls for this

Cool Tag = cool-tag
cool,tag = cool-tag

1 Like
18

That sounds good! :slight_smile:

19

updated the reference post above Idea: Custom CSS (updated to data attr) , and just released the updates live

1 Like
20

Amazing! It works :).

image

Now I have to learn how to do that without breaking something :).

1 Like