The all-encompassing Obsidian homepage template (at least I hope so)

Homepage

Features

  • Map of contents
  • Music of the month
  • Birthday Countdown
  • Daily Log (Diary, Agenda, Parrot)
  • Project Tracking
  • Reading Notes
  • Obsidian Activity

Tutorial

View

Screen Shot 2022-01-11 at 4.52.25 PM


Subhomepages

These parts are not available in the GitHub repository, but feel free to ask me anything you feel fuzzy about.

Library

  • book tracking

Study

  • map of contents
  • assignment tracking
  • links to resources

Bird

  • Name, age, gender and kind
  • Profile picture
  • Weight chart
  • Activity query

Daily Note

  • Diary
  • Daily Agenda
  • Countdowns of important dates
  • Task management

Memo

  • Syndication of agenda and memos

Calendar

  • Task deadline visualization

26 Likes

That was freaking awesome!
NIAO JIE NIU BI!

1 Like

This was a hell of a ride, Thanks for sharing. How do you achieve the status bar styling?

好棒的页面,我学习一下。没有编程基础,能做到吗?

I used something like


<progress max=xx value=xx> </progress>

And I added css styling for it.

1 Like

可以吧 我编程基础其实很差

how it currently looks on mobile

3 Likes

Great, will play around with that, thanks!

This is so beyond my skill level that I’m having an hard time grasping how you managed to implement so many things in such a cool way.

If I may ask, I’m particularly interested in one thing: how did you manage to arrange elements horizontally instead of vertically?

For example in your moc section:

By looking at the code,

I really have no clue what to search for.

In any case, thanks for sharing this well designed idea

you can have a look at the settings in the css file in which list view is set to be “flex”

7111642572491_.pic

Thank you very much! I’ll experiment with it as soon as I can

Hey I realy like this Homepage. Played a bit around with it and extracted what I could get use out. However i noticed that the “Homeapge settings.css” dectivates the preview when hovering over a link. That makes sense on the actuall Homepage, but in almost every other note I’d prefer having that preview. Is there a way to only deactivate the hover on the Homepage?

One other question is about the profile-picture in the top right of the homepage. I noticed that this grabs the picture from the internet. Is there any way to make it so, that it grabs the image from a local folder in the Vault, so that it would work on mobile as well as on the PC? Or is the only way to achive that over the web?

Thank you for the great work. Realy enjoying the new homepage :slight_smile:

Haven’t thought about a way around it. You can either disable hovering globally or just don’t disable it.

As for the profile picture, yes there is a way for embedding local picture. You can try dragging a local picture into an explorer and copy its address. To have the link work on both PC and mobile I still recommend finding an image cloud online.

However, there is another thing which I honestly prefers over the profile picture right now. That is, using icon provided by banners. It looks something like this which is imo more aesthetically pleasing to the eyes.

Surely you can disable banners still. I find banners out-of-place in some of the dark themes.

Sometimes I put the clock on top of my homepage. It also looks nice.

2 Likes

Hi there,

I love your homepage! I was wondering if you could help me with an issue in the multi-column admonition blocks…

I’m planning on a much simpler dashboard that works in Live Preview, hence I love the multi column Admonition blocks to Mae use of the width of the page. But they show up strangely in Live Preview and are not aligned. In Reading mode, they lose text as well… here are some pics to illustrate, as I am note sure if it is my set up, or the CSS (I am using the Minimal theme, by the way).

What I am looking for is effectively something like your Map fo Contents, but inside an Admonition block (as it renders in Live Preview).

the code in the editor:

Live Preview (mis-aligned in both blocks, but showing all items):

Preview/Reading Mode (aligned in the bottom block, but missing items in the top block):

Any ideas what might be causing this, and how to fix this?

Thanks!

EDIT: Ps if there was a way to get rid of the COL2 title, that would also be awesome! :star_struck:

I think you are not using the admonition flex view properly. With the css file set up the admonition titles should be automatically hidden. Are you sure you included cssclass: myhome in yaml?

To get them aligned you can try ad-flex, another built in admonition flex view in Blue Topaz theme. However, it’s limited to two columns currently. You have to edit the css file yourself for more columns.

Yes, I did, though I did leave the colour on, which I think was part of the issue, however, the columns are still not aligned. It works in Blue Topaz, but only if the lists are all the same length.

How do I use flex view properly?

What triggers a new column? Is it a heading, or a paragraph? or a list item?

I’m using the Minimal theme, but the same happens in the default Obsidian theme.

The untouched Homepage you kindly provide:

Col2 with two dataview queries separated by a live 3 header (Week 2 Tasks and Today +7):

Nested Admonition lists of differing lengths:

EDIT: The nested admonitions align themselves when I go to Reading Mode! However, the 2 Dataview queries (and your embedded pages) are still like in the picture (as opposed to having query 1 (Week 2 tasks) on the left, and query 2 (Today +7) on the right)

Any chance you could provide the Study Dashboard as well? It looks great!

````ad-flex

<div>

**CIT591**
```tasks
not done
description includes #CIT591 
hide backlink
hide due date
```

</div>

<div>

**CIT593**
```tasks
not done
description includes #CIT593
hide backlink
hide due date
```
</div>
````

ad-flex

I’m using ad-flex with the study homepage. You can check out its css in Blue Topaz css file.

As you’ve pointed out, the ad-col2 are not designed to align each element, instead allowing them to flow freely between the two columns. So for alignment you either have to edit the css yourself or use the ready-made ad-flex.



---
banner: https://i.pinimg.com/originals/fb/d1/99/fbd199227854960de6131bb7e8d3774d.gif
cssclass: noyaml myhome
banner_x: 0.5
banner_y: undefined
banner_icon: 💻
---

# MCIT
- **COURSES**
	- [[MCIT591]]
	- 591 link
	- [[MCIT593]]
	- [593 link](https://www.coursera.org/learn/cit593-spring22/home/welcome)
- **LINKS**
	- [Cousera](https://www.coursera.org/degrees/mcit-penn/home/)
	- [Piazza2](https://piazza.com/class/kwqvox91xa6dz)
	- [InTouch](http://www.upenn.edu/pennintouch)
	- [MyPenn](https://mypenn.upenn.edu/s/)
- **CONTACT**
	- [E-mail](mailto:[email protected])
	- [Service](https://online.seas.upenn.edu/degrees/student-services/)
	- [Counsel](https://www.vpul.upenn.edu/caps/)

# Assignments
````ad-flex

<div>

**CIT591**
```tasks
not done
description includes #CIT591 
hide backlink
hide due date
```

</div>

<div>

**CIT593**
```tasks
not done
description includes #CIT593
hide backlink
hide due date
```
</div>
````

# Resources
```ad-kanban
- 
	- [Online Handbook](https://onlinelearning.seas.upenn.edu/mcit-handbook/ "MCIT Online Handbook")
	- [Counseling and Psychological Services](https://www.vpul.upenn.edu/caps/)
	- [MCIT Online Program Advising](https://programadvising.youcanbook.me/)
	- [MOSA’s Peer Mentorship Program](https://mosa.seas.upenn.edu/peer-mentorship-program/ "Peer Mentorship")
	- [Piazza Support Center](https://support.piazza.com/)
	- [Academic Calendar](https://online.seas.upenn.edu/degrees/student-services/academic-calendar/)
	- [Student Services](https://online.seas.upenn.edu/degrees/student-services/)
	- [Advising Hours](https://urldefense.com/v3/__https://programadvising.youcanbook.me__;!!IBzWLUs!BqoDq-ZKrsrcUXa9MuuTE2RcUXsgGsN7zfZKZ3lg-wMLh8kDtdrzUcN-N1gESS9CZEu3tJ8K6rwnGQ0$)
	- [Handbook](https://online.seas.upenn.edu/degrees/student-services/student-handbook/)
	- [Academic Integrity](https://catalog.upenn.edu/pennbook/code-of-academic-integrity/)
	- [普林斯顿java](https://introcs.cs.princeton.edu/java/home/)

```
## 邮箱
**[email protected]**
\- Degree planning
\- Academic advising
\- A private issue that only affects you such as grades
\- Any question that you're not sure who to ask
-   ***_Please include your Penn ID number in all email correspondence with the program and university_.**


1 Like

For blank background you can try to check 3.1.2 admonition support in Style Settings plugin for Blue Topaz. I should’ve included the css parts in my snippet. Not sure why it doesn’t work with yours