Meta Post - Common CSS Hacks

Just a small change to align the tab container header with the note header:

Before:
Bildschirmfoto 2021-01-12 um 21.52.10

After:
Bildschirmfoto 2021-01-12 um 21.58.39

CSS:

.workspace-tab-header-container {
    height: 36px;
    padding-top: 8px;
}

.workspace-split.mod-left-split > .workspace-leaf-resize-handle, .workspace-split.mod-right-split > .workspace-leaf-resize-handle {
    height: calc(100% - 36px);
}
4 Likes

After reseaching in the “App.css” files that defines all the default values and objects behaviours, I’ve succeeded in defining something much more satisfying for me. Here it goes :

/* -------------- bigger link popup preview -------------- */
.popover.hover-popover {
    transform: 	scale(0.9);
    max-height: 700px;
    min-height: 300px;
    width: 		800px;
    overflow: 	auto;
    padding: 	1rem;
}

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

You can, of course, adjust the values to your liking !

Olivier :-{)

5 Likes

I really like this snippet that it totally remove the scrollbar from embeds.
However, it make the words blur for me when i set transform scale to be larger than 1. Do you also have this problem?

Hi, complete newbie here. Sorry if this is a dumb question, but how are we supposed to incorporate these into our current community theme? Are we supposed to copy and paste the code snippet into a plain text editor and store it in the vault/.obsidian/snippets folder?

2 Likes

Yes, put the snippets as CSS files into that folder, and enable snippets in Obsidian settings. When Obsidian reads that folder (you can force the refresh too), the snippets it recognized will be shown below in a list, and you will be able to turn each snippet on or off individually.

4 Likes

@borborygmus: you can find plenty of newbie snippets here.

3 Likes

Thank you!!

This is great, thank you!

Wow really great! I realized it but was not in the mood of searching for this specific hack. Appreciate it

1 Like

I just found out about queries and wanted to share what I am using to delete the query title and the highlighting of the “found” elements:

/* Hide search query title and stop highlighting found element */
/* ----------------------------------------------------------------------------- */
.markdown-preview-view .internal-query.is-embed .internal-query-header {
   	display: none;
}

.search-result-file-matched-text {
    color: inherit;
    background-color: inherit;
}

Maybe one can help me with this issue: I want to show more of the “context” around the query and not just some words. Unfortunately, the query result does not use the whole line width… Is there any way to accomplish this?

4 Likes

@burrito: good question. I compared the query approach with the global search through the panel, and found that they are exactly the same. I had expected the query, being embedded in a note, would show more context.

Hello,
Thanks for putting the code together.
I have tried using this code but it doesnt seem to change the colour of the tag pills in the editor mode.
Please advise. Thank you

@spacecadet: there is also a Github repository with useful CSS snippets that was intended for newbies, although all and sundry use them too :grinning:

Tag pills are covered in their own section there. You will find the link to the Github repository here.

This is great!! Thank you.

1 Like

Outliner for the outliners

This seems to work for the latest version:

  .tree-item-collapse {
    padding: 2px 15px 2px 15px;
    left:1.5px;
  }
   div.tree-item-inner{
    position:relative;
    padding-left: 5px;
   }
  .outline .tree-item-children {
    margin-left: 20px;
    border-left: 1px solid rgba(118,158,165,0.2);
    border-radius: 4px;
    transition:all 0.5s ease-in-out;
  }
  .outline .tree-item-children:hover {
    border-left-color: rgba(118,158,165,0.4);
  }

.tree-item-self .collapse-icon {
   margin-left: -8px;
}

EDIT: the lines weren’t showing under the arrows properly, so added some extra CSS that rectified it for me. Not an expert with CSS, just building upon what others have posted and winging it! :smile:

I just need to see if there’s a way to get the items to adopt the header or tag colours in this view now.

3 Likes

This doesn’t work on current version (0.10.13).

You give me hope @Klass to see you barely knew CSS such a short time ago. Kudos to you.

I need dark mode for my eyesight, as it makes some text hard to read, so it looks like I need to learn enough to get everything the way I can use it.
I am following your posts. Thanks.

@oxysmart: thanks for your kind words. I am still not an expert by a long shot. I do have a lot of snippets I collected since May (when I joined Obs) simply by trying various themes and tweaking them. Remember, whatever theme you use, after a while you’ll want to change it slightly here and there. My snippets are stored on Github and accessible for anyone interested.

Now to your issue: you need dark mode. Do you need help with anything? You know, I hope/assume, that between light and dark mode is a question of toggle in the Obs settings, right?

1 Like

Here is an even further improved popover. Your version was causing a second scrollbar to appear in the popover making it so I could not scroll the page. I’m on v0.11.0

/* -------------- bigger link popup preview -------------- */
.popover.hover-popover {
    transform:  scale(0.9);
    max-height: 800px;
    min-height: 300px;
    width:      800px;
    overflow:   auto;
    padding:    0rem 2rem 2rem 2rem;
}

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

/* Hides the second limited scrollbar in popovers */
.markdown-embed-content > div.markdown-preview-view{
    overflow: visible;
}
3 Likes

Just tested. If the link is close to the bottom, and you open the popover, the whole app gets a second scrollbar and things become really confusing with scrolling within the popover, within the page, and within the app.

Is this expected behavior?