This is a quick guide to set up my custom homepage, complete with the date and time (updating in real time), a greeting with your name, recently modified notes, quick access to your daily note, a scratch pad, and a web embed I personally use to embed TickTick for tasks.
For more info on my overall setup see [How I Rebuilt Evernote in Obsidian](How%20I%20Rebuilt%20Evernote%20in%20Obsidian.md).
## Plugins required:
1. Buttons (used to make the Daily Note button)
2. Dataview (enable JavaScript Queries and inline JavaScript Queries)
3. Hover Editor (to easily hover over and edit the Scratch Pad)
4. Custom Frames (optional, to add an embed such a a calendar or task app)
5. Force note view mode (to prevent accidental edits to the home page)
Replace `cont name = YourName` with your actual name.
In the `custom-frames` section add the actual name of your frame as set in the plugin.
### Home.md (paste this in, in source mode)
`````plaintext
---
cssclasses:
- home
obsidianUIMode: preview
---
```dataviewjs
const clockElement = dv.el("h2", "", { cls: "live-clock" });
function updateClock() {
const now = new Date();
const date = now.toLocaleDateString('en-US', {
weekday: 'long',
month: 'long',
day: 'numeric',
year: 'numeric'
});
const time = now.toLocaleTimeString('en-US', {
hour: 'numeric',
minute: '2-digit',
second: '2-digit',
hour12: true
});
clockElement.innerText = `${date} • ${time}`;
}
updateClock();
setInterval(updateClock, 1000);
```
```dataviewjs
const now = new Date();
const hour = now.getHours();
const name = "YourName";
let greeting;
if (hour < 12) {
greeting = "Good Morning";
} else if (hour < 17) {
greeting = "Good Afternoon";
} else {
greeting = "Good Evening";
}
dv.el("h2", `${greeting}, ${name}`, { cls: "dashboard-greeting", attr: { style: "text-align: center;" } });
```
<hr>
<h2>Recent Notes</h2>
```dataview
TABLE file.mtime as "Last Modified"
FROM ""
SORT file.mtime DESC
LIMIT 5
```
<hr>
<h2>Today's Daily Note </h2>
```button
name 📅 Open Today's Note
type command
action Daily notes: Open today's daily note
```
<hr>
![[Scratch Pad]]
<hr class="mobile-hide">
<h2 class="mobile-hide">Today's Tasks</h2>
```custom-frames
frame: YourFrameHere
height: 2000
```
`````
### Scratch Pad.md paste this in using source mode as well to embed the frontmatter css class needed.
`````plaintext
---
cssclasses:
- sticky-note
---
`````
`.obsidian\snippets\home.css`
This is the CSS needed to make the magic happen:
Keep in mind this will hide the web embed on Mobile. Don't use the `mobile-hide` class if you don't want things hidden on mobile. Custom Frames are hidden on mobile with this as they really don't seem to work well.
```css
/* Sticky note background for the whole note */
.sticky-note {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
}
/* Hide properties in sticky notes */
.sticky-note .metadata-container {
display: none !important;
}
/* Content area in reading view */
.sticky-note .markdown-preview-section {
background: transparent !important;
padding: 20px !important;
color: #1a1a1a !important;
}
/* Content area in editing view */
.sticky-note .cm-scroller {
background: transparent !important;
padding: 20px !important;
color: #000 !important;
}
/* Darker cursor and selection on sticky note */
.sticky-note .cm-cursor,
.sticky-note .cm-cursor-primary,
.sticky-note .CodeMirror-cursor {
border-left-color: #000 !important;
border-left-width: 1px !important;
caret-color: #000 !important;
}
.sticky-note .cm-selectionBackground,
.sticky-note .cm-content ::selection {
background: rgba(0, 0, 0, 0.25) !important;
}
/* Native caret color */
.sticky-note .cm-content,
.sticky-note .cm-scroller,
.sticky-note textarea {
caret-color: #000 !important;
}
/* Add shadow, border and rounded corners */
.sticky-note .view-content {
box-shadow: 2px 2px 8px rgba(0,0,0,0.15) !important;
border: 1px solid #f59e0b !important;
border-radius: 8px !important;
}
/* Dashboard class - hide properties for clean look */
.home .metadata-container {
display: none !important;
}
/* Clean, modern home layout */
.home .markdown-preview-view {
padding: 20px !important;
}
/* Dashboard page title - centered and styled like headings */
.home .inline-title {
text-align: center !important;
font-weight: 500 !important;
color: var(--text-muted) !important;
font-size: 1.1em !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
opacity: 0.7 !important;
margin-bottom: 2rem !important;
}
/* Modern horizontal rules */
.home hr {
border: none !important;
height: 2px !important;
background: linear-gradient(to right, transparent, var(--background-modifier-border), transparent) !important;
margin: 2rem 0 !important;
opacity: 1 !important;
}
/* Clean section headers */
.home h2 {
font-weight: 500 !important;
color: var(--text-muted) !important;
margin-bottom: 1rem !important;
font-size: 1.1em !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
opacity: 0.7 !important;
}
/* Modern clock styling */
.home .live-clock {
font-weight: 400 !important;
color: var(--text-muted) !important;
font-size: 1.1em !important;
margin-bottom: 1.5rem !important;
text-align: center !important;
}
/* SKEUOMORPHIC STICKY NOTE - Scratch Pad embed only */
.home .markdown-embed[src*="Scratch Pad"] {
background:
linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%),
linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
box-shadow:
0 1px 1px rgba(0,0,0,0.11),
0 2px 2px rgba(0,0,0,0.11),
0 4px 4px rgba(0,0,0,0.11),
0 6px 8px rgba(0,0,0,0.11),
0 8px 16px rgba(0,0,0,0.11),
2px 4px 12px rgba(245, 158, 11, 0.2) !important;
border: 1px solid rgba(245, 158, 11, 0.25) !important;
border-bottom: 2px solid rgba(245, 158, 11, 0.35) !important;
border-right: 1px solid rgba(245, 158, 11, 0.3) !important;
border-radius: 2px !important;
padding: 24px !important;
min-height: 180px !important;
transform: rotate(-0.5deg) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
position: relative !important;
overflow: visible !important;
}
/* Paper texture on sticky note */
.home .markdown-embed[src*="Scratch Pad"]::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.015) 2px, rgba(0,0,0,0.015) 4px),
repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.015) 2px, rgba(0,0,0,0.015) 4px) !important;
pointer-events: none !important;
border-radius: 2px !important;
}
/* Tape effect at top of sticky note */
.home .markdown-embed[src*="Scratch Pad"]::after {
content: '' !important;
position: absolute !important;
top: -8px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 80px !important;
height: 20px !important;
background: rgba(255, 255, 255, 0.4) !important;
border: 1px solid rgba(255, 255, 255, 0.6) !important;
border-radius: 2px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}
/* Hover effect for sticky note */
.home .markdown-embed[src*="Scratch Pad"]:hover {
transform: rotate(0deg) translateY(-3px) !important;
box-shadow:
0 2px 2px rgba(0,0,0,0.13),
0 4px 4px rgba(0,0,0,0.13),
0 8px 8px rgba(0,0,0,0.13),
0 12px 16px rgba(0,0,0,0.13),
0 16px 24px rgba(0,0,0,0.13),
3px 6px 16px rgba(245, 158, 11, 0.3) !important;
}
/* Sticky note title with handwritten feel */
.home .markdown-embed[src*="Scratch Pad"] .markdown-embed-title {
color: #78350f !important;
font-weight: 600 !important;
font-size: 1.1em !important;
margin-bottom: 0.8rem !important;
position: relative !important;
z-index: 1 !important;
}
/* Content inside sticky note */
.home .markdown-embed[src*="Scratch Pad"] .markdown-embed-content {
color: #1a1a1a !important;
position: relative !important;
z-index: 1 !important;
}
/* Clean, blended tasks section */
.home .custom-frames-main-container {
border: none !important;
background: transparent !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.home .custom-frames-main-container iframe {
border: none !important;
border-radius: 8px !important;
background: var(--background-primary) !important;
}
/* Dataview tables - clean and minimal */
.home table {
border: none !important;
background: transparent !important;
}
.home table thead {
border-bottom: 1px solid var(--background-modifier-border) !important;
opacity: 0.6 !important;
}
.home table th {
font-weight: 500 !important;
font-size: 0.85em !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
color: var(--text-muted) !important;
padding: 0.5rem !important;
}
.home table td {
border: none !important;
padding: 0.6rem 0.5rem !important;
color: var(--text-normal) !important;
}
.home table tbody tr {
border-bottom: 1px solid var(--background-modifier-border) !important;
transition: background 0.2s ease !important;
}
.home table tbody tr:hover {
background: var(--background-secondary) !important;
}
.home table tbody tr:last-child {
border-bottom: none !important;
}
/* Button styling - modern and clean */
.home .button-container button {
background: var(--interactive-accent) !important;
color: var(--text-on-accent) !important;
border: none !important;
padding: 0.6rem 1.2rem !important;
border-radius: 6px !important;
font-weight: 500 !important;
font-size: 0.9em !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
.home .button-container button:hover {
transform: translateY(-1px) !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}
/* Hide tasks section on mobile by targeting custom-frames directly */
.is-mobile .markdown-preview-sizer > div > .block-language-custom-frames {
display: none !important;
}
.is-mobile .cm-embed-block.cm-callout.block-language-custom-frames {
display: none !important;
}
/* Hide any element containing custom-frames */
.is-mobile pre:has(code.language-custom-frames),
.is-mobile .block-language-custom-frames,
.is-mobile [class*="custom-frames"] {
display: none !important;
}
/* Hide elements with mobile-hide class on mobile */
.is-mobile .mobile-hide {
display: none !important;
}
```
End Result:
