How do I include my snippets into the export?

[pattystefy]

This is more of a question than a bug, but how do I include my snippets? I'm not familiar with CSS or snippets, I just like to change the appearance of my notes. I tried to add "custom head content" but no matter the extension, it doesn't recognize the path. It always says "Path must be: .html, .htm, .txt" but it's still not recognized after changing from the .css extension. I use Windows 10 Pro, and I have everything up-to-date. I don't think is a bug, at least I hope so.

[KosmosisDire]

The path must be .html thing is a bug. However, that is not how you add snippets. Snippets are a built in feature of obsidian, you can Google it, but they are accessible in obsidian's Appearance settings.

[pattystefy]

The path must be .html thing is a bug. However, that is not how you add snippets. Snippets are a built in feature of obsidian, you can Google it, but they are accessible in obsidian's Appearance settings.

I know how to add them. What I meant was that I have some snippets that change my notes, like the card snippet or image adjustments. The first one transforms the lists into cards and the second one allows the text to wrap around the images when you move them to either right or left. I would love to have those changes in the notes when I export them too, but I'm not sure which setting I should modify for that.

[KosmosisDire]

Snippets are automatically included, you don't have to do anything. Is it not being included for you?

[pattystefy]

Snippets are automatically included, you don't have to do anything. Is it not being included for you?

No, they aren't. I tried to update everything I had and I exported three times to make sure, but they aren't included.

[KosmosisDire]

Can you try restarting obsidian?

[pattystefy]

I restarted it, but those two snippets still don't appear in the exported files... I did export again.

[KosmosisDire]

Can you run an export and then copy the debug info from the plugin's settings and paste it here? Then can you also go to your export directory (where you are exporting TO), open the /lib/styles/snippets.css file (if it exists) and let me know if the snippet's text is in the file.

[pattystefy]

Sure! Here is the debug info: debug info.txt

I put it in this txt file, I hope that's alright. And also, there isn't any "styles/snippets.css" in the "/lib".

[KosmosisDire]

Thanks, could you test an export using Online Web Server mode? I think it might work using that mode. If it does work in that mode then I think I know enough to be able to fix this.

[pattystefy]

Hello, I'm very sorry for the late update on the situation. I exported the notes, as you said, and the cards still don't work, but it looks like the other CSS (image adjustments) works. Also, the directory "styles/snippets.css" appeared this time. Here I copied the new debug info, I hope it's helpful:

debug info.txt

[KosmosisDire]

Thanks, no worries! If you open the snippets.css does it have all the css that you would expect it to have in it? Like all the cards snippets, etc? (as a side note, be aware that if obsidian updates to 1.5.8 it will break other styles. I am working on that right now)

[pattystefy]

Yes, it has the snippets I need, but I also have the updated version of Obsidian. I will wait for the update then, if you think that the version of the app is the issue. Thank you for the help!

[KosmosisDire]

It's possible the obsidian version is the issue, yes. If it still persists after the fix I will look into it more. I will also make sure the snippets work on self-contained exports.

[KosmosisDire]

Can you please test out the new beta 1.8.1-0b and let me know if this fixes the issue? Please also let me know if you find any new issues. Thanks!

[pattystefy]

Hello! Thank you for the update. I tried to export using all 3 mods (Raw HTML Documents, HTML Documents, Online Web Server) in case at least one of them worked, and this is the result I got:

And this is how it should have looked like:

I am referring to the cards, of course. Also, I got this error:

But I selected the folder, so it exists.

Last time I exported using Online Web Server, so this is the debug info for that: Debug Info.txt

Then I exported again with HTML Documents, to get another debug info: Debug Info.txt

I am sorry to give you bad news ._. I hope you'll be able to solve this.

[KosmosisDire]

No worries, is it possible for you to provide me with the snippets you are using?

[pattystefy]

Sure! These are the ones that I use:

S - Images Adjustments.txt cards.txt This one, the cards have a problem.

And those are from my theme, Anupuccin, and I had no issues with them: floating-search-bar.txt custom-rainbow-colors.txt extended-colorschemes.txt

And this one is from the same theme, but I don't mind not appearing: custom-background.txt

[KosmosisDire]

So I just downloaded the cards snippet and enabled it in my test vault and it worked right away. Is it possible for you to zip and send me the whole html export so I can check why it isn't applying the styles? (Also if you can send me a .zip of a vault that reproduces the problem this would also be helpful) Thanks! :)

[Chesher]

Hi! I'm having a similar issue - I'm super new to all this so this could be just me, but here is my CSS from my snippets folder:

.inline-title { color: #ffc106 } .cm-header-1 { color: #ffc106; }
.cm-header-2 { color: #ffc106; } .cm-header-3 { color: #ffc106; }

It's just a super basic one allowing me to have some custom colors on Titles and Headers. It looks as expected in Obsidian, but the colors don't show up in the exported HTML file.

Erm since this is a recolor of the default theme I'm really open to any other solutions to just have colored titles and headers in the exported html

[KosmosisDire]

Hi! I'm having a similar issue - I'm super new to all this so this could be just me, but here is my CSS from my snippets folder:

.inline-title { color: #ffc106 } .cm-header-1 { color: #ffc106; }
.cm-header-2 { color: #ffc106; } .cm-header-3 { color: #ffc106; }

It's just a super basic one allowing me to have some custom colors on Titles and Headers. It looks as expected in Obsidian, but the colors don't show up in the exported HTML file.

Erm since this is a recolor of the default theme I'm really open to any other solutions to just have colored titles and headers in the exported html

So in your case, I believe this is because your styles only apply to the editing view not in reading mode. If you switch to reading mode in obsidian your styles won't show up even in obsidian.

[Chesher]

Hi! I'm having a similar issue - I'm super new to all this so this could be just me, but here is my CSS from my snippets folder: .inline-title { color: #ffc106 } .cm-header-1 { color: #ffc106; } .cm-header-2 { color: #ffc106; } .cm-header-3 { color: #ffc106; } It's just a super basic one allowing me to have some custom colors on Titles and Headers. It looks as expected in Obsidian, but the colors don't show up in the exported HTML file. Erm since this is a recolor of the default theme I'm really open to any other solutions to just have colored titles and headers in the exported html

So in your case, I believe this is because your styles only apply to the editing view not in reading mode. If you switch to reading mode in obsidian your styles won't show up even in obsidian.

I knew it was something stupid like that on my end! Sorry for any troubles caused!

[KosmosisDire]

No worries! :)

[cabogie]

For anyone with a split config setup like me - .obsidandesktop and .obsidianmobile

I was able to get snippets to work by copying them into an .obsidian/snippets folder.

Perhaps this is something to add support for, but not a huge issue. In fact it's kinda nice, I'll probably make myself some different export styling (unless there's a better way to do that).

[KosmosisDire]

I'll probably make myself some different export styling (unless there's a better way to do that).

Depending on the version you're using you can create export specific styles by prefixing any selector with 'publish'.

For example:

publish h1
{
    color: red;
}

will only apply when exported. You can also include css using the custom head content if you'd like.

For anyone with a split config step like me - .obsidandesktop and .obsidianmobile I was able to get snippets to work by copying them into an .obsidian/snippets folder.

I am not aware of how split configs work, I'll have to look into it to make sure they work. Is this something you set up manually or is this something obsidian sets up? How did you configure this?

[cabogie]

Depending on the version you're using you can create export specific styles by prefixing any selector with 'publish'.

For example:

publish h1
{
    color: red;
}

will only apply when exported. You can also include css using the custom head content if you'd like.

Cool, thanks!

I am not aware of how split configs work, I'll have to look into it to make sure they work. Is this something you set up manually or is this something obsidian sets up? How did you configure this?

It's under Settings > Files and links > Override config folder at the bottom.

Probably not a common use case tbf. I just personally like to keep my mobile and desktop configs separate and happen to not use .obsidian anymore.

[KosmosisDire]

I am aware of this option, but I thought that would only change the name of the folder, not allow you to have 2 separate configs. But either way the plugin should use the config folder that is currently set up, so I'll have to look into that to make sure it's still working.

[cabogie]

I think it's as simple as Obsidian just looks at that folder for config. So on my desktop / laptop it looks at the stuff in .obsidiandesktop and on my phone it looks at .obsidianmobile.

As a quick test I changed it to something new and it created a blank slate folder with the given name.