#61

@oldtowneast: thanks for the kind words. Don’t try to find the words. Everyone on this forum and in the Discord channels (not always the same people) are so helpful, and everyone uses code from everyone else, so it is only normal I published the file since I had started the compilation.

In fact, in my view I would not even have the right not to publish it !
Enjoy.

1 Like
#62

Recently block references were added as a new, Roam-like feature to Obsidian so they could be embedded like with headers and the text below.

Headers can be collapsed (lists too), but blocks cannot, not in markdown. Today someone asked in a Discord channel if blocks can be collapsed, and Silver answered that that can only be done with HTML code, and she linked to a webpage where it is explained how to do it.

I have added the code to the repository because despite it not being markdown code, collapsing a block might be something other Obsidian users might be interested in.

Note: if one includes a link like text in the block between <details>....</details>, you have to use <a href="https://your-site.com">Some text</a> to make it a clickable link. An internal link/wikilink, however, is not rendered clickable. Just something to bear in mind. :wink:

You can find it in the file under the HTML header, and I have called it Disclosure widget for a block of text.

You can copy/download the code from Github.

2 Likes
#63

We have subdivided the various snippets in subfolders in Github along the lines of the original .md file sections. This will make navigation a lot easier, and when I update anything I will refer to the relevant folder.

The Github link at the top of this page links to that subpage.

Happy CSS’ing, and a Happy New Year !

#64

@Klaas Very much appreciate that you bring over those nuggets of useful info from the discord channels to share with the rest of us. I am new to Obsidian, and they have been exactly what I needed to know a number of times. :star:

1 Like
#65

@cestvrai: thank you. remember, if you have one to contribute that you don’t find, let me know or add a pull request to the repository.

#66

I added a reference and a link to @Lithou’s Github page showing novel effects for images. You can find this in the Special Effects folder over at the Github page mentioned in the OP at the top of this page.

Happy imaging and Happy New Year.

#67

I added CSS code for side notes. Side notes are nothing special, but because they are not markdown I added this to Special Effects - see link to the Github page mentioned in the OP at the top of this page.

#68

@dcoales added a couple more options for the side notes, which I added to the Github repository - see top of this page.

#69

I added code to change internal and external (URL) links color.
You can find Github page mentioned in the OP at the top of this page.

1 Like
#70

Ever since I discovered Obsidianite I have been in love with its color gradient blockquotes. I posted the code for it in Preview mode, and some in Edit mode. Nevertheless, there was 1 aspect that I could not get right: quotation marks.

I like to have those in blockquotes. To add them to Preview mode is not a problem, but to add them in Edit mode was more problematic. When I cracked it (actually someone else :blush:), it did not come out right with Obsidianite-style blockquotes, until today.

Today @death.au cracked that final nut for me, so I added the code to the Github repository. I also made the split between conventional and Obsidianite code clearer.

You can find Github page mentioned in the OP at the top of this page.
Enjoy.

1 Like
#71

@entropic has come up with visualizing different levels of bullet points, by using colors. I have added the code to the repository, file “Lists - (un)ordered”, section “Stylized lists”.

You can find Github page mentioned in the OP at the top of this page.
Enjoy.

#72

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.

image

You can find in the File Explorer section on Github page mentioned in the OP at the top of this page.
Enjoy.

#73

The Light mode version was not quite right, so I refined it - both Light and Dark modes work well now.

#74

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.

image
image802×130 5.69 KB

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.

#75

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.

2 Likes
#76

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:

image
image792×240 51.6 KB

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.

#77

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

#78

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.

#79

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.

3 Likes
#80

Perfect, thank you!

1 Like