Is there a snippet to hide the View mode icon? I never change this setting, and it seems not to be hideable by Hider.
I don’t know what you mean by “View mode”. There is Reading mode and Live Preview mode. I assume you mean the icon in the top right corner of a note. If so, try this:
/* Hide Edit/Preview icon in inactive panes only */
.workspace-leaf:not(.stayopen) .view-action[aria-label*="Preview"], .workspace-leaf:not(.stayopen) .view-action[aria-label*="Edit"] {
display: none;
}
/* Hide Edit/Preview icon in all panes */
.view-action[aria-label*="Preview"], .view-action[aria-label*="Edit"] {
display: none;
}
1 Like
Snippet to shrink “pinned” tabs and add a border.
div.workspace-tab-header:has(div.mod-pinned):not(.mod-active) {
width: 55px !important;
max-width: 55px !important;
}
div.workspace-tab-header:has(div.mod-pinned):not(.mod-active) .workspace-tab-header-inner {
border: 1px solid hsla(var(--color-accent-hsl), .33);
}
When a “pinned” tab is also “active”, the tab’s width reverts to it’s original. Removing the :not(.mod-active) section of the rule will keep the “pinned” width.
1 Like
What do you need for this to become active? I can’t get it to work in Obsidian 1.1.9 on macOS.
For myself, it works as expected on default Obsidian theme. Have you disabled your current theme and seen if it works?
1 Like
Didn’t work in default theme nor minimal theme.
It works for me on MacOS.
By “active” @gapmiss means the pinned tab is in focus, i.e. you are working on that particular note. When you move to another note tab and therefore leave the pinned tab, the latter shrinks.
@holroy What version of Obsidian are you using?
I am on macOS w/
Current version: v1.1.12
(Installer version: v1.1.9)
The pinned tabs CSS, posted above, uses the CSS selector :has(). This is only available on the latest Obsidian versions, w/ an upgraded Electron engine, which has the latest Chrome CSS features.
Please note, the CSS posted above has not been tested thoroughly and is meant as a starting point for further exploration and refinement.
Obsidian version 1.1.9, with a newish installer. Electron 21, chromium 106. I’ve already tested in another context, and I do have the has: selector, so that is not my issue.
1 Like
Is it possible to reduce the opacity of the bold and italics tokens (in editor view)? See these images for what I want to achieve:
→
I’m using the minimal theme btw.
@kadmos Try this:
/* for bold */
.cm-formatting.cm-formatting-strong.cm-strong {
font-weight: 300;
}
/* for italics */
.cm-em.cm-formatting.cm-formatting-em {
font-weight: 600;
}
Adjust the numbers as per your wishes.
1 Like
That did the job, thank you!
1 Like
Hi
I tried @EleanorKonik 's blockquote and I wanted something a little less prominent or different looking and also something with curly quotes. So through trial and error with the original css I ended up with this new blockquote style. Perhaps it might appeal to you -
Light mode
Dark mode
Here’s the css for it
/* This snippet provides a style to blockquotes and to the <cite> element. */
/* for preview */
.markdown-preview-view blockquote {
border-color: #1abf7f !important;
border-left-width: 2px !important;
background-image:
linear-gradient(
to right,
rgba(26, 191, 127, 0.1),rgba(26, 191, 127, 0)
);
font-size: 1em;
line-height: 1.5em;
margin: auto;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 15px;
width: 80%;
}
.markdown-preview-view blockquote {
position: relative;
}
.markdown-preview-view blockquote:after {
content: '\275D';
position: absolute;
top: 0.4em;
left: -1em;
font-size: 2.5em;
color: #1abf7f;
}
cite {
color: #1abf7f;
text-align: end;
display: block;
}
You can change the colors to suit your theme by changing all the color elements. You can also change the font size to have the blockquote text be smaller than the basic text.
5 Likes
That is a nice blockquote indeed, well done, @ApolloGoneRogue !
Instead of the “cite” bit, you could try “signature”:
/* LP mode */
.cm-html-embed .signature {
display: block;
text-align: right;
padding-top: 10px;
padding-bottom: 30px !important;
font-family: "Apple Chancery" !important;
font-size: 16px;
color: var(--text-normal);
}
Amend font and color as you like.
1 Like
Thanks !
How do you use the signature tag inline ? And why is it better than cite ?
And also does your addition work in the editor mode ? Because I don’t use Live preview.
I did not say signature is better than cite, perhaps it is not, that is why I said “you could try”. If there is no difference for you there is no reason to use it.
Note: it does not work in editor mode, no css does.
Apologies I meant to ask about reading view not editor mode
And also how to use the signature tag ? I’m unfamiliar with HTML.
Is it like this ? -
<sig> Richard </sig>
@ApolloGoneRogue
For Reading mode you have to make some adjustments to the code, like so:
.markdown-rendered .signature {
font-family: "Apple Chancery" !important;
display: block;
text-align: right;
}
You can add an extra font-size rule or change the font-family or add a color rule.
As for the tagline, you add this to the end of the text in the blockquote:
<span class="signature">Name</span> and replace Name by the name of the author or whatever name you want.
1 Like