I added code for “Chest-of-drawers icon in nav tab” (as seen in @mgmeyers’ California Coast theme) as a replacement for the Obsidian file explorer icon.
You can find in the File Explorer section on Github page mentioned in the OP at the top of this page.
Enjoy.
The Light mode version was not quite right, so I refined it - both Light and Dark modes work well now.
If you have changed the background color of the file explorer container that lists your files, you may also want to change the background color of the top bar with the tabs.
I have added the code for that to the repository. You can find it in the chapter “File explorer - Obsidian”, section “Top tab container background color”.
I have also added code how to change the background color of a note spine in Andy mode. Check out chapter “Note title in pane”, then “Change color of note spine (Andy mode)”.
The link to the repository is given in the OP at the top of this page.
Both sets of codes are thanks to @Lithou. You can see his explanations (nos. 1 and 2 in the list) on YouTube; there are a few other useful CSS issues he deals with.
Enjoy.
Notice to all people who follow this thread:
The person who made the Github page for me changed the address somewhat, so the link I provided yesterday gives a 404. I did not update it in time, for which I offer my sincere apologies.
The link in the OP at the top of this page is now correct.
In the #css-themes channel @mdbraber asked:
Is it possible to color the text of a whole line with a specific #tag in it (instead of just coloring the tag?)
@Steve_yang provided code for this:
Steve allowed me to add it to the repository. You can find it in the chapter Sentences, section # Combine Nested tag colors and Highlight colors.
Github repository page link is given in the OP at the top of this page.
Enjoy.
@Steve_yang also provided code for Use nested tag to manage 16 highlight colors,bold,italic. You will find that also in chapter Sentences.
Steve’s explanation is here.
Is there a CSS snippet on the github page to change the colour of the highlight function i.e. “== ==” syntax highlighting?
I’ve had a browse but haven’t been able to find anything, and there isn’t really an obvious variable to change in Obsidian CSS (at least to my noobish eyes). I can change it using the element viewer but then it changes itself back whenever I update Obsidian or restart my computer.
This will do it in both preview and editor. Change your color as desired.
.markdown-preview-view mark, span.cm-highlight {
background-color: red !important;
}
For the record - I hate using the !important flag, but I find it necessary here.
Perfect, thank you!
@Rainbow_CH Can you provide the details on how you achieved this effect? I’m very interested in combining spaced repetition with Obsidian and this could be a big step in that direction. Thanks!
I added code to set the color of the dropdown box in the Obsidian settings window (Cmd/Ctrl + ,).
You can find in the Settings buttons colour section on Github page, linked to in the OP at the top of this page.
Enjoy.
@Neigh has showcased a simple way to embed a video in a notes. The code works for other videos besides YouTube too.
He has kindly allowed me to add his code to the Github repository.
You can find it in the chapter Embeds, section ## Videos.
The Github repository page link is given in the OP at the top of this page.
Enjoy.
Further to my earlier post ("How to achieve" CSS code snippets) about the dropdown box color in the settings, I have now added the code to change the arrow color in the dropbox too. The location is the same.
@Neigh provided code to add emojis to the folder name.
Scroll to the bottom of the File explorer - Obsidian section on Github page, linked to in the OP at the top of this page.
Enjoy.
Some people prefer rectangular tag pills with rounded corners rather than rounded tag pills. I added comments in the Github repo of how to do that - very simple.
The Github repository page link is given in the OP at the top of this page.
Enjoy.
I added the CSS for left aligned image.
div[src$="#side"] {
position: relative;
float: left;
width: 35%;
margin-top: 5px;
margin-left: 10px;
margin-right: 12px;
}
In note I have:
![[Image.png#side]]
But image remains as it is… Is this feature already dead in Obsidian 0.11.3?
I think it broke on the 0.11.1 or 0.11.2. Was working great before that.
@den - Somewhere around 0.10.10 they moved images from a div element to a span element, so they would render inline.
It’s probably more complicated than this - but you could try changing the div in your code to span and see what happens. If that doesn’t work, it’ll require a little more work.
Amazing, now it work! Thank you for quick fix.