Meta Post - Common CSS Hacks

. . . . aren’t highlighting and boldening, as well as italicising, underlining, and using red (or colours) for the font of certain parts of text all formatting features that have been around for yonks? And we know how to implement that kind of formatting, as @Meins points out for highlighting.

@Klaas ~ Apologies for being behind the curve on this, but I’m new to Markdown, and I’m wondering:

  • Where can I learn how to add colors to my fonts in Obisidian?
  • Specifically, will any/all standard Markdown commands work within Obsidian, or does O use a customized version of Markdown?

FWIW, I did look in the Help file that came with my O installation, and I couldn’t find any references to font colors, even in the section on formatting notes.

Thanks in advance.

@Metta: the Help file will tell you about the features of Obsidian, and about some but not about all the basics of markdown. For example colour is not an Obs-specific feature so will not be mentioned in the Help file.

To learn about markdown you can read up about on internet, there is plenty. BTW, markdown is not difficult to learn, and once you get the hang of it you’ll love it; at least that’s how it went for me. I ditched Word and other editors and only use MD.

Another issue is that MD is in fact so simple that not everything can be done using MD syntax, such as colouring text. Nevertheless, many (most/all ?) MD “flavours” accept some inline HTML syntax too, such as colouring text.

Adding colour to your text in Obs is done as follows:
<font style="color:red">bla text</font> , where “bla text” is your specific text.

It is also possible colour text and its background:
<font style="color:red;background-color:blue">bla text</font>

My advice is you should create a file as you are building your knowledge about MD and basic HTML, such as font colouring.

As for your 2nd question, by “commands” I presume you mean “syntax”, i.e. MD language/flvour. The flavour Obs uses is Common Markdown.

Formatting is mentioned in the Help file. In the Help file click on Start here at the bottom of the list in the left hand pane. On the page that opens, look under section Quick Start there is a bullet point How to use Markdown to Format your notes, with “Format your notes” being a clickable link.

I looked at and used a number of MD apps, and Obsidian is definitely the best overall, and still evolving, quickly. It is not complete yet, but it is extremely good already.

Embrace it, enjoy it, and feel free to ask any questions, the community is very helpful with many experts. You should also join the Discord channels.

1 Like

Hi, Thank you for this code. Its great. Just have a query:
In the editor mode, when I write long sentences, I couldn’t get continuous lines after the text wrap (please see the following image):
obsidianquestion
However, there is no such issue in preview mode. Is there a way get continuous lines in editor mode?
Thank you in advance.

1 Like

@ramana: I don’t what code you got, but could this be what you need?

/* Long bullet list: connect the same levels of bullets with vertical "lines" */
.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
 content:'';
 border-left: 1px solid rgba(0, 122, 255, 0.25);
 position: absolute;
}

.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px; 
}

ul ul::before { left: -11px; top: 0; bottom: 0; /* change "left:" value for align of vert. line */
}

/* Edit mode unordered list dash rendered as dot for WYSIWYG */
/* I prefer "Turn -lists into bullets as you type as per Typora */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul {
    color: transparent;
    max-width: 10px;
}
  
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul:after {
    content: "•";
    position: absolute;
    top: 6px;
    left: 4px;
    color: var(--text-normal);
}

I have a file with many useful snippets: you can download it here.

2 Likes

@Klaas Thank you for the reply and the code. However even with this code, I see the same gaps in the bullet lines after text wraps (please see the following image).

I don’t what code you got, but could this be what you need?

The code posted by @lizardmenfromspace earlier.

I have a file with many useful snippets: you can download it here

I am new to CSS and this will be very helpful. Thank you very much.

I’m going to add an answer to “How to change font styles/sizes in Obsidian?” for referencing in other threads. The contents of this snippet are from the Minimal Theme by @kepano , and can be found here.

 /*----------------------------------------------------------------
  Font styles
  Preview mode and UI */

  --text:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  
  /* Editor mode */

  --text-editor:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  
  /* Code */

  --font-monospace:Menlo,SFMono-Regular,Consolas,"Roboto Mono",monospace;

  /* Sizes, weights, padding */

  --font-normal:16px;
  --font-small:13px;
  --font-smaller:11px;
  --font-smallest:10px;
  --normal-weight:400;   /* Switch to 300 if you want thinner default text */
  --bold-weight:600;     /* Switch to 700 if you want thicker bold text */
  --line-width:40rem;    /* Maximum characters per line */
  --line-height:1.5;
  --max-width:87%;       /* Amount of padding around the text, use 90% for narrower padding */
  --nested-padding:3.5%; /* Amount of padding for quotes and transclusions */
  --icon-muted:0.4;
  --border-width:1px;
  --border-width-alt:1px;

  /*----------------------------------------------------------------
9 Likes

If I am not mistaken, your snippet breaks the ![[image.jpg|30]] resizing notation.
For instance:

![[image.jpg|30]]
![[image.jpg|100]]
![[image.jpg|200]]

are all rendered as identical figure sizes (when not hovering with the mouse). Without your snippet, the same figured is instead rendered three times with distinct sizes.

Regarding the visibility of the pane header icons, I use this. Keeps a tiny bit of visibility of the icons, but also keeps the pin/link items more visible even when not hovered (I find that useful). Also has a snazzy ripple of visibility in/out on hover because I was bored when I wrote it so why not? :slight_smile:

Untitled

/*
    Fade the pane header controls unless hovered (just to reduce/minimise distraction) 
    does this per individual control to easily leave link and pin slightly more visible even if not hovered, and 
    as an easy way to do a snazzy transition delay stagger in and out ;)    
*/

/* not hovered ie. on cursor exit from the header */
.view-header:not(:hover) a.view-action[aria-label*="Preview"],
.view-header:not(:hover) a.view-action[aria-label*="Edit"]  { 
  opacity: 0.1;
  transition: opacity .25s ease-in-out;
  transition-delay: 0ms;
}

.view-header:not(:hover) a.view-action[aria-label*="link"] { 
  opacity: 0.55;
  transition: opacity .25s ease-in-out;
  transition-delay: 20ms;
}

.view-header:not(:hover) a.view-action[aria-label*="Pin"] { 
  opacity: 0.35;
  transition: opacity .25s ease-in-out;
  transition-delay: 40ms;
}

.view-header:not(:hover) a.view-action[aria-label*="Close"] { 
  opacity: 0.1;
  transition: opacity .25s ease-in-out;
  transition-delay: 60ms;
}

.view-header:not(:hover) a.view-action[aria-label*="More"] { 
  opacity: 0.1;
  transition: opacity .25s ease-in-out;
  transition-delay: 80ms;
}

/*  hovered ie. on cursor entry to the header */
.view-header:hover a.view-action[aria-label*="Preview"],
.view-header:hover a.view-action[aria-label*="Edit"]  { 
  opacity: 1;
  transition: opacity .25s ease-in-out;
  transition-delay: 0ms;
}

.view-header:hover a.view-action[aria-label*="link"] { 
  opacity: 1;
  transition: opacity .25s ease-in-out;
  transition-delay: 20ms;
}

.view-header:hover a.view-action[aria-label*="Pin"] { 
  opacity: 1;
  transition: opacity .25s ease-in-out;
  transition-delay: 40ms;
}

.view-header:hover a.view-action[aria-label*="Close"] { 
  opacity: 1;
  transition: opacity .25s ease-in-out;
  transition-delay: 60ms;
}

.view-header:hover a.view-action[aria-label*="More"] { 
  opacity: 1;
  transition: opacity .25s ease-in-out;
  transition-delay: 80ms;
}
3 Likes

when i toggle this snippet, my gruvbox theme color revert back to default theme color…

@GreenChocho That’s very odd, there’s no part of it that changes colours or affects anything like that - it should be completely theme-proof. I’ve just installed gruvbox and tested it, and I can’t recreate your issue at all. The only thing I can suggest is switching to another theme and checking that the hover behavior works, and then switching back to gruvbox (turn it off, turn it back on…)

Or maybe try pasting the code above into your snippet file again. If you didn’t get all of it (missing brace or something) then I guess it could interfere with the theme loading (can’t really see how, but you never know).

1 Like

I recheck according to your comment and It was my mistake. I missed the last brace…
I am sorry for the trouble.
It work great now! :smiley:. Thank you!

No trouble, that’s what communities are for :grinning:

1 Like

Can someone suggest a way to change the colour and properties of italicised or bold texts? I intend to use it as an alternative to highlighting of sorts.

@DummyME
In the preview portion those are called by their standard html elements. <strong> for bold and <em> for italics. On the edit side they are called by classes “cm-strong” and “cm-em” respectively. For the preview mode you can also have different changes based on the class of the document.
As an example the below code with change emphasized words to green in edit mode, red in preview mode unless it has the css class of “test” in which case it would be blue:

em {
    color: red;
}

.cm-em{
    color: green;
}

div.test em{
    color: blue;
}

This is what it would look like (edit mode on the left and preview on the right):

2 Likes

Thanks a lot.
Is there a way I can get away with the tilt as well. I vaguely remember it to be called decoration?
Thanks!

Responsive font :sunglasses:

same document but the smaller is the window, the smaller is the font!



Here is the code

:root
{
--font-size-normal: clamp(12px, 5vh, 20px);
--font-size-code: clamp(12px, 5vh, 18px);
--font-size-side-dock: clamp(12px, 5vh, 16px);
--font-size-side-dock-title: clamp(12px, 5vh, 18px);
--font-size-blockquote: clamp(16px, 5vh, 22px);
--font-size-status-bar: clamp(16px, 5vh, 16px);
--font-small: clamp(16px, 5vh, 18px);
--font-medium: clamp(16px, 5vh, 21px);
}

PS: You can do that with header too :slightly_smiling_face:! with the clamp() property. But I am too lazy

3 Likes

I am unable to apply it as a snippet in v0.9.22. Can someone help?

As I explored CSS snippets and customization, I made a short video walk through to get started:

https://youtu.be/iCRmtNmGA9k

Hope it’s helpful!

Regarding this wonderful explanation, is there a way to display the src page of a header/block embed - as is presented with standard page embed ![[page ref]]? It would be nice to display not only the embedded header at the top of the transclusion, but also the file in which it resides.

What to do if I would like to have relative path in my edit mode (in md files) but don’t really want them to render as such? While in preview, I would like them to be stripped of path and just the filename.

This is link to a file : [[Vault/Folder/New File Name]]

to be displayed as in preview

This is link to a file : New File Name

^ with clickable link ofcourse