Meta Post - Common CSS Hacks

@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.

1 Like

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:

14 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

1 Like

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"] 
3 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

1 Like

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.

This line in the link will help you:

.cm-tag-litnotes, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag-litnotes{
  color: #c7fd8b !important;
}

This does help. But–funny story–when I paste this in the color change works in Edit, but no longer works in Preview! (still an improvement, though)

Did you delete this part in your code?

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

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

I think this part is for preview. And the line i sent is for edit mode.
otherwise, i have no ideas how to achieve this.

Didn’t delete that, but you know what? I had put your piece in between two of the other lines, but now moving it from the middle to the end of that block, the problem resolves. Thanks again for your help!

1 Like