├── Color and Icon └── colored-folders.css ├── Image relative ├── img-centering.css └── img-shadow-roundedBorder.css ├── README.md └── Templates └── Prose.md /Color and Icon/colored-folders.css: -------------------------------------------------------------------------------- 1 | /* Coloured Folders 2 | a CSS snippet by Lithou 3 | 4 | This will allow the colouring of the top level folders into sections that "drop down" when opened. 5 | This is currently set to be the same colour regardless of theme, but you can change that by copy/pasting the colors from the root section into light/dark theme then changing them according to preference. 6 | The colours are rainbow coloured and 16 in number by default. They are shades such that white/lightgrey text shows up the best. Some have a bit let contrast (the lighter blue and the yellow) but should still be visible. Again, change them however you would like. 7 | */ 8 | :root{ 9 | /* folder colours */ 10 | --Fold0: #d32f2fCC; 11 | --Fold1: #c2185bCC; 12 | --Fold2: #7b1fa2CC; 13 | --Fold3: #512da8CC; 14 | --Fold4: #303f9fCC; 15 | --Fold5: #1976d2CC; 16 | --Fold6: #0288d1CC; 17 | --Fold7: #0097a7CC; 18 | --Fold8: #00796bCC; 19 | --Fold9: #388e3cCC; 20 | --FoldA: #689f38CC; 21 | --FoldB: #afb42bCC; 22 | --FoldC: #f9ab25CC; 23 | --FoldD: #ff8f00CC; 24 | --FoldE: #ef6c00CC; 25 | --FoldF: #d84315CC; 26 | --FoldText: #0000000; 27 | /* ccccccFF; */ 28 | /* line styles for nesting indicators */ 29 | --nestlinesize1: double; 30 | --nestlinestyle1: 7px; 31 | --nestlinecolor1: #000; 32 | 33 | --nestlinesize2: solid; 34 | --nestlinestyle2: 3px; 35 | --nestlinecolor2: #000; 36 | 37 | --nestlinesize3: dotted; 38 | --nestlinestyle3: 2px; 39 | --nestlinecolor3: #000; 40 | } 41 | 42 | /* Set up explorer container margins */ 43 | .nav-files-container{margin: 0px 5px;} 44 | 45 | /* Remove collapse arrow from top level folders */ 46 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title>.nav-folder-collapse-indicator{display: none;} 47 | 48 | 49 | /* Top Level Folder Titles */ 50 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title{ 51 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 52 | font-size: 18px; 53 | color: var(--FoldText); 54 | padding-left: 3px; 55 | margin-top: 7px; /* space between top level sections */ 56 | border-radius: 20px 20px 0px 0px; 57 | } 58 | /* Rounded borders */ 59 | .nav-folder.mod-root>.nav-folder-children>.nav-folder.is-collapsed>.nav-folder-title{ 60 | border-radius: 20px; 61 | } 62 | 63 | /* General Nav Folder Children (this is the part that expands from each top level folder) */ 64 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children{ 65 | padding-left: 0px; 66 | border-top: var(--FoldText) 1px solid; 67 | border-radius: 0px 0px 20px 20px; 68 | padding-bottom: 12px; 69 | } 70 | 71 | .nav-file-title{ 72 | padding-left: 5px; 73 | } 74 | 75 | /* active file increase font size and removes normal highlight marker */ 76 | .nav-file-title.is-active{ 77 | background-color: #00000000; 78 | font-size: 105%;} 79 | /* Adds hemisphere marker to active file instead */ 80 | .nav-file-title.is-active::before{ 81 | content: ""; 82 | width: 16px; 83 | height: 16px; 84 | border-radius: 50%; 85 | background-color: var(--FoldText); 86 | position: absolute; 87 | left: -9px; 88 | margin-top: 4px;} 89 | 90 | 91 | /* 16 Top level Folders By Starting Digit (0-F) 92 | These are set for me by leading number/letter which also ensures they are in the correct order when sorted alphabetically 93 | You can change these to match your use case. 94 | */ 95 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="0"], 96 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="0"] + .nav-folder-children{ 97 | background-color: var(--Fold0);} 98 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="1"], 99 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="1"] + .nav-folder-children{ 100 | background-color: var(--Fold1);} 101 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="2"], 102 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="2"] + .nav-folder-children{ 103 | background-color: var(--Fold2);} 104 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="3"], 105 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="3"] + .nav-folder-children{ 106 | background-color: var(--Fold3);} 107 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="4"], 108 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="4"] + .nav-folder-children{ 109 | background-color: var(--Fold4);} 110 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="5"], 111 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="5"] + .nav-folder-children{ 112 | background-color: var(--Fold5);} 113 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="6"], 114 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="6"] + .nav-folder-children{ 115 | background-color: var(--Fold6);} 116 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="7"], 117 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="7"] + .nav-folder-children{ 118 | background-color: var(--Fold7);} 119 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="8"], 120 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="8"] + .nav-folder-children{ 121 | background-color: var(--Fold8);} 122 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="9"], 123 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="9"] + .nav-folder-children{ 124 | background-color: var(--Fold9);} 125 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="A"], 126 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="A"] + .nav-folder-children{ 127 | background-color: var(--FoldA);} 128 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="B"], 129 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="B"] + .nav-folder-children{ 130 | background-color: var(--FoldB);} 131 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="C"], 132 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="C"] + .nav-folder-children{ 133 | background-color: var(--FoldC);} 134 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="D"], 135 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="D"] + .nav-folder-children{ 136 | background-color: var(--FoldD);} 137 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="E"], 138 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="E"] + .nav-folder-children{ 139 | background-color: var(--FoldE);} 140 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="F"], 141 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="F"] + .nav-folder-children{ 142 | background-color: var(--FoldF);} 143 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="I"], 144 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="I"] + .nav-folder-children{ 145 | background-color: var(--FoldF);} 146 | 147 | /* Scrollbars eliminated */ 148 | ::-webkit-scrollbar{ 149 | width: 0px; 150 | height: 0px; 151 | } 152 | 153 | /* Relationship lines for 2nd, 3rd, and 4th level folders */ 154 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-file{ 155 | border-left: var(--nestlinestyle1) var(--nestlinesize1) var(--nestlinecolor1); 156 | } 157 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder{ 158 | border-left: var(--nestlinestyle1) var(--nestlinesize1) var(--nestlinecolor1); 159 | } 160 | 161 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-file{ 162 | border-left: var(--nestlinestyle2) var(--nestlinesize2) var(--nestlinecolor2);} 163 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder{ 164 | border-left: var(--nestlinestyle2) var(--nestlinesize2) var(--nestlinecolor2); 165 | } 166 | 167 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-file{ 168 | border-left: var(--nestlinestyle3) var(--nestlinesize3) var(--nestlinecolor3); 169 | } 170 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder>.nav-folder-children>.nav-folder{ 171 | border-left: var(--nestlinestyle3) var(--nestlinesize3) var(--nestlinecolor3); 172 | } 173 | -------------------------------------------------------------------------------- /Image relative/img-centering.css: -------------------------------------------------------------------------------- 1 | img 2 | { 3 | margin-left: auto; 4 | margin-right:auto; /*以上两行代码可以让图片居中*/ 5 | display: block; 6 | } 7 | -------------------------------------------------------------------------------- /Image relative/img-shadow-roundedBorder.css: -------------------------------------------------------------------------------- 1 | .markdown-preview-view img { 2 | max-width: 100%; 3 | outline: none; 4 | -webkit-filter: drop-shadow(10px 10px 10px rgba(8, 8, 8, 0.5));/*阴影效果*/ 5 | background-clip: content-box,padding-box; 6 | border-radius: 20px 20px 20px;/*圆角矩形 左上角：20px；右上角和左下角：10px；右下角：40px*/ 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Collection-Obsidian-Snippets 2 | This is a document collecting or different `Obsidian` snippets, how to write, how to use and how to expand 3 | 4 | ## How to use the Snippets? 5 | 6 | - Find your `obsidian vault` directory 7 | - Find `YOUR OBSIDIAN VAULT/.obsidian/` folder 8 | - Find `YOUR OBSIDIAN VAULT/.obsidian/snippets/` folder 9 | - Put the `css` files there 10 | - Open obsidian app 11 | - Enter `Settings` 12 | - In the left bar, choose `Appearance` 13 | - You may turn on your snippets in css-snippets 14 | 15 | ## Color and Icon 16 | 17 | Here we have a sequence of snippets for coloring, labeling and make icons. Any way, they help you to mark up differences and organzie your vaults. 18 | 19 | ### colored-folders.css 20 | 21 | Here is the discussion over coloring the navigation bar: https://forum.obsidian.md/t/adding-color-to-obsidian-a-rainbow-of-possibility/12805/11 22 | 23 | - The `css code` is here: https://github.com/ZizhengYang/Collection-Obsidian-Snippets/blob/main/Color%20and%20Icon/colored-folders.css 24 | - Original github.com repository: I didn't found 25 | - Contributor: @Lithou: Colored Folders.css; [the forum](https://forum.obsidian.md/t/adding-color-to-obsidian-a-rainbow-of-possibility/12805/11 26 | ) 27 | 28 | ![](https://forum.obsidian.md/uploads/default/original/2X/a/af9ba0bf2fed2bf7299659a227424d4235aacf11.png) 29 | 30 | ```css 31 | 32 | 33 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="YOUR-FOLDER-STARTING-LETTERS"], 34 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="YOUR-FOLDER-STARTING-LETTERS"] + .nav-folder-children{ 35 | background-color: var(--FoldF);} 36 | 37 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="YOUR-FOLDER-NAME"], 38 | .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title[data-path^="YOUR-FOLDER-NAME"] + .nav-folder-children{ 39 | background-color: var(--FoldF);} 40 | ``` 41 | ## Image relative 42 | 43 | ### img-centering.css 44 | 45 | - The `css code` is here: https://github.com/ZizhengYang/Collection-Obsidian-Snippets/blob/main/Image%20relative/img-centering.css 46 | - Original github.com repository: Doesn't exists 47 | - Contributor: @猫老大的小站台; [the blog](https://publish.obsidian.md/maolaoda/%E5%AD%A6%E4%B9%A0/%E7%AC%94%E8%AE%B0%E8%BD%AF%E4%BB%B6/Obsidian%E9%85%8D%E7%BD%AE) 48 | 49 | ![screen shot from my notes](https://cdn.mathpix.com/snip/images/SLO9HUKRy8OJg3v87qyXyM9L22aoespys8auXczTc2A.original.fullsize.png) 50 | 51 | ```css 52 | very simple ~ just look up the code 53 | ``` 54 | 55 | ### img-shadow-roundedBorder.css 56 | 57 | - The `css code` is here: https://github.com/ZizhengYang/Collection-Obsidian-Snippets/blob/main/Image%20relative/img-shadow-roundedBorder.css 58 | - Original github.com repository: Doesn't exists 59 | - Contributor: @猫老大的小站台; [the blog](https://publish.obsidian.md/maolaoda/%E5%AD%A6%E4%B9%A0/%E7%AC%94%E8%AE%B0%E8%BD%AF%E4%BB%B6/Obsidian%E9%85%8D%E7%BD%AE) 60 | 61 | ![screen shot from my notes](https://cdn.mathpix.com/snip/images/SsffNGNpN0DMq5Sm9z8SupYnXR6Uu4CL6x9HLBkp3TA.original.fullsize.png) 62 | 63 | ```css 64 | .markdown-preview-view img { 65 | max-width: 100%; 66 | outline: none; 67 | -webkit-filter: drop-shadow(10px 10px 10px rgba(8, 8, 8, 0.5)); /* the setting for the shadow effect */ 68 | background-clip: content-box,padding-box; 69 | border-radius: 20px 20px 20px; /* the setting for the border rounding */ 70 | } 71 | ``` 72 | 73 | ## Starting of the templates section: 74 | 75 | - https://github.com/ZizhengYang/Collection-Obsidian-Templates-Snippets/blob/main/Templates/Prose.md: A template to write daily proses 76 | -------------------------------------------------------------------------------- /Templates/Prose.md: -------------------------------------------------------------------------------- 1 | 2 | --- 3 | creation date: <% tp.file.creation_date("dddd Do MMMM-YYYY-HH:mm:ss") %> 4 | modification date: <% tp.file.last_modified_date("dddd Do MMMM-YYYY-HH:mm:ss") %> 5 | tags: #Prose 6 | --- 7 | 8 | <% tp.web.random_picture("1920x1080", tp.file.title) %> 9 | 10 | ## Section 1 11 | 12 | <% tp.web.daily_quote() %> 13 | --------------------------------------------------------------------------------