Automatically add CSS classes to notes based on file path.

  • By Nathan
  • Last update: Dec 27, 2022
  • Comments: 11

Auto Class

Quality Gate Status

An Obsidian plugin to automatically apply CSS classes to the markdown view as if you had added them in a cssClasses YAML key, based on a note's path and tags. Combine this with CSS snippets targeting a CSS class and you can have different snippets applied to different paths in a single vault without having to add any HTML or CSS classes yourself.

Install

Install from the community plugin registry under the name Auto Class, by using the BRAT plugin with repository OfficerHalf/obsidian-auto-class, or manually by copying the release files (main.js, manifest.json, and styles.css) to .obsidian/plugins/auto-class in your vault.

Use

Classes can be applied based on a note's path or tags. In settings, configure a folder path or tag and the classes to apply to the children of that folder or the files with that tag

AutoClass

Once configured, the next time the view is updated the classes will be applied.

Contributing

Feel free to raise an issue or open a PR.

Github

https://github.com/OfficerHalf/obsidian-auto-class

Comments(11)

  • 1

    [FR] Move/Edit Settings

    I'd love the ability to move around the settings in an order that makes sense to me, something like this where you can grab the hamburger menu icon and rearrange it:

    Autoclass

    Editing the classes or changing what folder by double clicking the area that I want to change would also be fantastic, I forget which classes I want to add to a folder and it'd be nice to not have to delete and redo it 😅.

    (Bonus: Option to group them, something like Quickadd 👀) Obsidian_5RKfjoEvyc|100

  • 2

    [Bug] CSS Classes Only Applied To 1 Pane

    The cssclasses seem to only be applied to 1 pane currently, it'd be nice if it applied to any panes that apply to the set cssclass if possible 🙏🏽 I always write with preview available and it'd be great if it applied to both. The only time when the panes are the same is when it bugs out and gets stuck on that styling.

    Example of issue: roKW6Myp1L

  • 3

    Confirm live preview support

    • [x] Ensure basic functionality works in live preview
    • [x] Potentially rename "source" and "preview" to "edit" and "reading" or whatever the new terminology is
    • [ ] Add explicit binding for live preview (I don't want to do this, really)
  • 4

    Add classes based on tags

    Is this worth it? I guess if you're already adding the tag you could add the class as well. But it would save you doing both I guess. Does obsidian easily expose the tags on a file? Does it include metadata tags?

  • 5

    Use tag map for better performance

    The getTags method returns a map of tags that I'm then turning into an array and searching multiple times. Just using the map would be a huge improvement.

  • 6

    Scopes

    It would be nice to be able to apply classes to different scopes.

    • Markdown preview (default scope, current behavior)
    • Markdown edit
    • Markdown view (both edit and preview)
    • Global (whole app, somewhere high up)

    If the themes were properly made, having a global scope would allow applying entire different themes based on the current file's path. Though maybe that could be a separate plugin/feature.

  • 7

    Can Auto Class activate a CSS class in the presence of any YAML metadata? (Banners plugin use case).

    Hi @OfficerHalf,

    use case / Problem

    • In v1 Obsidian using Inline Titles, the presence of a banner (Banners Plugin) usually covers the Inline Titles.
    • Therefore notes with a banner should have a Banners Inline Title CSS snippet automatically applied to adjust the inline title down.
    • However notes that have a banner don't universally share a unique file path or tag.
    • Can the "Banner Inline Title" CSS snippet be activated automatically by the Auto Class plugin in the presence of only the banner yaml? e.g. banner: "https://picsum.photos/500"

    thanks

  • 8

    Option to apply classes based on tags automatically

    Hey, love the plugin, but hate the busywork! I would love it if whenever I add any tag, like #test, to a note, it gets corresponding class like tag-test. Otherwise I have to do it manually for 10s of tags :(

  • 9

    Not working well in sidebars.

    AutoClass does not work well if I drag note to sidebar. Initially my custom class is added and custom CSS style works, but when I load a workspace or restart Obsidian, my custom class is missing if note is in a sidebar as a tab (checked with DevTools).

  • 10

    Significantly revamp documentation

    Documentation is missing:

    • Usecases. Why would you use the plugin if you don't know what it actually does?
    • Examples with CSS snippets to test with
    • Guide on converting a theme to a usable snippet
    • Up to date images
    • global scope support
  • 11

    Siblings #tags/sibling is not supported

    I would like to add CSS to all files with a tags:

    #📆/DayNote/

    where I can have #📆/DayNote/Saturday , #📆/DayNote/Mondayetc...

    Now it doesn't work. I need to add all combination of tags.

Popular Tag

Related