# The all-encompassing Obsidian homepage template (at least I hope so) **URL:** \ **Category:** Workflows & Templates\ **Created:** [January 11, 2022, 9:04am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378 "2022-01-11T09:04:28Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Rainbell](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/f6c823/32.png) [@Rainbell](https://forum.obsidian.md/u/Rainbell)\ **Post date:** [January 11, 2022, 9:04am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/1 "2022-01-11T09:04:28Z")
# Homepage ## Features - Map of contents - Music of the month - Birthday Countdown - Daily Log (Diary, Agenda, Parrot) - Project Tracking - Reading Notes - Obsidian Activity ## Tutorial > **[GitHub - Rainbell129/Obsidian-Homepage: A dashboard for your obsidian vault.](https://github.com/Rainbell129/Obsidian-Homepage)** > > A dashboard for your obsidian vault. ## View ![Screen Shot 2022-01-11 at 4.52.25 PM](https://forum.obsidian.md/uploads/default/original/3X/1/b/1b2a6acf60c0dc5ac6cffb1f6079da7f55cc5ad6.jpeg) ![Screen Shot 2022-01-11 at 4.53.42 PM](https://forum.obsidian.md/uploads/default/original/3X/9/e/9e791e278dcb73d51de6d642c6c5385ac8554238.jpeg) ![Screen Shot 2022-01-11 at 4.54.58 PM](https://forum.obsidian.md/uploads/default/original/3X/4/f/4f5420b6cace7c414a42c56b56927b47e307e6f7.jpeg) # Subhomepages These parts are not available in the GitHub repository, but feel free to ask me anything you feel fuzzy about. ## Library - book tracking ![Screen Shot 2022-01-11 at 4.55.44 PM](https://forum.obsidian.md/uploads/default/original/3X/2/4/24b98b0d4aa1b7d8c2292f3c97bea2435a8d8b36.jpeg) ## Study - map of contents - assignment tracking - links to resources ![Screen Shot 2022-01-11 at 4.59.03 PM](https://forum.obsidian.md/uploads/default/original/3X/9/2/9283a4f949b305d6e8d7fb8d1da6e6cd5279de6f.jpeg) # Bird - Name, age, gender and kind - Profile picture - Weight chart - Activity query ![Screen Shot 2022-01-11 at 5.24.05 PM](https://forum.obsidian.md/uploads/default/original/3X/a/a/aa15fd29d7d1208c9a12a643587f0465634d97de.jpeg) # Daily Note - Diary - Daily Agenda - Countdowns of important dates - Task management ![Screen Shot 2022-01-11 at 5.00.26 PM](https://forum.obsidian.md/uploads/default/original/3X/7/1/71eaa7f48bcb81502a5aca34afe06d9130a42f49.jpeg) # [Memo](https://github.com/Quorafind/Obsidian-Memos/tree/1.0.0) - Syndication of agenda and memos ![Screen Shot 2022-01-11 at 5.01.35 PM](https://forum.obsidian.md/uploads/default/original/3X/e/b/eb12aebfcafbc9af9e00c7ff0ebf772e3287b3c8.jpeg) # [Calendar](https://github.com/Quorafind/Obsidian-Big-Calendar) - Task deadline visualization ![Screen Shot 2022-01-11 at 5.02.14 PM](https://forum.obsidian.md/uploads/default/original/3X/4/3/4354e76325673d680202860b89b55822fbc41b17.jpeg) ---
**Author:** ![leigh](https://forum.obsidian.md/user_avatar/forum.obsidian.md/leigh/32/13113_2.png) [@leigh](https://forum.obsidian.md/u/leigh)\ **Post date:** [January 11, 2022, 9:20am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/2 "2022-01-11T09:20:13Z")
That was freaking awesome! NIAO JIE NIU BI! ---
**Author:** ![Daniyal-Ahmed](https://forum.obsidian.md/user_avatar/forum.obsidian.md/daniyal-ahmed/32/8128_2.png) [@Daniyal-Ahmed](https://forum.obsidian.md/u/Daniyal-Ahmed)\ **Post date:** [January 12, 2022, 4:43am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/3 "2022-01-12T04:43:31Z")
This was a hell of a ride, Thanks for sharing. How do you achieve the status bar styling? ---
**Author:** ![springtian](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/s/f04885/32.png) [@springtian](https://forum.obsidian.md/u/springtian)\ **Post date:** [January 12, 2022, 5:43am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/4 "2022-01-12T05:43:07Z")
好棒的页面，我学习一下。没有编程基础，能做到吗？ ---
**Author:** ![Rainbell](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/f6c823/32.png) [@Rainbell](https://forum.obsidian.md/u/Rainbell)\ **Post date:** [January 12, 2022, 10:15am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/5 "2022-01-12T10:15:25Z")
I used something like ```auto ``` And I added css styling for it. ---
**Author:** ![Rainbell](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/f6c823/32.png) [@Rainbell](https://forum.obsidian.md/u/Rainbell)\ **Post date:** [January 12, 2022, 10:15am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/6 "2022-01-12T10:15:36Z")
可以吧 我编程基础其实很差 ---
**Author:** ![Rainbell](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/f6c823/32.png) [@Rainbell](https://forum.obsidian.md/u/Rainbell)\ **Post date:** [January 12, 2022, 10:34am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/7 "2022-01-12T10:34:16Z")
![image](https://forum.obsidian.md/uploads/default/original/3X/e/0/e041c139e97ec6e872355f80c431dffaed28b30c.jpeg) how it currently looks on mobile ---
**Author:** ![Daniyal-Ahmed](https://forum.obsidian.md/user_avatar/forum.obsidian.md/daniyal-ahmed/32/8128_2.png) [@Daniyal-Ahmed](https://forum.obsidian.md/u/Daniyal-Ahmed)\ **Post date:** [January 12, 2022, 6:46pm UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/8 "2022-01-12T18:46:56Z")
Great, will play around with that, thanks! ---
**Author:** ![stfrigerio](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/s/5f9b8f/32.png) [@stfrigerio](https://forum.obsidian.md/u/stfrigerio)\ **Post date:** [January 19, 2022, 3:20am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/9 "2022-01-19T03:20:45Z")
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: ![Cattura2](https://forum.obsidian.md/uploads/default/original/3X/4/7/4767e99e7d4f6e6c70b95d79381539629c630e79.jpeg) By looking at the code, ![Cattura](https://forum.obsidian.md/uploads/default/original/3X/2/d/2dc74919dafac71818f55f34d1d27c2f7cdabaa9.jpeg) I really have no clue what to search for. In any case, thanks for sharing this well designed idea ---
**Author:** ![Rainbell](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/f6c823/32.png) [@Rainbell](https://forum.obsidian.md/u/Rainbell)\ **Post date:** [January 19, 2022, 5:26am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/10 "2022-01-19T05:26:55Z")
you can have a look at the settings in the css file in which list view is set to be “flex” ---
**Author:** ![Rainbell](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/f6c823/32.png) [@Rainbell](https://forum.obsidian.md/u/Rainbell)\ **Post date:** [January 19, 2022, 6:12am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/11 "2022-01-19T06:12:37Z")
![7111642572491_.pic](https://forum.obsidian.md/uploads/default/original/3X/a/8/a8dc66c8eada414c3fee11ac39ad1b7cb5305f77.jpeg) ---
**Author:** ![stfrigerio](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/s/5f9b8f/32.png) [@stfrigerio](https://forum.obsidian.md/u/stfrigerio)\ **Post date:** [January 19, 2022, 4:04pm UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/12 "2022-01-19T16:04:59Z")
Thank you very much! I’ll experiment with it as soon as I can ---
**Author:** ![Pummelfisch](https://forum.obsidian.md/user_avatar/forum.obsidian.md/pummelfisch/32/3559_2.png) [@Pummelfisch](https://forum.obsidian.md/u/Pummelfisch)\ **Post date:** [January 24, 2022, 7:56am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/13 "2022-01-24T07:56:48Z")
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 🙂 ---
**Author:** ![Rainbell](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/f6c823/32.png) [@Rainbell](https://forum.obsidian.md/u/Rainbell)\ **Post date:** [January 25, 2022, 7:48am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/14 "2022-01-25T07:48:54Z")
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. ![image](https://forum.obsidian.md/uploads/default/original/3X/7/8/786fe1084dfd600bab0b60b3ac3d22f258526e01.jpeg) Surely you can disable banners still. I find banners out-of-place in some of the dark themes. ![image](https://forum.obsidian.md/uploads/default/original/3X/1/2/12ad28a927b0ca1cc97f173e0ad5ba1b05e93c85.jpeg) Sometimes I put the clock on top of my homepage. It also looks nice. ---
**Author:** ![Kabo](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/9de053/32.png) [@Kabo](https://forum.obsidian.md/u/Kabo)\ **Post date:** [February 8, 2022, 4:27am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/16 "2022-02-08T04:27:30Z")
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: ![Screen Shot 2022-02-08 at 3.20.33 pm](https://forum.obsidian.md/uploads/default/original/3X/f/f/ff33e387b2f3ea0f0246acba1c193b60e46f3089.png) Live Preview (mis-aligned in both blocks, but showing all items): ![Screen Shot 2022-02-08 at 3.18.56 pm](https://forum.obsidian.md/uploads/default/original/3X/a/3/a3b02b51f5d25181f2b0622bdd9e3803ce9a0c97.png) Preview/Reading Mode (aligned in the bottom block, but missing items in the top block): ![Screen Shot 2022-02-08 at 3.18.37 pm](https://forum.obsidian.md/uploads/default/original/3X/8/1/8166c8650a546ef5989ffa669b0a11fadc19fa39.png) 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! 🤩 ---
**Author:** ![Rainbell](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/f6c823/32.png) [@Rainbell](https://forum.obsidian.md/u/Rainbell)\ **Post date:** [February 9, 2022, 2:52pm UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/17 "2022-02-09T14:52:55Z")
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. ---
**Author:** ![Kabo](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/9de053/32.png) [@Kabo](https://forum.obsidian.md/u/Kabo)\ **Post date:** [February 9, 2022, 11:19pm UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/18 "2022-02-09T23:19:08Z")
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: ![Screen Shot 2022-02-10 at 10.12.24 am](https://forum.obsidian.md/uploads/default/original/3X/f/6/f6da838bb482a39a895f1573b435d37088a6a05d.png) Col2 with two dataview queries separated by a live 3 header (Week 2 Tasks and Today +7): ![Screen Shot 2022-02-10 at 10.00.50 am](https://forum.obsidian.md/uploads/default/original/3X/e/6/e61a8f0e0f1de1e9406eb169a686d33e80c7a9f0.png) Nested Admonition lists of differing lengths: ![Screen Shot 2022-02-10 at 10.12.50 am](https://forum.obsidian.md/uploads/default/original/3X/e/d/edc8ab3ebce8b2597f472c2b1b1dc6ae2374b8a4.png) 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! ---
**Author:** ![Rainbell](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/f6c823/32.png) [@Rainbell](https://forum.obsidian.md/u/Rainbell)\ **Post date:** [February 10, 2022, 3:13am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/19 "2022-02-10T03:13:00Z")
`````auto ````ad-flex
**CIT591** ```tasks not done description includes #CIT591 hide backlink hide due date ```
**CIT593** ```tasks not done description includes #CIT593 hide backlink hide due date ```
```` ````` ad-flex ![Screen Shot 2022-02-10 at 11.12.50 AM](https://forum.obsidian.md/uploads/default/original/3X/4/c/4c91e90d1c96504fb5f8dd2c97c1a1092f0e222f.jpeg) ---
**Author:** ![Rainbell](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/f6c823/32.png) [@Rainbell](https://forum.obsidian.md/u/Rainbell)\ **Post date:** [February 10, 2022, 3:16am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/20 "2022-02-10T03:16:31Z")
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. ![Screen Shot 2022-02-10 at 11.15.21 AM](https://forum.obsidian.md/uploads/default/original/3X/1/9/1997408ad2cbec24628b85e4de8c8e2acc10f60e.jpeg) `````auto --- 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:mcitonline@seas.upenn.edu) - [Service](https://online.seas.upenn.edu/degrees/student-services/) - [Counsel](https://www.vpul.upenn.edu/caps/) # Assignments ````ad-flex
**CIT591** ```tasks not done description includes #CIT591 hide backlink hide due date ```
**CIT593** ```tasks not done description includes #CIT593 hide backlink hide due date ```
```` # 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/) ``` ## 邮箱 **mcitonline@seas.upenn.edu** \- 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_.** ````` ---
**Author:** ![Rainbell](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/f6c823/32.png) [@Rainbell](https://forum.obsidian.md/u/Rainbell)\ **Post date:** [February 10, 2022, 3:26am UTC](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378/21 "2022-02-10T03:26:28Z")
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 [Next page](https://forum.obsidian.md/t/the-all-encompassing-obsidian-homepage-template-at-least-i-hope-so/30378.md?page=2)