Thank you for you share, help me very much~
@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.
3 Likes
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
Hey guys,
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 hope this helps!
7 Likes
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.
Enjoy.
3 Likes
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!
You could use rem or em. On startup, both are usually set to 16px in most browsers.
um ok. That made no sense to me at all. What’s rem and em? And I’m using the Obsidian app not a browser so that didn’t make sense either. Sorry
OK I did that (or at least I think I did, see screenshot) but no changes
And this is the file in text edit
I stopped and started Obsidian
You might need !important since there are many elements with higher specificity (those “win” over your declaration otherwise).
You could try something like
/* make all headers the same size */
h1, h2, h3, h4, h5, h6 {
font-size: 1rem !important;
}
(You can also use fractional numbers like 1.2rem.)
If above doesn’t work, here is another way:
/* make all headers in preview the same size */
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
font-size: 1em;
}
/* editor headers */
.cm-header {
font-size: 1em;
}
And don’t forget to enable your oogie-custom under Settings → Appearance → CSS snippets!
Note: This might only affect preview mode, and maybe have no effect on edit mode.
Here’s more to read on absolute and relative lengths in CSS (the relative lengths can be scaled & zoomed):
Because Obsidian can—for simplicity—be thought of as a browser. 
Is there a CSS selector to detect that Obsidian window is in inactive state?
For example, for Firefox, there is :-moz-window-inactive, but can’t find any alternative for Obsidian. My idea is to make the titlebar text and buttons faded when the Obsidian window becomes inactive (like any other desktop windows usually work).
1 Like
Hi, I liked css realistic highligts snippet. It stopped working in live view mode after the update. Anyone knows how to fix it?
Thanks.
Code below:
body{
--fluro-yellow-rgb: 255, 255, 0;
--fluro-pink-rgb: 255, 0, 255;
--fluro-blue-rgb: 0, 255, 255;
--fluro-green-rgb: 0, 255, 0;
--text-highlight-rgb: var(--fluro-blue-rgb);
}
mark.yellow{ --text-highlight-rgb: var(--fluro-yellow-rgb); }
mark.pink{ --text-highlight-rgb: var(--fluro-pink-rgb); }
mark.blue{ --text-highlight-rgb: var(--fluro-blue-rgb); }
mark.green{ --text-highlight-rgb: var(--fluro-green-rgb); }
.markdown-preview-view mark {
margin: 0 -0.4em;
padding: 0.1em 0.4em;
border-radius: 0.8em 0.3em;
background: transparent;
background-image: linear-gradient(105deg,
transparent 0,
transparent 0.3em,
rgba(var(--text-highlight-rgb), 0.7) 0.5em,
rgba(var(--text-highlight-rgb), 0.4) 1.6em,
rgba(var(--text-highlight-rgb), 0.4) calc(100% - 1.4em),
rgba(var(--text-highlight-rgb), 0.7) calc(100% - 0.5em),
transparent calc(100% - 0.3em),
transparent 100%);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
text-shadow: 0 0 0.75em var(--background-primary-alt);
}
.cm-s-obsidian span.cm-highlight {
padding:0.1em 0;
background: rgba(var(--text-highlight-rgb), 0.4);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
text-shadow: 0 0 0.75em var(--background-primary-alt);
}
.cm-s-obsidian span.cm-formatting-highlight{
margin: 0 0 0 -0.4em;
padding: 0.1em 0 0.1em 0.4em;
border-radius: 0.8em 0 0 0.4em;
background: none;
background-image: linear-gradient(105deg,
transparent 0,
transparent 0.3em,
rgba(var(--text-highlight-rgb), 0.7) 0.5em,
rgba(var(--text-highlight-rgb), 0.4) 1.6em);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.cm-s-obsidian .cm-highlight+span.cm-formatting-highlight {
margin: 0 -0.4em 0 0;
padding: 0.1em 0.4em 0.1em 0;
border-radius: 0 0.4em 0.8em 0;
background: none;
background-image: linear-gradient(105deg,
rgba(var(--text-highlight-rgb), 0.4) calc(100% - 1.4em),
rgba(var(--text-highlight-rgb), 0.7) calc(100% - 0.5em),
transparent calc(100% - 0.3em),
transparent 100%);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
2 Likes
Some recent changes make it tricky to use font-sizes directly on the header classes or selectors due to !important being used. But the variables make it easier in a way to style it all consistently like so:
:root {
/*
https://www.layoutgridcalculator.com/typographic-scale/
https://type-scale.com/
*/
--h1: 3.052rem;
--h2: 2.441rem;
--h3: 1.953rem;
--h4: 1.563rem;
--h5: 1.25rem;
--h6: 1em;
}
2 Likes
Thanks for sharing. A couple of great links there.
Wish the root values for header sizes would work in both live preview and reading mode the way that default font names work in both modes.
For example, the sample css below styles the font face and size in live preview, but it only styles the font face in reading mode.
:root {
--default-font: 'Atkinson Hyperlegible';
--h1: 3.052rem;
}
Angel
It appears to be applying in both preview & editing mode for me. Are you using “Use legacy editor” in v0.13.33? And maybe my suggestion only works with the “minimal theme”.
I used “option+command+i” to inspect and figure out what CSS was overriding my styles and I’m only touching the font-size type scale for headings (to keep myself from maintaining another thing).
1 Like
Many thanks, Joël.
Not using the legacy editor. Running the default Obsidian theme with a simple css snippet for my preferred font face.
Will triple check the css when I am back at a Mac and try to work out what is controlling the header sizes in reading mode. I know I can target them as such, but it would be cool if I could get the root values to apply universally. I am probably doing something wrong. PEBKAC.
Grateful
Angel
I just wanted to stop by and say thank you for your tutorial. It completely demystified several things that are just hinted at around here. Thanks!
How to change Obsidian header colors, embedded title color, internal link colors:
Hope this helps anyone that comes by, I wanted to be able to customize several of these colors while using the default Dark Theme.
Here is the code:
save it as customColors.css or any file name of your choice and drop it in the .obsidian/snippets folder of your vault, then enable it in the app’s Settings->Appearance folder.
/* Headers - in Editing Mode */
.cm-header-1
{
color: red;
}
.cm-header-2
{
color: red;
}
.cm-header-3
{
color: red;
}
.cm-header-4
{
color: red;
}
.cm-header-5
{
color: red;
}
.cm-header-6
{
color: red;
}
/*Headers - in Reading Mode*/
.markdown-preview-view h1
{
color: blue;
}
.markdown-preview-view h2
{
color: blue;
}
.markdown-preview-view h3
{
color: blue;
}
.markdown-preview-view h4
{
color: blue;
}
.markdown-preview-view h5
{
color: blue;
}
.markdown-preview-view h6
{
color: blue;
}
/*Embedded Titles*/
.markdown-embed-title
{
color:#7DFDFE;
}
/*Internal Links - Editing Mode*/
.cm-s-obsidian span.cm-hmd-internal-link /* Internal Links */
{
color: #7DFDFE;
}
/*Internal Links - Reading Mode*/
a.internal-link
{
color: green;
}
/* Tags in Reading Mode*/
a.tag
{
color: red;
}
4 Likes