Meta Post - Common CSS Hacks

I think it becomes pink, because devs use hue-rotate. You might want to check this out :

https://discord.com/channels/686053708261228577/702656734631821413/757850309870485515

I also ever tried to change the fill color by using hue-rotate, and it worked.

1 Like

I’m not in the server you are linking to. Give an invite maybe?

Here you go :

I also copy the message here :


From silver :
@css stylist for those who style checkboxes, your checkbox color might be weird now because we used

.markdown-preview-view .task-list-item-checkbox {
  filter: hue-rotate(42deg);
}

to get the purple box. We did not find a way to change the blue color that came with the new Chromium.

To fix your weird color, you can add this too your theme:

.markdown-preview-view .task-list-item-checkbox {
  filter: none;
}

Sorry for the inconvenience! Let me know if you know a solution that does not involve hue-rotate.


Well I saw this too late, the invite expired lol

@fourteen
you can click on discord server and get an invite

but i saw @jokysatria already post the solution from the discord channel in his reply

It’s still saying Invite Invalid :frowning:

i can still access the link. can you try using another browser?

Thanks for your sharing and I find it better for me to be like this:
/* highlight (==) not visible anymore if not active line */
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-formatting-highlight.cm-highlight {
font-size: 1em;
color: transparent;
}
It removes the distraction of “==” and avoids the alignment problem.

How do I change the text color of the tags?

No matter what I do, the tag text color stays a light shade of blue.

Customised symbolic hr line

Tested and Used in Version: 0.9.6

Preview:

Code:

.markdown-preview-view hr {
  margin-block-start: 4em;
  margin-block-end: 4em;
  border: none;
  height: 1px;
  background-image: linear-gradient(to right, var(--background-primary), var(--text-accent), var(--background-primary));
}

.markdown-preview-view hr::after {
  content: '§';
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%) rotate(60deg);
  transform-origin: 50% 50%;
  padding: 0.5rem;
  color: var(--text-sub-accent);
  background-color: var(--background-primary);
}

This is a css hack I used in my theme: Obsidianite Theme, A lot of people liked it and added to their themes, so I decided to share it with everyone. Feel free to use it to customise your own theme! :gem:

12 Likes

Does anyone know how to change color of nodes and links in graph view. I saw awesome screenshots in some threads but can’t find CSS how to do it.

Go to post 5

Hi Seregey_B,
add this to the custom.css. Works fine for me:

.graph-view.color-fill {
color: #20a020;
}
.graph-view.color-line {
color: var(–text-accent);
}

BG Stefan

Got something to contribute: Here’s how to target specifically block reference embeds:

.internal-embed[src*="#^"] 

For anyone who is interested wtf all those symbols mean — .internal-embed divs have a src attribute which has the link text in it (so if you’re linking to a block ref in a page called note, it would be src="note#^blockref".
The square bracket part is an attribute selector which checks if the src value contains (*=) #^ — which is how you tell it’s a block reference link.

If you wanted to target heading links, you want where the src contains # but not #^, so you’d have to use something like this:

 .internal-embed[src*="#"]:not([src*="#^"])

For full page embeds, you want neither # or #^ so

.internal-embed:not([src*="#"]):not([src*="#^"])

As @Klaas pointed out in discord, this also means if you want to target embeds of a specific page, you could do

.internal-embed[src="The exact link I want"] 
2 Likes

I also discovered a potential issue with the above: .internal-embed:not([src*="#"]):not([src*="^"]) is considered more specific than .internal-embed[src="Lorum ipsum test"] (because of the two :nots), so with the following code:

.internal-embed:not([src*="#"]):not([src*="^"]) {
    background-color: blue;
}

.internal-embed[src="Lorum ipsum test"] {
    background-color: yellow;
}

The “Lorum ipsum test” embed is coloured blue, not yellow like I would normally expect.

Adding the :nots fixes it though (because now it’s more specific):

.internal-embed:not([src*="#"]):not([src*="^"]) {
    background-color: blue;
}

.internal-embed[src="Lorum ipsum test"]:not([src*="#"]):not([src*="^"]) {
    background-color: yellow;
}

And the the “Lorum ipsum test” embed is yellow

Please try this:

.popover.hover-popover {
  position: fixed;
  top: 100px !important;
  max-height: 700px; 
  min-height: 100px;
  width: 500px; 
  overflow: overlay;  
  padding: 0;
}

.popover.hover-popover .markdown-embed  {
  height: 100%;
}

It can work in 0.9.12, but isn’t perfect, because the upper border is fixed and the popover may be farther away from the mouse position. And if you have any ideas, please let me know.

Does specifying a color for a certain tag only work in preview, or can it be done for editor mode too?
(Apologies if this was answered, I looked but might’ve missed it.)

Try to see this link:
https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/190

thanks…this doesn’t end up helping, though. it includes a lot of stuff that I don’t want (pills) and i can’t parse out what’s useful here. In fact, when I tried pasting it in over the existing code, the effects only showed up in preview mode.

In the CSS I’m working off of, the entirety of the code for tags is:

.cm-s-obsidian span.cm-hashtag,
a.tag {
color: var(–accent-2);
}

.tag { color: var(–accent-2);
}
.tag[href="#litnotes"] {
color : #c7fd8b;

So the #litnotes tag shows up with a unique color in preview, but not in edit.