Klaas
July 20, 2020, 9:49am
54
Forgive me I sound facetious, but aren’t highlighting and boldening, as well as italicising, underlining, and using red (or colours) for the font of certain parts of text all formatting features that have been around for yonks? And we know how to implement that kind of formatting, as @Meins points out for highlighting.
Having read Tiago Forte’s article, his point is not the special formatting per se, but the use of it to guide him in his progressive summarisation process.
1 Like
You are right. I just don’t know if I should delete my post or not.
1 Like
Klaas
July 21, 2020, 5:09am
56
Leave it, it does not hurt
3 Likes
May I suggest to include 2 screenshots in the template: without hack and after hack?
Also, you can include it your list post or convert it to a table?
3 Likes
argentum
Split this topic
October 9, 2020, 9:26am
58
36 posts were split to a new topic: Clutter free edit mode
Tag Pills in editor (tested on 0.8.0)
Before
After
To get tag pills in editor, get the code from this post:
this worked for me :
.tag[href="#important"] {
color : red;
}
Tag Pills
0.73
[Obsidian_7eMo0E8BFS]
.tag {
background-color: var(--text-accent);
border: none;
color: white;
font-size: 11px;
padding: 1px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 0px 0px;
cursor: pointer;
border-radius: 14px;
}
.tag:hover {
color: white;
background-color: var(--text-accent-hover);
}
.tag[href^="#obsidian"] {
background-color: #4d3ca6;
}
.tag[href^=…
Then replace this block (the first one):
.tag {
background-color: var(--text-accent);
border: none;
color: white;
font-size: 11px;
padding: 1px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 0px 0px;
cursor: pointer;
border-radius: 14px;
}
with these two:
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end:before {
content: '#';
}
.tag, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end {
background-color: var(--text-accent);
border: none;
color: white !important;
font-size: 11px;
padding: 1px 8px;
text-align: center;
text-decoration: none !important;
display: inline-block;
margin: 0px 0px;
cursor: pointer;
border-radius: 14px;
}
10 Likes
Klaas
July 24, 2020, 10:54am
67
Thank you, that’s very neat
1 Like
I’ve been toying with this one! This code works well for the tags, but unfortunately it also affects HTML tags within code blocks. I modified it a tad so it ignores HTML blocks.
/* ====== Tag Pills ======== */
.tag:not(.token) {
background-color: var(--text-accent);
border: none;
color: white;
font-size: 11px;
padding: 1px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 0px 0px;
cursor: pointer;
border-radius: 14px;
}
.tag:not(.token):hover {
color: white;
background-color: var(--text-accent-hover);
}
.tag[href^="#obsidian"] {
background-color: #4d3ca6;
}
.tag[href^="#important"] {
background-color: red;
}
.tag[href^="#complete"] {
background-color: green;
}
.tag[href^="#inprogress"] {
background-color: orange;
}
6 Likes
_ph
August 7, 2020, 4:32am
82
Bigger popup previews with more content (see below : before/after, that’s the same content in the popup)
code:
/*============bigger link popup preview ================*/
.popover.hover-popover {
transform: scale(0.8); /* makes the content smaller */
max-height: 800px; /* was 300 */
min-height: 100px;
width: 500px; /* was 400 */
}
integrated in my theme obsdn-dark-rmx , available within the settings\Community Themes in obsidian.
18 Likes
Anyone know if it’s possible to get images to display in the editor? backgrounder-image isn’t working, is image display likely disabled in the editor?
2 Likes
3mbry0
August 9, 2020, 12:22am
84
Want to ask the same question for transclusions as well.
lizardmenfromspace:
.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
content:'';
border-left: 1px solid rgba(0, 122, 255, 0.25);
position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px;
}
ul ul::before { left: -11px; top: 0; bottom: 0;
}
Sorry, I’m new to this CSS thing. Where exactly should I paste this code?
Thanks in advance.
In your vault there should be a obsidian.css
, open it and append these lines to the file and save it. The change should be seen immediately.
1 Like
Thanks. There wasn’t any obsidian.css in my vault. I just created a txt and renamed ir to obsidian.css and then pasted the code. It works. Thanks @minhthanh3145 .
1 Like
Klaas
August 19, 2020, 3:55pm
89
@gafsiqueira If ever you want to use a custom theme, you’ll have to use that theme’s CSS sheet and put it in your vault. You can open the sheet and add this code to the bottom of it.
1 Like
_ph
August 26, 2020, 9:36pm
91
columns view for file explorer pane:
.nav-folder-children {column-width:200px;}
warning ! you need the filenames wrap mod & it’s somewhat buggy with very long filenames(the file list may jump/flicker, so you have to resize the file pane to fix) but I find it useful.
13 Likes
does anyone know how to change the look of 2nd level embed notes? (i.e. QuikNote.md in the Snapshot) i would like it to look a lot smaller.
1 Like
Silver
August 27, 2020, 7:01am
93
That’s cool! @lizardmenfromspace maybe you can add this to the TOC in the main post for easier access?
1 Like