search

Ellpeck / ObsidianCustomFrames

An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep, Todoist and more.
MIT License
551 stars 29 forks source link

Embed Obsidian Note as Frame? #126

Open j-finger opened 3 months ago

j-finger commented 3 months ago

I have a heatmap calendar plugin that I use and I want to embed the file as a frame. At the moment I am just placing the note in my sidebar but it's not as clean as I would like. Is this possible? I've tried point the URL to the file but it's not rendering anything

Desired Functionality image

j-finger commented 3 months ago

Never mind. I figured it out with custom css. I added the property "cssclass" = .heatmap to the YAML of my heatmap file. Then I used the following CSS snippet to clean it up a little (centring, removal of title & turn off scrolling)

/* targets the .heatmap css class, centres the content and turns off scrolling */
.heatmap {
    display: stretch;
    height: 100%;
    width: 100%;
    overflow-y: hidden;
    padding-top: 0px;
    margin-top: -20px;
}

/* removes the title. May not be necessary  */
.heatmap .view-header-title{
    display: none
  }

/* removes the title. 100% necessary */
.heatmap .inline-title{
    display: none;
  }

Result image

Still it would be nice to have this as a pane/frame with an icon instead of a note