> [!column|flex no-title]
>> [!menu-dark-red|ttl-c] [[Obsidian TTRPG Tutorials]] / [[Plugin Tutorials]] / [[Banners]]
> [!column|4 no-title]
>> [!menu-green-1|ttl-c] [[Getting Started]]
>
>> [!menu-green-2|ttl-c] [[Plugin Tutorials]]
>
>> [!menu-green-3|ttl-c] [[Community Supported Games]]
>
>> [!menu-green-4|ttl-c] [[Obsidian TTRPG Tutorials/Templates/Templates\|Templates]]
> [!column|3 no-title]
>> [!patreon|ttl-c] [Patreon](https://www.patreon.com/JPlunkett) ([Starter Vault](https://www.patreon.com/posts/obsidian-patreon-96801399))
>
>> [!discord|ttl-c] [Obsidian TTRPG Community Discord](https://discord.gg/CdM9UCJdwU)
>
>> [!discord|ttl-c] [Obsidian Official Discord](https://discord.gg/8AF29UBUCa)
# Banners
![[Pasted image 20230729174441.png|banner]]
Banners can be used to really make your notes pop!
## ITS Theme Banner Support
The ITS Theme offers simple and effective Banner support. You can enable it by using the Theme or you can install the \*.css on it's own which allows you to add the functionality while using a different theme.
- See this page for details: https://publish.obsidian.md/slrvb-docs/ITS+Theme/Image+Adjustments
- Download the Image Adjustment Snippet from the page above and enable it per [[How To - Install Custom CSS]].
To add a banner to a page simply add this to the top of a note:
````
![[imagename.png|banner]]
````
You can adjust the positioning of the Banner image by using the [Inner Image Positions](https://publish.obsidian.md/slrvb-docs/ITS+Theme/Image+Adjustments) offered by the ITS Image Adjustments snippet. See the link above for the available options.
Here are some examples.
````
![[020-tod-14-01.png|banner p+cc]]
````
![[020-tod-14-01.png|banner p+cc]]
````
![[020-tod-14-01.png|banner p+tc]]
````
![[020-tod-14-01.png|banner p+tc]]
## Banners Plugin (Not Recommended)
There are multiple ways to add Banners to your notes. The most frequently used method currently is with the [Banners](obsidian://show-plugin?id=obsidian-banners) plugin. However that plugin at time of writing has not been updated in over a year. I have concerns that this plugin no longer has healthy development and recommend people look for other options.
> [!danger]+ Known Issue
> There is a known issue coming with a future update to Obsidian (Front Matter upgrade to Properties).
> If you still wish to use Banners then you should save the following code into a new \*.css file per: [[How To - Install Custom CSS]]
> This will fix it so that the Banner does not cover the new Properties UI. [See Video](https://youtu.be/2nFBteVz8Lg) for details on this issue.
>
> ````
> .obsidian-banner { position: unset; }
> .obsidian-banner-wrapper { margin-top: 0; }
> ````