#298

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);
}
3 Likes
#299

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
#300

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?

#301

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
#302

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
#303

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

3 Likes
#304

Thank you!!

#305

This is great, thank you!

#306

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

1 Like
#307

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
#308

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

#309

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

#310

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

#311

This is great!! Thank you.

1 Like
#312

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
#313

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

#314

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.

#315

@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
#316

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
#317

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?