Hi,
Do you know any method to place the text from the centre to the left side?
Füles
@phlind: cooool ! I will add it to my Github repository, if you don’t mind, so others who don’t necessarily get to see your comment can still use it.
1 Like
Try
h1 {
display: flex;
width: 100%;
align-items: center;
justify-content: flex-start;
}
h1:before,
h1:after{
content: '';
background: gray;
height: .1em;
margin: .2em;
flex: 1;
}frvkl
Thanks very much, it seems it doesn’t work.
I got another solution, so my problem was solved.
Fülike
YESSSSSSSS I NEED THIS 
Hi,
Füles
The question has been asked on the forum but no satisfactory answer was provided.
Is there a way to hide in Preview the # character in front of tags?
Use a :after pseudo-element:
a.tag {
position: relative;
padding-left: 3px;
}
a.tag:after {
background: var(--text-accent);
position: absolute;
content: "";
top: 0;
bottom: 0;
width: 0.8em;
left: 0px;
/* if you have pill-style tags */
background-clip: padding-box;
border-top-left-radius: 250px;
border-bottom-left-radius: 250px;
}
/* if you have custom tag colors */
.tag[href^="#elixir"]:after {
background: rgb(142, 88, 203) !important;
}
.tag[href^="#phoenix"]:after {
background: #F67938 !important;
}
You may have to fiddle with the left:, width: and padding-left: values to fit your font and other a.tag styles. Sticking with an em value for width will help make it work when you zoom in/out.
1 Like
@lastobelus: yep, that works. I see what you did: you basically hid the # with a vertical strip of the tag’s background color. Clever!
Many thanks.
How do I select inline code in CSS? Like this thing:
```var t = setInterval(move, 500);```
I was able to select and change the color of multi-line code with .CodeMirror-code, but the inline code is still this annoying dark red…
I think preview mode follows the normal code rules and is selected with .markdown-preview-view code.
This is what I use for the editor:
/* Inline code in the editor */
.cm-s-obsidian span.cm-inline-code,
.cm-s-obsidian span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code):not(.obsidian-search-match-highlight) {
color: RED ;background-color: BLUE;
}
Change RED and BLUE to suit.
1 Like
If you want to have your paragraphs inside a block (only one carriage return, non-strict Markdown paragraphs) be visually spaced in preview mode, here is a solution straight from the devs themselves (thanks!) Add this to your CSS to get some visual line spacing between paragraphs, makes writing long text much easier if you dislike strict Mardown breaks:
.markdown-preview-view br {
content: '';
display: block;
margin-top: 10px;
}
Add this as well if you want to mirror that behavior in edit mode:
.CodeMirror pre.CodeMirror-line {
padding-bottom: 10px;
}
2 Likes
I have a snippet that adds numbers to the headers in the table of contents. Is there a possibility to have those same numbers added to the headers in the note text, like 1. , 1.1., 1.1.1., 2., 2.1., etc.?
how can I display a margin/ outer box in case of an embedded linked note? I want to show that the embed is separate from the main text. Also, can I get this in the pdf export also?
Here’s my take on sidebar outlines. It indents long headings that wrap, and uses a lighter weight font for leaf items.
.outline {
font-size: 0.8rem;
font-weight: 200;
}
.outline .tree-item {
line-height: 1.3;
}
.outline .tree-item-self {
padding-top: 0.2rem;
padding-bottom: 0.1rem;
padding-left: 0.5rem;
padding-right: 0.3rem;
}
.outline .tree-item-collapse {
left: 0.1rem;
}
.outline .tree-item-inner{
position:relative;
padding-top: 0.2rem;
/* padding-left: 1rem; */
padding-left: 1.7em;
text-indent: -0.8em;
margin-left: 0.2rem;
/* font-size: 0.9em; */
}
.outline .tree-item-children {
margin-left: 0.7rem;
padding-left: 0.5rem;
margin-top: -0.3rem;
padding-top: 0.3rem;
border-left: 1px solid var(--sidebar-marks, var(--background-modifier-border));
border-radius: 4px;
transition:all 0.5s ease-in-out;
}
.outline .tree-item-children:hover {
border-left-color: var(--sidebar-marks-hover, var(--background-secondary));
}
.outline .collapse-icon + .tree-item-inner {
font-weight: 400;
padding-left: 0.2rem;
/* margin-left: 0rem; */
/* font-size: 1em; */
}
.outline .collapse-icon {
margin-top: 0.2rem;
margin-left: -0.4rem;
margin-right: -0.4rem;
width: 2rem;
}
10 Likes
There’s a great article on Gwern Branwen’s Website on different ways to implement sidenotes. There might be something in there to help you play with it some more.
3 Likes
If you want to have a page break on PDF export when you put ---, it’s for you :
@media print {
hr {
break-after:page;
visibility: hidden;
}
}
Also, I try to use break-after:avoid but, it doesn’t seems to work… So, I use that instead:
@media print {
h1:after, h3:after, h2:after, h4:after, h5:after, h6:after{
content: "";
display: block;
height: 100px;
margin-bottom: -100px;
}
}
It prevents (most of the time) to have an H2/H3/H1 in the end of the page.
4 Likes
Hello,
Can Obsidian dev team consider making a CSS Snippet store, in constras to entire themes. This would be excellent for us to further customize and promote beautiful CSS snippets, such as the ones here.
7 Likes
I’m surprised there isn’t a #feature-requests for this already! If you do end up opening one, link it back here so other people can add their support.
2 Likes
Hi,
I made a FR last night for this:
3 Likes