├── LICENSE ├── README.md └── images ├── banner-fade-1.png ├── banner-icon-1.png ├── banner-icon-2.png ├── banner-inline-title-1.png ├── banner-style-settings-1.png ├── banner-style-settings-2.png └── enable-banner.png /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 HandaArchitect 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Obsidian Banner Snippet 2 | 3 | This banner uses the CSS snippet approach as opposed to using a plugin that risks becoming incompatible with future versions of Obsidian. If this snippet does become incompatible, it could easily be configured to be compatible with the latest Obsidian version. 4 | 5 | You can refer to [Obsidian help](https://help.obsidian.md/Extending+Obsidian/CSS+snippets) website to learn how to add the banner snippet. 6 | 7 | The snippet can be enabled in the **CSS snippets** setting. 8 | 9 | Download the CSS file at the [releases](https://github.com/HandaArchitect/obsidian-banner-snippet/releases) page. 10 | 11 | ## Enable the Banner 12 | 13 | ![Enable Banner](https://github.com/HandaArchitect/obsidian-banner-snippet/blob/88a18587e1f800039b723db590bb8c30ab1eb21e/Images/enable-banner.png) 14 | 15 | Enter *banner* into the **cssclasses** frontmatter property. 16 | 17 | In the body, type in `![[image path/name|banner]]` like the example in the image. Adding the `|banner` alias indicates the attachment is the banner. 18 | 19 | ## Banner Icon 20 | 21 | ![Banner Icon](https://github.com/HandaArchitect/obsidian-banner-snippet/blob/88a18587e1f800039b723db590bb8c30ab1eb21e/Images/banner-icon-1.png) 22 | 23 | A banner icon can be added by making a callout. For example, `> [!banner-icon] `. Replace *\* with an emoji. 24 | 25 | The banner should now look like the following image. 26 | 27 | ![Banner Icon](https://github.com/HandaArchitect/obsidian-banner-snippet/blob/88a18587e1f800039b723db590bb8c30ab1eb21e/Images/banner-icon-2.png) 28 | 29 | ## Banner Inline Title 30 | 31 | You can position the **Inline Title** on top of the banner. However, ensure that you have the **Inline Title** setting enabled under **Appearance** in Obsidian settings. 32 | 33 | Once the setting has been enabled, enter *banner-inline-title* into the **cssclasses* property. The inline title will now look like the following image. 34 | 35 | ![Banner Inline Title](https://github.com/HandaArchitect/obsidian-banner-snippet/blob/88a18587e1f800039b723db590bb8c30ab1eb21e/Images/banner-inline-title-1.png) 36 | 37 | ## Banner Fade 38 | 39 | Your banners can be individually set to fade and only fade the banners that suit each of your note's style. 40 | 41 | Enter *banner-fade* into your **cssclasses* property to enable this feature. 42 | 43 | ![Banner Fade](https://github.com/HandaArchitect/obsidian-banner-snippet/blob/2f0b023b917668edde6ba4ba4d2919916fb66f45/images/banner-fade-1.png) 44 | 45 | ## Style Settings 46 | 47 | The banner snippet supports the [Style Settings](https://github.com/mgmeyers/obsidian-style-settings) plugin. 48 | 49 | For further adjusments, navigate to Obsidian settings and to **Style Settings** where you can adjust the position and color of a few of the banner's elements. 50 | 51 | ![Banner Style Settings](https://github.com/HandaArchitect/obsidian-banner-snippet/blob/88a18587e1f800039b723db590bb8c30ab1eb21e/Images/banner-style-settings-1.png) 52 | ![Banner Style Settings](https://github.com/HandaArchitect/obsidian-banner-snippet/blob/88a18587e1f800039b723db590bb8c30ab1eb21e/Images/banner-style-settings-2.png) 53 | -------------------------------------------------------------------------------- /images/banner-fade-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HandaArchitect/obsidian-banner-snippet/4d2cb8e3ed2ed5930dd11d29b25ff0b1732b3997/images/banner-fade-1.png -------------------------------------------------------------------------------- /images/banner-icon-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HandaArchitect/obsidian-banner-snippet/4d2cb8e3ed2ed5930dd11d29b25ff0b1732b3997/images/banner-icon-1.png -------------------------------------------------------------------------------- /images/banner-icon-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HandaArchitect/obsidian-banner-snippet/4d2cb8e3ed2ed5930dd11d29b25ff0b1732b3997/images/banner-icon-2.png -------------------------------------------------------------------------------- /images/banner-inline-title-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HandaArchitect/obsidian-banner-snippet/4d2cb8e3ed2ed5930dd11d29b25ff0b1732b3997/images/banner-inline-title-1.png -------------------------------------------------------------------------------- /images/banner-style-settings-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HandaArchitect/obsidian-banner-snippet/4d2cb8e3ed2ed5930dd11d29b25ff0b1732b3997/images/banner-style-settings-1.png -------------------------------------------------------------------------------- /images/banner-style-settings-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HandaArchitect/obsidian-banner-snippet/4d2cb8e3ed2ed5930dd11d29b25ff0b1732b3997/images/banner-style-settings-2.png -------------------------------------------------------------------------------- /images/enable-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HandaArchitect/obsidian-banner-snippet/4d2cb8e3ed2ed5930dd11d29b25ff0b1732b3997/images/enable-banner.png --------------------------------------------------------------------------------