mgmeyers / obsidian-style-settings

A dynamic user interface for adjusting theme, plugin, and snippet CSS variables within Obsidian
GNU General Public License v3.0
1.03k stars 95 forks source link

"For example, adding this to a CSS snippet in your vault" #117

Open ryanniccolls opened 1 year ago

ryanniccolls commented 1 year ago

I am having a bit of difficulty understanding what this means.

The plugin should clearly state what file should be placed where? The confusion lies where a CSS snippet is not a file, and a vault requires files. Alternatively, are you also suggesting the code can be added to any file?

Please clarify what file type is needed and where.

For example, you need to place a .css file called main in your obsidian folder. /main.css

thanks in advance.

May2002 commented 11 months ago

Hi, you can paste the content in any .css file in your vault's .obsidian/snippets folder or put the content in a brand new .css file there. The thing is to enable the .css snippet in Obsidian (Appearance > CSS snippets, toggle the new one). Then you will be able to interact with some default theme aspects through the Style Settings plugin.

ryanniccolls commented 11 months ago

Obsidian CSS Snippets guide

Thank you kindly, for reminding me to pay it back to the community. I have asked the plug-in maker "style settings" to explain this, and they have not updated the instructions to be simple. Perhaps they did not realise how frustrating it was to piece together these simple bits of "atomic" knowledge. I recommend the styles setting plugin for Obsidian regardless.

not everyone understands where CSS snippets go.

To find your hidden folder "/.obsdian" in the app obsidian. open settings>appearance, scroll down to "css snippets". Click folder to right. That will take you to the hidden folder. Which makes it really hard to find if you do not know that it is a hidden folder :(. For example, the invisible path to your snippets folder in obsidian may be like this, ".../yourvaultnamefolder/.obsidian/snippets"

what a CSS snippet file is.

It is a plain text file with a file extension ".css". To create one use any plain text editor and then rename the extension to .css. Then drop the file in the snippets folder. Then use the refresh button in appearances next to css snippets.

how to name a css file -

You should "nameitsomethinglogical.css".
And separate groups of css into separate files names for different purposes and semantically. For example ;) CSSforprettytodosakakonig.css dataviewsmallcopy.css dataviewverticalscroll.css internal_links_without_files.css table-cell-align-top.css. When you name them logically and in a separate ".css" file you can turn them off in the "Style setting" plugin. So you can get obsidian to make pretty with cascading style sheets.

This will no doubt help someone looking for a css snippet guide. 👍 The obsidian css information is out there but in separate places. Thanks again. I expanded on yours to help the search engines a bit.

Feel free to at me for the CSS snippets.

kamikazebr commented 4 months ago

Obsidian CSS Snippets guide

Thank you kindly, for reminding me to pay it back to the community. I have asked the plug-in maker "style settings" to explain this, and they have not updated the instructions to be simple. Perhaps they did not realise how frustrating it was to piece together these simple bits of "atomic" knowledge. I recommend the styles setting plugin for Obsidian regardless.

not everyone understands where CSS snippets go.

To find your hidden folder "/.obsdian" in the app obsidian. open settings>appearance, scroll down to "css snippets". Click folder to right. That will take you to the hidden folder. Which makes it really hard to find if you do not know that it is a hidden folder :(. For example, the invisible path to your snippets folder in obsidian may be like this, ".../yourvaultnamefolder/.obsidian/snippets"

what a CSS snippet file is.

It is a plain text file with a file extension ".css". To create one use any plain text editor and then rename the extension to .css. Then drop the file in the snippets folder. Then use the refresh button in appearances next to css snippets.

how to name a css file -

You should "nameitsomethinglogical.css". And separate groups of css into separate files names for different purposes and semantically. For example ;) CSSforprettytodosakakonig.css dataviewsmallcopy.css dataviewverticalscroll.css internal_links_without_files.css table-cell-align-top.css. When you name them logically and in a separate ".css" file you can turn them off in the "Style setting" plugin. So you can get obsidian to make pretty with cascading style sheets.

This will no doubt help someone looking for a css snippet guide. 👍 The obsidian css information is out there but in separate places. Thanks again. I expanded on yours to help the search engines a bit.

Feel free to at me for the CSS snippets.

That should be in the DOCS