1 Like

Hi all, thank you for all the instructions and scripts. I am feeling lost in all the how-to’s with CSS as this is my first time using CSS, and would appreciate some guidance.

I have downloaded @Joschua 's Bible Toolkit, and was trying to add joschua’s css snippets to align the h6 with the verses, I also tried Lithou’s, but both didn’t work, the alignment remains the same.

I am using the Cybertron theme. Does that affect the snippet, is there a way to resolve this?

I basically copied & pasted the mentioned snippet to a .rtf and saved it in obsidian/snippets folder in my vault, and changed the filename to .css. Then, reload the CSS Snippet under Obsidian Setting. — Is this the way to do it?

While I am not sure, I think renaming from .rtf to .css could mix some things up. Try downloading the .css snippet here: github: bibleverse-formatting.css and let me know if that worked. And make sure to enable the snippet under Settings > Appearance > CSS snippets. Hope that helps!

Yes that’s work! thanks Joschua.

1 Like

Sorry, the macro I posted is specific to a program called Keyboard Maestro, which is Mac-specific. It may be possible to do something similar with a program for Windows like AutoHotKey, but I haven’t dabbled with that in quite some time.

I have tried the different snippets from here and below to get mine to look like the picture so far I have

using this script

.markdown-embed-title { display:none; }
.markdown-preview-view .markdown-embed-content p:first-child { margin: 0 !important;}
.markdown-preview-view .markdown-embed-content p:last-child { margin: 0 !important;}

.markdown-preview-view .markdown-embed, .markdown-embed .markdown-preview-view {
    padding:0px 15px 0px 3px !important;
    margin:0 !important;
    max-height: unset !important;
}

/* the link on the top right corner */
.markdown-embed-link {
    top: 3px !important;
    right: 5px !important;
    padding:0 !important;
    margin:0 !important;
}

I have tried the other scripts to get my verse number to the left of the verses, but cannot make it work. It either changes how close the verses are or puts the numbers under the text like this.


Can you help? I am definitely new at this and am using Windows.
Thank you

I can certain give you a hand with this. Can you provide which theme you are using if any as well as any snippets you have enabled. That way I can look at what conflicts your CSS code is running into.

I am using Cybertron. I am using the Scripture Verse Formatting Snippet below

/* Formatting for Bible verses (h6 headers) in Obsidian */
.markdown-preview-view h6
{
  position: absolute;
  left: -3%;
  top: 26px;
  line-height: 0px;
  margin-top: -20px;
  margin-right: 3px;
  font-family: var(--font-family-preview);
  font-weight: 500;
  font-size: 10px;
  font-weight: bold;
  color: var(--text-faint) !important;
}

.markdown-preview-view h6 {
  position: absolute;
  left: 5px;
  top: 1px;
  margin: 0px;
}

So that seems to be putting the verse number on the side again, but somehow I now have the big spaces between the verses again.

My initial guess would be that something in the cybertron theme is calling a rule with elevated specificity. I’ll look through the theme’s code to see what I can find.

OK, so the cybertron theme has some issues where it is preventing Obsidian from loading other snippets. I’ll save you the boring details, but I’ll suggest edits to the author. Then you should be good to go to load snippets.

On the side of your snippets, you shouldn’t need much to pull the headings out to the side. If you wanted to change color, font size, etc you can add those in. Also if you want to hide the collapse arrows you can do that for only the H6 ones while leaving the others alone, you can do that with the following:

div.markdown-preview-view h6 {
    position: relative;
    left: -3%;
    line-height: 0px;
    font-size: 10px;
    margin: 0px 0px -10px 0px;
    color: var(--text-faint);
  }
div.markdown-preview-view h6 div.heading-collapse-indicator {
    visibility: hidden;

}
1 Like

Thank you! That worked. It’s been driving me crazy so I appreciate you helping me.

Hi
Sorry, but I am new with Obsidian and yet so happy to find servants of the most High God using it. One question, where do you put the terminal command you have outlined above?
Be blessed.

Hello you all!
It’s good to find such a precious discussion here.
Recently I got to make work the Bible in Obsidian in the standard you’ve been discussing… That’s great!
I have one doubt.
With the snippet shared by Joschua, which allows us to see the verse linked only hovering the mouse over the link, how can I get two or more verses?
For example, if I link to [[John-3#v16]] and hover over it, it will show the verse text. But if I want to go a little further, e.g., John 3:16-19, how am I supposed to write so that I’ll have the whole text with all verses together when I hover the mouse over it?

Hi! I’m afraid this isn’t possible currently, nor do I think it will be possible in the future (hopefully I’m wrong about that). Linking to a particular header means isolating that header from other headers, so hovering over the link only shows that header and hides other ones. With Joschua’s setup, you can only link to one verse at a time.

However, some folks in the forum have shared about their workarounds for this, see: GitHub - mkudija/BibleGateway-to-Obsidian-Catholic: This script adapts jgclark's BibleGateway-to-Markdown script to export for use in Obsidian.

1 Like

Great! Thank you for your kind reply! Much blessings!

1 Like

Over a year on, and this is fantastic. Amazing work. I’ve let my own work slide, but I’m hoping effectively to make my own Bible commentary, drawing on other sources. His is an interesting inspiration for organising information.

Is the snippet for the block quote style embed removed? I found a snippet further down but it is not combining them with the default theme

Appreciate the immense amount of work you have put into this!

I’m brand new to Obsidian and really liked the idea of having the Bible in my vault, super useful in many different use cases.
I also thought it would be great to have a Bible reading plan linking to said Bible, so I ended up creating a plan in a note with links the each section to read.
If anyone else might find that helpful, I’ll attach the note with my post here.

Bible Project - Reading Plan.zip (6.2 KB)

The minimal theme has moved on a fair bit since this CSS was written.

on iOS the H6 heading verse 'runs into" the text itself

I am not a programmer - but is it possible to simply “hide” heading H6 in embedded content (so we don’t see the verse numbers at all?)

Hello everyone, I have created a simple plugin for easier linking of multiple verses, you can find it in the community plugins in Obsidian and read more about it here.

It only works for bible in the format described here though.

1 Like