Git Product home page Git Product logo

obsidian--its-theme's Introduction

ko-fi

ITS Theme

By SlRvb

Theme for my Obsidian Story Vault: In The Shadows.

Table of Contents

Features

  • Dark and Light mode
  • Colored Graph
  • Squared Edges
  • Heading:
    • Underline: spans across the page depending on the heading
    • Embeded: Embedded files have smaller headers and are 1 color
  • Custom Horizontal line
  • Tag Pills (Rectangular)
  • Metadata minimal style
  • Checkboxes
  • Images:
  • <i></i> for images or other files attributions
    • Adds a different color to text within it to differentiate it from other text
    • Centered to match image centering
    • Adding: alt="left" and alt="right" within it will push the attribute to left and right of the screen.
  • Blockquotes
    • Soft background
    • Wider blockquote
    • Quotation marks added top right corner
  • Popover
    • Larger Popover
    • Images fit within the popover window
    • Images are cropped in popover window
  • Line Relationships
  • Folder Navigation Icons
  • Text Wrapping
    • Outline Pane
    • Tag Pane
    • File Explorer Sidebar
    • Embed Titles
    • Query Titles
  • Embed Adjustments
  • Aside for comments/etc
  • Style Settings Plugin Suported
  • Fonts: (Main ones are near the listed:, alternates are below it)

Preview

Darkmode

Features Edit Mode

Lightmode

Features Edit Mode

CSS Classes

CSS Classes to add in the frontmatter/yaml to change the way a page looks.

Example:

---
cssclass: table, t-c, no-m
---
Classes Description
no-m Fully hide Frontmatter on just that page
justified Justifies text
readable Set readable line width to just that page when readable line width is off
writing Centers Headings, justifies text, auto sets readable line width
poem Centers text
kanban Turn lists into kanban-like boards
k-o Adds border and bullet to sub list of a kanban list
table First column has a darker background and text is bolded
t-c Center tables
t-w Table expands to fill the whole width of the file
hc Center headings
hcl Center headings with a line on each side
illusion Apply Illusion Theme inspired styling to headings
dvl Stylize Dataview Lists to be more spaced out and have a background
s-li Space out lists
img-grid Apply image grid to all pictures on page

Ids

<s id="#col"></s>

Classes Description
#col Show/Create a color block
#font Showcase a font in huge sized text
#vid 16:9 aspect ratio for videos. Used before an iframe:
<div id=vid><iframe></iframe></div>

Examples:

<i></i> Attributes

Alt="_" Description
left Move text of <i> to the left
right Move text of <i> to the right
no-bg Remove the background color of <i>
clear Equivalent of a <br> or an enter.

Aside

Recommend using <s class="aside-">Text</s> to keep markdown formatting.

Class Description
aside-show Aside content will be shown in the margin of the page.
aside-hide Aside content will be hidden and only display an icon 🗨.
To see comment, hover over the icon
aside-in Aside content will be embedded inside the page.

Examples: Aside code is highlighted.

Image Positions

Obsidian internal images ![[]] will change immediately, but for external images ![](), the page needs to be reopened to see the changes.

Clear

Example Description
![[image.png|clear]] clear will allow that image to sit below another image
If it's on the same side instead of sitting in the middle of the page.

Cover (Mostly for Customizable Version)

Example Description
![[image.png|cover]] cover will resize the image, maintain aspect ratio and avoid stretching.

Sizing (Mostly for Customizable Version)

Example Description
![[image.png|loc|sban|200]] Place the |<numbers> sizing at the end of the text and it will shrink the image to that size.

Simplified Version

Left/Right/Center

Example Description
![[image.png|left]] left will move the image to the left.
![[image.png|right] right will move the image to the right.
![[image.png|ctr] ctr will move the image to the center.

Types

Banner

Example Description
![[image.png|banner]] banner will crop the image height-wise to about 150px while setting the width to cover the entire page.
![[image.png|banner+small]] banner+small will crop the image height-wise to about 100px while setting the width to cover the entire page.
![[image.png|banner+tall]] banner+tall will crop the image height-wise to about 500px while setting the width to cover the entire page.

Portrait

Example Description
![[image.png|portrait]] portrait will crop the image width-wise to about 40% while setting the height to a standard of about 400px.
![[image.png|portrait+small]] portrait+small will crop the image width-wise to about 20% while setting the height to a standard of about 200px.
![[image.png|portrait+tall]] portrait+tall will crop the image width-wise to about 50% while setting the height to a standard of about 500px.

Profile

Example Description
![[image.png|profile]] profile will round the borders of the image to create a round image and size it to about 100px.
![[image.png|profile+medium]] profile+medium will round the borders of the image to create a round image and resize it to about 250px.

Customizable Version

Left/Right

Example Description
![[image.png|locl]] locl will move the image to the left.
![[image.png|locr]] locr will move the image to the right.

Inner Image Position

Example Description
![[image.png|pl]] pl will move the inside of the image to the left.
![[image.png|pr]] pr will move the inside of the image to the right.
![[image.png|pt]] pt will move the inside of the image to the top.
![[image.png|pb]] pb will move the inside of the image to the bottom.
![[image.png|pc]] pc will move the inside of the image to the center.

These will inch the images around if the ^ above syntax isn't enough.

Example Description
![[image.png|p+cr]] p+cr will move the inside of the image to the center right.
![[image.png|p+cl]] p+cl will move the inside of the image to the center left.
![[image.png|p+ct]] p+ct will move the inside of the image to the center top of the image.
![[image.png|p+cct]] p+cct will move the inside of the image to the center top, slightly higher than p+ct
![[image.png|p+tc]] p+tc will move the inside of the image to the center top, slightly lower than pt
![[image.png|p+tcc]] p+tcc will move the inside of the image to the center top, slightly lower than p+tc
![[image.png|p+cb]] p+cb will move the inside of the image to the center bottom of the image.
![[image.png|p+ccb]] p+ccb will move the inside of the image to the center bottom, slightly lower than p+cb
![[image.png|p+bc]] p+bc will move the inside of the image to the center bottom, slightly higher than pb
![[image.png|p+bcc]] p+bcc will move the inside of the image to the center bottom, slightly higher than p+bc

Sizing

Example Description
![[image.png|htiny]] htiny will resize the image to about 100px in height.
![[image.png|hsmall]] hsmall will resize the image to about 200px in height.
![[image.png|hs-med]] hs-med will resize the image to about 300px in height.
![[image.png|hm-sm]] hm-sm will resize the image to about 400px in height.
![[image.png|hmed]] hmed will resize the image to about 500px in height.
![[image.png|hm-tl]] hm-tl will resize the image to about 600px in height.
![[image.png|htall]] htall will resize the image to about 700px in height.
![[image.png|wtiny]] wtiny will resize the image to about 100px in width.
![[image.png|wsmall]] wsmall will resize the image to about 200px in width.
![[image.png|ws-med]] ws-med will resize the image to about 300px in width.
![[image.png|wm-sm]] wm-sm will resize the image to about 400px in width.
![[image.png|wmed]] wmed will resize the image to about 500px in width.
![[image.png|wm-tl]] wm-tl will resize the image to about 600px in width.
![[image.png|wtall]] wtall will resize the image to about 700px in width.

Embed Adjustments

Embed Adjustments use the same parameters as the images for resizing it and moving it (except for c).

Example Description
![[Embed Page|no-lk]] Hide the link
![[Embed Page|lk-l]] Move link to the left
![[Embed Page|lk-clear]] Make background of the link transparent
![[Embed Page|no-m]] Will remove margins and padding

Heading & Titles

Example Description
![[Embed Page|no-title]] Hide the title of the embedded page
![[Embed Page|no-h]] Hide all headers in the embedded page
![[Embed Page|no-h1]] Hide all header 1s in the embedded page
![[Embed Page|no-h2]] Hide all header 2s in the embedded page
![[Embed Page|no-h3]] Hide all header 3s in the embedded page
![[Embed Page|no-h4]] Hide all header 4s in the embedded page
![[Embed Page|no-h5]] Hide all header 5s in the embedded page
![[Embed Page|no-h6]] Hide all header 6s in the embedded page

Alternate Themes

All Alternate Themes are available in 1 snippet as well instead of many separate css snippets.

Use the Style Settings plugin to toggle one of them on.

SlRvb Gray

Link

Fonts used:

SlRvb Blue

Link

Fonts used:

D&D

Link

Fonts used:

School Days

Link

Fonts used:

Tangerine Dunes

Link

Drowned

Link

ITS Dark

Link

obsidian--its-theme's People

Contributors

ray-reyes avatar slrvb avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.