Obsidian users struggle with CSS in themes
12 posts across 2 communities in the last 60 days; 92% from r/ObsidianMD.
“Not just you. It used to be centered. Obsidian has a variable for changing it. Make a CSS snippet and put this in it: body { --file-header-justify: center; } [re: Is it just me or did anyone else's UI and title formatting change? It pettily bothers me that it isn't centered…”
“ah man, that white rectangle issue is a classic after a big obsidian update. usually it's some css variable getting renamed or a new element getting slapped in that the theme wasn't expecting. anupuccin's pretty actively maintained though, so first thing i'd check is if there's…”
“i can't get this to work, specifically to hide 'aliases' and 'cssclasses' in the All Properties tab of the right sidebar panel. seems redundant to install a plugin for just these two, which i'll never use. any help?”
Several Obsidian users are having difficulty implementing or understanding CSS snippets within their themes, specifically related to responsive sizing and grid backgrounds. They seek clarification on how to apply custom styles and troubleshoot issues arising from community plugins.
SOURCES (18)
“Not just you. It used to be centered. Obsidian has a variable for changing it. Make a CSS snippet and put this in it: body { --file-header-justify: center; } [re: Is it just me or did anyone else's UI and title formatting change? It pettily…”
“Does anyone know where I can find all the changeable attributes for CSS variables on Obsidian?”
“I'm not really accomplished in CSS tbh, but I've spent the last few hours trying to style my writing space nicely inside Obsidian, and I've got almost everything to work but this one thing: I'm trying to select the first line of the first paragraph after an <hr> tag, and set it to small-caps . .cit-skin .cm-content .cm-line:nth-child(2):first-line, .cit-skin .markdown-preview-sizer > div:nth-child(4):first-line, .cit-skin .cm-content .cm-line div:has(hr) + div:has(> p”
“ah man, that white rectangle issue is a classic after a big obsidian update. usually it's some css variable getting renamed or a new element getting slapped in that the theme wasn't expecting. anupuccin's pretty actively maintained though, so first thing i'd check is if there's a theme update available in the community themes section. sometimes the fix is just a one-click update away. if that doesn't do it, you could try grabbing the theme's css file from github and d”
“I've been learning how to code on html and css recently, and it's been a lot of fun ! because of that, i'm also getting a lot more interested in tweaking my obsidian to my need ; and i tried using a <details> attribute in order to order my files better. The thing is, by doing so it seems to break a lot of obsidian own shortcut, such as ![[image]] that doesn't appear anymore, nor [[links]] to other files. I know details kinda works the same as #header in obsidian, as in it c”
“baseline + callout-tabbed usually fights over callout padding/borders and the tab header height. first thing id try: disable every other css snippet, leave only callout-tabbed, reload. if it clears, re-enable one by one. also check whether baseline's callout styling is cranked up in style settings. a lot of themes paint .callout hard and the tabbed snippet needs those defaults quieter. if you can say which part is wrong (tabs overlapping, missing borders, content cut off), easier to point at”
“This snippet gives my group headers a background. You might only need it with sticky headers on. .nn-list-sticky-header { background: var(--background-primary-alt); z-index:100 /* Might fix the file overlapping the header */ }”
“i can't get this to work, specifically to hide 'aliases' and 'cssclasses' in the All Properties tab of the right sidebar panel. seems redundant to install a plugin for just these two, which i'll never use. any help?”
“You mean just the folder/file name's color, not its background color, right? Make a CSS snippet (how to https://help.obsidian.md/snippets ), and put this in it: body:not(.is-mobile) { --nav-item-color-hover: var(--nav-item-color); --nav-item-color-active: var(--nav-item-color); } By default in dark mode, they get a little lighter; in light mode, they get a little darker. This will stop both of those from happening.”
“do you have any tips on how to do the css? edit: how did you get the inline title/properties to not appear?”
“Looks like a CSS issue. Might also be a plugin that interacts with Bases. Test with the default theme + no css snippets. Then check your plugins. If it’s none of those things, it might be a sync issue where the file is getting hijacked.”
“I've tested in the sandbox by setting colors for the light theme. Only the border works properly. https://imgur.com/a/jlSKYLh Also some other style settings don't work in "Sizing and Spacing", like "Item: icon size", "Item: left + right padding", "Item: Top + Bottom padding". EDIT: I have many vaults. In one of these I have older Note toolbar 1.34.12 installed and all these properties work as expected. Thanks for your efforts.”
“You can use this css snippet for the same look ```body { --folder-color-1: #B278F2; /* Purple */ --folder-color-2: #5E9BE1; /* Blue */ --folder-color-3: #FFC21F; /* Yellow */ --folder-color-4: #46AC79; /* Green */ --folder-color-5: #D07A40; /* Orange */ --folder-color-6: #D23838; /* Red */ } .nav-files-container > div > .nav-folder:nth-child(6n + 1) { --folder-color: var(--folder-color-1); } .nav-files-container > div > .nav-folder:nth-child(6n + 2) { --folder-color: var(--folder-col”
“That is what confused me the most coz I tried is:global for the style tag yet it didn't work”
“so im no coder, learning obsidian itself has taken me a while but now that i do have a system, i would like to make it pretty 💀 so like how do you guys do the CSS snippets thing, where do they go, i tried to use chatgpt to do the code but it didn't work 💀 submitted by /u/artsyshaksi [link] [comments]”
“Show the code from the source view. You can open the sandbox to test. Or disable all community plugins, CSS snippets, and use the default theme. This should help find out what is happening.”
“CSS is a think you can do in Obsidian. You could even replace that CSS snippet with something called inline styling (directly in the HTML that you type in the note). That's all beside the point. You can't use the entire method you found because you don't have control over example.com.”