I had shared this template on Discord, Reddit & Twitter and had lots of questions as to how it was made. If you haven’t seen it, this was what was shared:
https://www.reddit.com/r/ObsidianMD/comments/i066oj/daily_notes_in_v_081/
https://twitter.com/productivitygur/status/1288613420804132864?s=20
I will be sharing this template below:
Some points to note:
- Unfortunately internal styles will be banned in a future release so enjoy this for now.
- I will be updating the template, to work even after internal style is banned as external css and inline css will continue to work.
- This entire template has been automated using Keyboard Maestro. All I need to do is click a button and it autofill’s most of the data for me. (Gets sleep via a shortcuts on iOS, gets BCP though a python script, gets the weather through Dark sky, etc.). I think it will be pretty cumbersome to update daily without such a setup.
- Dates for previous and next buttons are autofilled as well using Keyboard Maestro
- I have removed the iframe source for the weather widget as its running on my own server, besides, its only providing data for my city. Please find the video below where you can learn how to use this yourself.
Please see this video to learn to generate your own weather widget
The template:
<randomMarkupToMakeStyleWork>
<style>
.row {display: flex;}
.column {flex: 50%;}
table, th, td {border: 1px solid black; text-align:center;}
button {text-decoration: none; display: inline-block; padding: 8px 16px; width:"100%"; margin: auto;}
button:hover {background-color: #ddd; color: black;}
.next {background-color: #4CAF50; color: white; border-radius: 4px; border: none; text-align: center; font-size: 18px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px;}
.next span {cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}
.next span:after {content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s;}
.next:hover span {padding-right: 25px;}
.next:hover span:after {opacity: 1; right: 0;}
a {text-decoration: none;}
.previous {background-color: #f1f1f1; color: black; border-radius: 4px; border: none; text-align: center; font-size: 18px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px;}
.previous span {cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}
.previous span:before {content: '\00AB'; position: absolute; opacity: 0; top: 0; left: -20px; transition: 0.5s;}
.previous:hover span {padding-left: 25px;}
.previous:hover span:after {opacity: 1; left: 0;}
</style>
<div class="row">
<div class="column">
<h3>Sleep</h3>
<table style="width:90%">
<tr>
<th>Sleep</th>
<th>Hours</th>
</tr>
<tr>
<td>Sleep</td>
<td></td>
</tr>
<tr>
<td>Quality</td>
<td></td>
</tr>
<tr>
<td>Deep</td>
<td></td>
</tr>
</table>
</div>
<div class="column"><h3>BCP</h3>
<table style="width:100%">
<tr>
<th>BCP</th>
<th>Number</th>
</tr>
<tr>
<td>Year</td>
<td>9</td>
</tr>
<tr>
<td>Month</td>
<td>8</td>
</tr>
<tr>
<td>Day</td>
<td>1</td>
</tr>
</table>
</div>
</div>
---
<div class="row">
<div class="column">
Weather: </br>
Possible light rain and humid throughout the day. </br>
Today's high will be 30.54 (Feels like high: 39.29) at 11:38 AM </br>
Low will be 26.42 (Feels like low: 30.51) at 02:40 AM</br>
Today, the sun will rise at 06:16 AM & set at 07:17 PM</br>
UV Index: 8, Humidity: 89
</div>
<div class="column">
<iframe width="100%" height="230" src="" frameborder="0"></iframe>
</div>
</div>
---
<button class="previous" style="text-decoration: none;"><span>[[July 28, 2020| Previous]] </span></button><button class="next"><span style="text-decoration: none;">[[July 30th, 2020| Next]]</span></button>
---
## Morning
### I am *grateful* for ?
-
-
-
### What could make *today great* ?
-
-
-
---
## Meals
### Breakfast:
### Lunch:
### Dinner:
### Others:
|COFFEE| |
|:-:|:-:|
| CUPS | 0 |
| SB | 0 |
---
### Taks & Notes
- [ ] Task 1
- [ ] Task 2
- [ ] Task 3
- note 1
- note 2
- note 3
---
## Night
### *Amazing* things that happened *today* ?
-
-
-
### How could *I* have made it better ?
-
-
-
---
## Bought
-
---
## Other Notes