Is there a way to add text to the left side of the margin?

[Kvry]

I was wondering if there’s any way to add text out of the normal textbox. I wanted to add a timestamp, so that my daly notes timestamps look nicer and don’t blend with the text I’m writing.

It would be very nice if there was a plugin for that!

Anyways, if you guys have a nicer way of adding timestamps to your notes, let me know! I use the Templater plugin to add these bars to the side and add a hotkey to add the formatted timestamp.

Thanks!

[woofy31]

That’s a sweet idea, so here’s how I accomplished it:

NOTE: this was tested on an empty, fresh Obsidian vault with NO plugins and NO themes. If it doesn’t work for you, then it’s probably because of some theme or plugin conflict.

1. you have to use <code> blocks to encapsulate the timestamp, otherwise you have no way of knowing in CSS which is the timestamp and which is the text:

   <code>21:24</code>
   some text
   goes here
   
   <code>11:45</code>
   another text
   goes here
   

2. create a custom CSS snippet and enable it under the Appearance settings window, then put the following CSS code in it:

   /* adjust text margin & timestamp color here */
   :root, body, .view-content {
     --timestamp-margin: 4em;
     --timestamp-color: #999;
   }
   
   /* SOURCE/LIVE EDIT MODE */
   .cm-line:has(.cm-html-embed) {
     /* make sure timestamp is leftmost */
     text-indent: 0 !important;
   
     /* move one line-height lower */
     top: calc(var(--line-height-normal) * 16px);
   
     /* timestamp styling */
     & code {
       font-family: var(--font-text);
       font-size: var(--font-text-size);
       font-style: italic;
       color: var(--timestamp-color);
     }
   }
   .cm-line:has(.cm-html-embed) ~ .cm-line:not(:has(.timestamp)) {
     /* make sure everything after the timestamp shows up on its right side */
     text-indent: var(--timestamp-margin);
   }
   
   /* PREVIEW MODE */
   .markdown-preview-section {
     & > div > p {
       /* make sure everything after the timestamp shows up on its right side */
       margin-left: var(--timestamp-margin);
   
       & > code {      
         /* make sure timestamp is leftmost */
         margin-left: -4em !important;
   
         /* move one line lower */
         display: inline;
         position: relative;
         top: calc(var(--line-height-normal) * 16px);
         
         /* remove code-specific background */
         background-color: var(--background-primary) !important;
   
         /* timestamp styling */
         font-family: var(--font-text);
         font-size: var(--font-text-size);
         font-style: italic;
         color: var(--timestamp-color);
       }
     } 
   }
   

---

The results:

• source mode:

  

• live edit mode:

  

• preview mode:

  

[Kvry]

Hey! Thank you for helping me out!This works really well and looks awesome!

However, I want those timestamps on my daily notes only, so my other notes should look normal. Using that method, all of my text blocks are dislocated to the right, even if I don’t put any timestamp at all.

Is there a way to move only the paragraph below the timestamp?

[woofy31]

@Kvry

However, I want those timestamps on my daily notes only, so my other notes should look normal

In this case there’s a better approach to affect just daily notes:

1. put the following line only in your daily notes’ frontmatter/metadata:

   cssclasses: [timestamps]
   

2. replace that whole CSS snippet with this one instead:

   /* adjust text margin & timestamp color here */
   :root, body, .view-content {
     --timestamp-margin: 4em;
     --timestamp-color: #999;
   }
   
   /* SOURCE/LIVE EDIT MODE */
   .timestamps .cm-line:has(.cm-html-embed) {
     /* make sure timestamp is leftmost */
     text-indent: 0 !important;
   
     /* move one line-height lower */
     top: calc(var(--line-height-normal) * 16px);
   
     /* timestamp styling */
     & code {
       font-family: var(--font-text);
       font-size: var(--font-text-size);
       font-style: italic;
       color: var(--timestamp-color);
     }
   }
   .timestamps .cm-line:has(.cm-html-embed) ~ .cm-line:not(:has(.timestamp)) {
     /* make sure everything after the timestamp shows up on its right side */
     text-indent: var(--timestamp-margin);
   }
   
   /* PREVIEW MODE */
   .timestamps .markdown-preview-section {
     & > div > p {
       /* make sure everything after the timestamp shows up on its right side */
       margin-left: var(--timestamp-margin);
   
       & > code {      
         /* make sure timestamp is leftmost */
         margin-left: -4em !important;
   
         /* move one line lower */
         display: inline;
         position: relative;
         top: calc(var(--line-height-normal) * 16px);
         
         /* remove code-specific background */
         background-color: var(--background-primary) !important;
   
         /* timestamp styling */
         font-family: var(--font-text);
         font-size: var(--font-text-size);
         font-style: italic;
         color: var(--timestamp-color);
       }
     } 
   }
   

This way, the timestamp-styles will only apply to notes with the cssclasses: [timestapms] frontmatter line, every other note will remain unchanged.