Banner Snippet

> **This project has now been discontinued**. The CSS is still available and can be easily adjusted assuming you know the basics of CSS.
> Feel free to make a fork of this project.

# Obsidian Banner Snippet

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.

You can refer to [Obsidian help](https://help.obsidian.md/Extending+Obsidian/CSS+snippets) website to learn how to add the banner snippet.

The snippet can be enabled in the **CSS snippets** setting.

Download the CSS file at the [releases](https://github.com/HandaArchitect/obsidian-banner-snippet/releases) page.

## Enable the Banner

![Enable Banner](https://github.com/HandaArchitect/obsidian-banner-snippet/blob/88a18587e1f800039b723db590bb8c30ab1eb21e/Images/enable-banner.png)

Enter *banner* into the **cssclasses** frontmatter property.

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.

## Banner Icon

![Banner Icon](https://github.com/HandaArchitect/obsidian-banner-snippet/blob/88a18587e1f800039b723db590bb8c30ab1eb21e/Images/banner-icon-1.png)

A banner icon can be added by making a callout. For example, `> [!banner-icon] <icon>`. Replace *\<icon\>* with an emoji.

The banner should now look like the following image.

![Banner Icon](https://github.com/HandaArchitect/obsidian-banner-snippet/blob/88a18587e1f800039b723db590bb8c30ab1eb21e/Images/banner-icon-2.png)

## Banner Inline Title

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.

Once the setting has been enabled, enter *banner-inline-title* into the **cssclasses* property. The inline title will now look like the following image.

![Banner Inline Title](https://github.com/HandaArchitect/obsidian-banner-snippet/blob/88a18587e1f800039b723db590bb8c30ab1eb21e/Images/banner-inline-title-1.png)

## Banner Fade

Your banners can be individually set to fade and only fade the banners that suit each of your note's style.

Enter *banner-fade* into your **cssclasses* property to enable this feature.

![Banner Fade](https://github.com/HandaArchitect/obsidian-banner-snippet/blob/2f0b023b917668edde6ba4ba4d2919916fb66f45/images/banner-fade-1.png)

## Style Settings

The banner snippet supports the [Style Settings](https://github.com/mgmeyers/obsidian-style-settings) plugin.

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.

![Banner Style Settings](https://github.com/HandaArchitect/obsidian-banner-snippet/blob/88a18587e1f800039b723db590bb8c30ab1eb21e/Images/banner-style-settings-1.png)
![Banner Style Settings](https://github.com/HandaArchitect/obsidian-banner-snippet/blob/88a18587e1f800039b723db590bb8c30ab1eb21e/Images/banner-style-settings-2.png)