Meta Post - Common CSS Hacks

Unfortunately, The pop overs are not controlled via CSS initially, they are inserted into the HTML by the application. At that point, they aren’t within any related section that could be targeted. They always go at the end in their own div so you either target all popovers or none.

You could disable pointer events for the button, this would prevent the pop over. It would also make it so you couldn’t click on the button either which would defeat the purpose of it as a link.

I like the idea, it looks cool. I would ask, however, why use a button there instead of using the outline view to jump directly to where you want to go or just use the Home button to go to the top? Does it not fit into your workflow or some other reason?

Thanks for the elaboration! I see now…If that popover property isn’t controlled via CSS, then I think little could be done to change the situation.

For the reason to add a little “back to top” button instead of using the outline pane (which I agree should be more effective and dynamic), is somehow related to my office scenario. I worked in a small study team of 8 people, and we have a shared “handbook” database containing long documents and reference articles built by obsidian. Since most of my team member are using old monitor with small screen size (those old 3:4 small LCD), and need to open 2 to 3 documents side by side while working, they tended to close all the sidebars and panes in order to maximize the content viewing area. That’s why a small button located at the bottom would be easier for them to jump back and forth throughout those long passages (there’s also an inline “index” linked to different section of the page at top). But for other ordinary usage, I guess this “button” won’t be that necessary as the built-in outline pane would be more feasible.

This is great, thank you. All those blank lines gone …
I have two more problems though, here is hoping that you can help.

  1. When I have bullet lists, the first level works fine. But on the second level,when use bullets (tabs) or numbered lists as part of a text, most or all of the text above the last bullet disappears.

  2. This beautiful blank-line free layout disappears when I export to pdf - all the blank lines are back.

To further remove the header, add the following part:

/* remove the first heading*/
.markdown-preview-view .markdown-embed-content>:first-child { display:none;}

Breaks embeds. Outputs blank. (only the link icon at the right end, nothing else).

Can you please help? @MooddooM

Hey Shamama, can you tell me what theme you’re using in that screenshot?

Thanks.

@Lithou: Thanks for the update, really helpful. And it now allows using “standard” tables without any “overlaid” extra CSS using !important.

Panic Mode

1 Like

Is it supposed to see the substrings of thoughts (e.g. the sub bullets connected with the lighter shade in blue) only in preview mode and not in editing mode?

the text justification is not working for me either @Klaas. i am using Obsidianite Theme. i am new to the css themes and dont know how to properly edit them without messing them up. i copied the text above and created a text file with text edit on mac and renamed the file extension to .css. i put it inthe snippets folder inside .obsidian folder. even when i turn on the snippet, nothing happens. the other snippet auto fade note controls dint work either. your help would be greatly appreciated. thanks

@drjkpalli : this is a very long thread, so rather than me scrolling through it to find what you are referring to, could you describe your problem?

@Klaas thanks for your time. I am referring to the text hyphenation and justification .css snippet code that you mentioned above in your list of snippets. I am using the obsidianite theme(by tri diamond) and can’t get the text justification (or hyphenation) to work. Neither can I get the auto fade note controls to work with the theme. Your help is highly appreciated.

@drjkpalli : OK, I understand. I mentioned in one of my comments above that I am not a CSS expert. I have collected a great number of snippets that I use as they are. I know how to make small changes, like changing the color from red to blue, but that is about it.

I used the text hyphenation/justification snippet in a number of different themes and it always worked for me, so I cannot understand why it does not for you.

As for the fade note controls, I do not use it, in fact I cannot even remember what it was about.

I suggest you open a new Help thread for each of these, or you could ask in the css-channel on Discord.

I am sorry I cannot be of more help.

Really amazing! But how can I add these colorful tag pills also in Tag Pane? + in Edit/source mode and not only preview mode?
(it is mentioned here: obsidian-css-snippets/Tag pills.md at master · Dmitriy-Shulha/obsidian-css-snippets · GitHub (the first block on the page is for tag pills in edit mode, the third is for tag pane)
but i don’t know how to modify your code in order to add them in the tag pane + in edit mode! Any help?!

Custom CSS: Line under Heading in editor mode

Things I have tried

  • CSS
/** ........ 2.11.3 Heading Horizontal Lines -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/288?u=tallguyjenks */
h1,h2,h3,h4,h5,h6 {
	display: flex;
	width: 100%;
	align-items: center;
}
h1:before, h1:after, 
h2:before, h2:after, 
h3:before, h3:after, 
h4:before, h4:after, 
h5:before, h5:after, 
h6:before, h6:after {
	content: '';
	background: var(--bright-aqua);
	height: .1em;
	margin: .2em;
	flex: 1;
}
h1 > a {
	padding: 0 0.25em!important;
}
h2 > a {
	padding: 0 0.25em!important;
}
h3 > a {
	padding: 0 0.25em!important;
}
h4 > a {
	padding: 0 0.25em!important;
}
h5 > a {
	padding: 0 0.25em!important;
}
h6 > a {
	padding: 0 0.25em!important;
}

.cm-header::after {
  content: '';
  flex: 1;
  margin-left: 1rem;
  height: 1px;
  background-color: #000;
}

What I’m trying to do

  • Code is working in preview mode but not in editor mode
  • I want this type of display in editor mode too
1 Like

@bhickta : I think that comes from @SIRvb’s theme - he may well be able to help.

Is there a way to adjust the colors in the outline plugin view? I’d like the H2 items to be slightly darker than the H1 items. It seems like I should be able to style .tree-item-children.tree-item-inner perhaps? I can’t figure it out.

In CSS how do you say “Make changes to <span class="one"><span class="two"> but not <span class="two">?”

Hide the Title of the note from a heading link

Currently

  • [[Note1#Heading 1]] is being displayed as Note1>Heading 1

What i want

  • [[Note1#Heading 1]] as Heading1

Current work around

  • [[Note1#Heading1|Heading1]] is being displayed as Heading 1
  • Using regex expression in Notepad++ or using Sed commands in linux
    • Notepad++
      • Find: (#)(.+)(]])
      • Replace: \1\2|\2\3

Problem with current solution

  • but the above soulution need us to use “| parameter” syntax which is sometimes cumbersome to use and track
  • In editor mode, link becomes too long and takes too much space on screen

A CSS based solution

  • Kindly replay whether there a solution using CSS
  • Hide or Truncate - Internal Heading Url - Similar to this CSS hack

Hey @Moonbase59, and @arminta wondering if you might be able to help!

I am using the lovely Red Graphite theme, and I am trying to improve the spacing and presentation of my Dataview table columns. I have looked through every discussion I can on Dataview, Tables and CSS and I am still struggling. For some reason I am still getting the following behavior.

Any suggestions on how to make the table look a) a little wider and b) more uniform column width based on the content?

I realize that the outer border is being controlled by the overall container for the page, but I would love to

I love how @arminta showcased those super-wide table columns (with alternating color backgrounds!) here and I would love to implement something similar.

I have the Dataview Part down, I just need some help with the CSS. Is there some “boilerplate” or “best practice” starter CSS that you recommend. My tables feel very cramped I would love to spread them out a bit better.

Thanks so much!

1 Like

This worked for me in v0.12.12

.cm-fat-cursor .CodeMirror-cursor {
  background-color: var(--nord4);
  opacity: 0.5;
  width: 5px;
}

.cm-animate-fat-cursor {
  background-color: var(--nord4);
  opacity: 0.5;
  width: 5px;
}

.CodeMirror-cursor {
  background-color: #00ff78 !important;
  border-left-width: 0.5em !important;
  opacity: 60% !important;
 }

How did you get the copy url button on the pane header?