Meta Post - Common CSS Hacks

Share & showcase
507

Thanks! I like the design and it looks so good.

1 Like
511

I have some problems coloring hastags on hover. In preview mode, it already works, but in editor mode, the # has a different class (.cm-s-obsidian span.cm-hashtag-begin) than the tag itself. The following works for hovering over the the tag name, but the # will not be colored on hover in editor mode:

.tag:hover,
.cm-s-obsidian span.cm-hashtag:hover
{
  color: var(--text-hashtag-hover);
}

How can color the whole tag including # when hovering over either the tag name or #?

1 Like
512

Anyone can help? This cannot work on the latest version anymore.

515

Can someone test css: @keyframes for .markdown-preview-view hr {} with your own animations.
Keyframe animations are not working after declaring the animation attribute with all the required values.

516

Hi! Discovered your css snippet - it’s awesome, thanks!
By the way I have a pattern when I’m embedding stuff in daily notes from like “progress” notes.
https://drive.google.com/file/d/1t6FZk82xjK3mNEZ-p0tWJ6oK1uxvaSUC/view
My apologize for Russian everywhere

So for me it was critical to hide also titles of links and I solved this via addition to your snippet:

/* remove embed title */
.markdown-preview-view.clean-embeds .markdown-preview-view > div.markdown-preview-sizer.markdown-preview-section > div:nth-child(2) { 
  display: none
}

You may also provide this addition commented in your snippet

517

A post was split to a new topic: Difficulty with Obsidian CSS

518

Ok. CSS neophyte here and first posting. I am using the default theme. First off, I cannot find an obsidian.css file, but have added some snippets. Very elementary stuff. I am just looking for a way to display headings in color in the ‘editor’ mode. I added a snippet below that works in ‘preview’ mode for H1, H2, and H3, but not H4, H5, and H6 I have searched the forum with no luck. Any help appreciated.

h1 { color: #C731D2; }
h2 { color: #FABB88; }
h3 { color: #FF8888; }
h4 { color: #32D6CA; }
h5 { color: #CAE317; }
h6 { color: #FF8888; }

519

Hey there,

for coloring headers in preview and editor mode, I use this:

/******* HEADING COLORS *******/
.markdown-preview-view h1,
.cm-header-1
{
  color: var(--text-title-h1);
}

.markdown-preview-view h2,
.cm-header-2
{
  color: var(--text-title-h2);
}

.markdown-preview-view h3,
.cm-header-3
{
  color: var(--text-title-h3);
}

.markdown-preview-view h4,
.cm-header-4
{
  color: var(--text-title-h4);
}

.markdown-preview-view h5,
.cm-header-5
{
  color: var(--text-title-h5);
}

.markdown-preview-view h6,
.cm-header-6
{
  color: var(--text-title-h6);
}

You can either declare the variables I use as e.g.

.theme-dark
{
--text-title-h2: #eadfbd;
...
}

or insert your RGB codes directly.

1 Like
520

That worked perfectly. I just created a snippet with that code with color adjustments. Thanks.

1 Like
521

Hi, is there a plugin or a CSS snip that trigger through command like “Create a Table of Content” that make H1 to H2 normal black bold but H3 to H4 gray bold like normal H6. And the content under H3 or H4 is fold but content under H1 to H2 is unfold that resembling like a table of content in a book. I hope everyone understand what I mean.

522

I really appreciate this clean-embed everywhere snippet. It’s not working with the new live preview feature in the current beta though. Has anyone tinkered with it to get it working?

523

This should be an easy fix. The snippet is targeting embed classes that are nested in a .markdown-preview-view class, but in live preview mode you’re working with .markdown-source-view as the parent class. Swapping the latter with the former should fix the problem.

3 Likes
524

How do I get the cursor to not blink though?

Also, is there documentation for messing with the cursor? I didn’t see it anywhere on the obsidian site.

525

@derekvan: you can also try @smurfman111’s snippet that works in both CM5 and CM6/Live Preview.

526

Hi, am i missing something? This code is not making embedes inline

![test] ![test2]

They are displayed on different lines.

Block references are working perfectly and are on the same line. But I, unfortunately, you can’t export them to DOCX at the moment

![test1^block] ![test2^block]
527

@baxterqc: here a is a snippet by @smurfman111.

2 Likes
528

Thanks, I tried it. It works for block references too, but still no luck with usual embeds

529

@baxterqc : what do you mean by the “usual” embeds?
What are you looking for with those?

530

1
2

Basically, what i want is “Embtest” and “Embtest 2” to be on the same line.

531

@baxterqc don’t use the cssclass front matter if you are using the snippet I pointed you to.