I can’t help you with the @import thing… but most text editors have code snippets, maybe it’s a suitable alternative to manual copy/pasting for you ?
in Atom, you can create snippets to quickly reuse code (type aprefix + tab to auto-paste a multiline block) : https://www.hongkiat.com/blog/add-custom-code-snippets-atom/
It works with vscode, pspad, sublime, notepad++ (pick this one and NppSnippets/quicktext plugins if you want a lightweight portable solution), etc… alternatively, try a text-expander ?
TL;DR
use code snippets in atom, File>snippets :
'.source.css':
'AnyTitleLikeAndyMode':
'prefix': 'Andy'
'body': """
....paste your snippet here between triple quotes....
"""
next open you obsidian.css, type `Andy’+tab (or whatever prefix you defined) and it will paste the rules you defined in the snippet.
Not as streamlined as @import but better than ctrlC ctrlV
in windows cmd (win+x, run command prompt or powershell) : copy snippet1.css+snippet2.css+snippet3.css obsidian.css it will concatenate the snippets[1-3].css into a file named 'obsidian.css`
(or even faster copy *.css obsidian.css but make sure you operate from a dedicated folder with only the files you need as t will concatenate all css files into obsidian.css)
if you have Sass / Less : you can rename your css snippets to *.scss, then create a file obsidian.scss which contains :
Thanks a lot. I was wondering why the file I created in Obsidian doesn’t work. This should be included in FAQ.
And also, the Help document in Custom CSS said:
If you are building or modifying your own css, you can open the developer tools by using Ctrl/Cmd+Shift+I to get information on the elements you want to customize.
I’m on an old Macbook. I tried hit Ctrl/Cmd+Shift+I several times but the developer tool still won’t show up. I thought my keyboard was broken. I almost gave up then this topic came to my eyes. I hit Option+Command+I only once, it worked like a charm.
Hey guys, I’m using a theme and I have issues with the file explorer padding. It’s pushed to the left side including the toggle for folders. I can’t find the css title for that part, how do I create something and put a left padding on the files inside file explorer?
Also, when I preview the note, it’s centered and looks very tight. I’ll attach the code below.
I’ve attached the css file below. Appreciate the help!
@jgalpha: I am surprised you added Andy Mode code. Isn’t it easier to leave AM as an option ? If people want it they can install the AM plug-in, which is the focus of the dev @death.au, and gets regular updates, improvements, and feature additions.
Just a thought.
I would just like to point out that if you use Chrome, Internet Explorer or Firefox then simply pressing F12 brings up the Developer tols. Sure beats remembering Cmd/Ctrl+shift+i, unless I’m missing something. ALso this page has some nice info on Chrome - https://developers.google.com/web/tools/chrome-devtools/open
I was just starting out with obsidian and had alot of questions about css and personalising my own themes as well.
I managed to find out how to do it, and wrote an article with 3 quick steps on how to use css and devtool to customise your own theme. I thought that you might find it useful especially if you are a beginner in css and devtool. Here is the link to my medium article:
I am now trying to figure out what kind of styles to create to make obsidian more functional, any interesting ideas?
I compiled a Github repository with CSS snippets to achieve various effects. You can find the link to the Github page in the OP at the top of this forum page.
OK I’m a complete idiot when it comes to CSS etc. All I want to do is be able to change the font size for the various heading options. I am using Obsidian Nord theme in Light mode and I just want tomake the various # text, ## text etc things a different size. I got into the developer mode but see nothing that jumps out to me as a size thing.
Can someone (gently) point me in the right area?
And FWIW all I want is for all the headers to be the same size as the main body text. I like the colors but don’t need the size differences.
Here’s a first pass (writing this on mobile so I haven’t tested this). Save the following to a .css file and put it in your Snippets folder (click the folder icon in Preferences → Appearance, next to the Snippets heading.
h1, h2, h3, h4, h5, h6 {
font-size: 12px;
}
Edit the font-size value to whatever you’d like.
There should be a way to give it a variable so that it matches your zoom settings as well—perhaps someone else can say what that variable is!