Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Suggestion] Add Option for YAML Classification for CSS tweak. #33

Open
SavageManChild opened this issue Nov 6, 2022 · 2 comments
Open
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@SavageManChild
Copy link

Hello,

Thank you to all in this community who have been so helpful and for those who have developed or assisted in the development of this tool!

I have a suggestion for an improvement to the current application of the CSS tweak provided with the "Bible Study in Obsidian Kit"

I use h6 headers in other notes in obsidian so I couldn't implement the CSS tweak provided in the "Bible Study in Obsidian Kit" to move the h6 headers to the side without negatively affecting my other notes. So I used the workaround of using YAML front matter to assign a class to specific notes which the CSS calls to apply the different formatting based on if that class is present.

Here is what the YAML looks like for applying a custom class:

---
cssClass: "bvh6custom"
---

Name the class whatever you like. I used bvh6custom (bvh6 meaning Bible Verse Header 6) for this example.

And then I just nested the current CSS tweak provided in the kit within the call for the YAML frontmatter:

/* Bible Verses in preview */
.bvh6custom.markdown-preview-view h6,
.bvh6custom.cc-pretty-preview.markdown-preview-view h6
{
  position: relative;
  left: -4%;
  top: 18px;
  line-height: 0px;
  margin-top: -20px;
  margin-right: 3px;
  font-family: var(--font-family-preview);
  font-weight: 500;
  font-size: 10px !important;
  font-weight: bold;
  font-style: normal;;
  color: var(--text-faint) !important;
}

The call being .bvh6custom

Then you just have to add the custom CSS to your snippets.css file and you are good to go! This way you can have the custom header implementation in preview mode but not have it affect any of your other notes.

I wish I had the expertise to implement this myself in a pull request but I'm afraid I come up short in this department (my way of inserting the YAML being a somewhat unreliable PowerShell script). I'm hoping someone can use an implementation like that in pull request #2 to automatically insert the YAML frontmatter via a script and have it as an option for other users.

Peace be with you all!

@selfire1
Copy link
Owner

Hi @SavageManChild, sorry for not coming back to you earlier. I really like this idea. I'll keep it in the back of my mind and will keep an eye out if there is more interest.

@selfire1 selfire1 added enhancement New feature or request good first issue Good for newcomers labels Feb 10, 2024
@NathanNoye
Copy link

I would be interested in this feature as well

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

3 participants