Custom callouts
Custom callouts for Obsidian inspired by Flexoki theme!
Installation
- Copy this code and create
file.css. - Go to Obsidian → Settings → Appearance → CSS snippets.
- Open snippets folder and paste the file there.
Pink
> [!pink]
Accessibility
> [!accessibility]
Purple
> [!purple]
Book
> [!book]
Bot
> [!bot]
Calculator
> [!calculator]
Camera
> [!camera]
Clipboard
> [!clipboard]
Clock
> [!clock]
Film
> [!film]
Gamepad
> [!gamepad]
Headphones
> [!headphones]
Hourglass
> [!hourglass]
Keyboard
> [!keyboard]
Laptop
> [!laptop]
Mic
> [!mic]
Monitor
> [!monitor]
Mouse
> [!mouse]
Settings
> [!settings]
Smartphone
> [!smartphone]
Tablet
> [!tablet]
Tv
> [!tv]
Video
> [!video]
Blue
> [!blue]
Bluetooth
> [!bluetooth]
Bookmark
> [!bookmark]
Calendar
> [!calendar]
Contact
> [!contact]
Link
> [!link]
Mail
> [!mail]
Printer
> [!printer]
Weather
- [!weather]
Winter
> [!winter]
User
> [!user]
Cyan
> [!cyan]
Archive
> [!archive]
At
> [!at]
Compass
> [!compass]
Connect
> [!connect]
Download
> [!download]
File
> [!file]
Folder
> [!folder]
Globe
> [!globe]
Image
> [!image]
Infinity
> [!infinity]
Languages
> [!languages]
Music
> [!music]
Package
> [!package]
Save
> [!save]
Search
> [!search]
Share
> [!share]
Tag
> [!tag]
Trash
> [!trash]
Upload
> [!upload]
Wallet
> [!wallet]
Green
> [!green]
Banknote
> [!banknote]
Battery
> [!battery]
Home
> [!home]
Network
> [!network]
Phone
> [!phone]
Spring
> [!spring]
Yellow
> [!yellow]
Inbox
> [!inbox]
Star
> [!star]
Summer
> [!summer]
Orange
> [!orange]
Alarm
> [!alarm]
Bell
> [!bell]
Fall
> [!fall]
Flag
> [!flag]
Rss
> [!rss]
Red
> [!red]
Delete
> [!delete]
Fuel
> [!fuel]
Heart
> [!heart]
Location
> [!location]
Pin
> [!pin]
Power
> [!power]
Shield
> [!shield]
Facebook
> [!facebook]
GitHub
> [!github]
Instagram
> [!instagram]
Linkedin
> [!linkedin]
Twitch
> [!twitch]
Twitter
> [!twitter]
YouTube
> [!youtube]
CSS code
.callout[data-callout="pink"] { --callout-color: 206, 93, 151; --callout-icon: none; }
.callout[data-callout="accessibility"] { --callout-color: 206, 93, 151; --callout-icon: accessibility; }
.callout[data-callout="purple"] { --callout-color: 139, 126, 200; --callout-icon: none; }
.callout[data-callout="book"] { --callout-color: 139, 126, 200; --callout-icon: book; }
.callout[data-callout="bot"] { --callout-color: 139, 126, 200; --callout-icon: bot; }
.callout[data-callout="calculator"] { --callout-color: 139, 126, 200; --callout-icon: calculator; }
.callout[data-callout="calendar"] { --callout-color: 139, 126, 200; --callout-icon: calendar; }
.callout[data-callout="camera"] { --callout-color: 139, 126, 200; --callout-icon: camera; }
.callout[data-callout="clipboard"] { --callout-color: 139, 126, 200; --callout-icon: clipboard; }
.callout[data-callout="clock"] { --callout-color: 139, 126, 200; --callout-icon: clock; }
.callout[data-callout="film"] { --callout-color: 139, 126, 200; --callout-icon: film; }
.callout[data-callout="gamepad"] { --callout-color: 139, 126, 200; --callout-icon: gamepad-2; }
.callout[data-callout="headphones"] { --callout-color: 139, 126, 200; --callout-icon: headphones; }
.callout[data-callout="hourglass"] { --callout-color: 139, 126, 200; --callout-icon: hourglass; }
.callout[data-callout="keyboard"] { --callout-color: 139, 126, 200; --callout-icon: keyboard; }
.callout[data-callout="laptop"] { --callout-color: 139, 126, 200; --callout-icon: laptop; }
.callout[data-callout="mic"] { --callout-color: 139, 126, 200; --callout-icon: mic; }
.callout[data-callout="monitor"] { --callout-color: 139, 126, 200; --callout-icon: monitor; }
.callout[data-callout="mouse"] { --callout-color: 139, 126, 200; --callout-icon: mouse; }
.callout[data-callout="settings"] { --callout-color: 139, 126, 200; --callout-icon: settings; }
.callout[data-callout="smartphone"] { --callout-color: 139, 126, 200; --callout-icon: smartphone; }
.callout[data-callout="tablet"] { --callout-color: 139, 126, 200; --callout-icon: tablet; }
.callout[data-callout="tv"] { --callout-color: 139, 126, 200; --callout-icon: tv; }
.callout[data-callout="video"] { --callout-color: 139, 126, 200; --callout-icon: video; }
.callout[data-callout="blue"] { --callout-color: 67, 133, 190; --callout-icon: none; }
.callout[data-callout="bluetooth"] { --callout-color: 67, 133, 190; --callout-icon: bluetooth; }
.callout[data-callout="bookmark"] { --callout-color: 67, 133, 190; --callout-icon: bookmark; }
.callout[data-callout="contact"] { --callout-color: 67, 133, 190; --callout-icon: contact; }
.callout[data-callout="link"] { --callout-color: 67, 133, 190; --callout-icon: link; }
.callout[data-callout="mail"] { --callout-color: 67, 133, 190; --callout-icon: mail; }
.callout[data-callout="printer"] { --callout-color: 67, 133, 190; --callout-icon: printer; }
.callout[data-callout="winter"] { --callout-color: 67, 133, 190; --callout-icon: snowflake; }
.callout[data-callout="user"] { --callout-color: 67, 133, 190; --callout-icon: user; }
.callout[data-callout="cyan"] { --callout-color: 58, 169, 159; --callout-icon: none; }
.callout[data-callout="archive"] { --callout-color: 58, 169, 159; --callout-icon: archive; }
.callout[data-callout="at"] { --callout-color: 58, 169, 159; --callout-icon: at-sign; }
.callout[data-callout="compass"] { --callout-color: 58, 169, 159; --callout-icon: compass; }
.callout[data-callout="connect"] { --callout-color: 58, 169, 159; --callout-icon: share-2; }
.callout[data-callout="download"] { --callout-color: 58, 169, 159; --callout-icon: download; }
.callout[data-callout="file"] { --callout-color: 58, 169, 159; --callout-icon: file; }
.callout[data-callout="folder"] { --callout-color: 58, 169, 159; --callout-icon: folder; }
.callout[data-callout="globe"] { --callout-color: 58, 169, 159; --callout-icon: globe; }
.callout[data-callout="image"] { --callout-color: 58, 169, 159; --callout-icon: image; }
.callout[data-callout="infinity"] { --callout-color: 58, 169, 159; --callout-icon: infinity; }
.callout[data-callout="languages"] { --callout-color: 58, 169, 159; --callout-icon: languages; }
.callout[data-callout="music"] { --callout-color: 58, 169, 159; --callout-icon: music; }
.callout[data-callout="package"] { --callout-color: 58, 169, 159; --callout-icon: package; }
.callout[data-callout="save"] { --callout-color: 58, 169, 159; --callout-icon: save; }
.callout[data-callout="search"] { --callout-color: 58, 169, 159; --callout-icon: search; }
.callout[data-callout="share"] { --callout-color: 58, 169, 159; --callout-icon: share; }
.callout[data-callout="tag"] { --callout-color: 58, 169, 159; --callout-icon: tag; }
.callout[data-callout="trash"] { --callout-color: 58, 169, 159; --callout-icon: trash; }
.callout[data-callout="upload"] { --callout-color: 58, 169, 159; --callout-icon: upload; }
.callout[data-callout="wallet"] { --callout-color: 58, 169, 159; --callout-icon: wallet; }
.callout[data-callout="green"] { --callout-color: 135, 154, 57; --callout-icon: none; }
.callout[data-callout="banknote"] { --callout-color: 135, 154, 57; --callout-icon: banknote; }
.callout[data-callout="battery"] { --callout-color: 135, 154, 57; --callout-icon: battery; }
.callout[data-callout="home"] { --callout-color: 135, 154, 57; --callout-icon: home; }
.callout[data-callout="network"] { --callout-color: 135, 154, 57; --callout-icon: network; }
.callout[data-callout="phone"] { --callout-color: 135, 154, 57; --callout-icon: phone; }
.callout[data-callout="spring"] { --callout-color: 135, 154, 57; --callout-icon: flower-2; }
.callout[data-callout="yellow"] { --callout-color: 208, 162, 21; --callout-icon: none; }
.callout[data-callout="inbox"] { --callout-color: 208, 162, 21; --callout-icon: inbox; }
.callout[data-callout="star"] { --callout-color: 208, 162, 21; --callout-icon: star; }
.callout[data-callout="summer"] { --callout-color: 208, 162, 21; --callout-icon: sun; }
.callout[data-callout="orange"] { --callout-color: 218, 112, 44; --callout-icon: none; }
.callout[data-callout="alarm"] { --callout-color: 218, 112, 44; --callout-icon: alarm-clock; }
.callout[data-callout="bell"] { --callout-color: 218, 112, 44; --callout-icon: bell; }
.callout[data-callout="fall"] { --callout-color: 218, 112, 44; --callout-icon: leaf; }
.callout[data-callout="flag"] { --callout-color: 218, 112, 44; --callout-icon: flag; }
.callout[data-callout="rss"] { --callout-color: 218, 112, 44; --callout-icon: rss; }
.callout[data-callout="red"] { --callout-color: 209, 77, 65; --callout-icon: none; }
.callout[data-callout="delete"] { --callout-color: 209, 77, 65; --callout-icon: delete; }
.callout[data-callout="fuel"] { --callout-color: 209, 77, 65; --callout-icon: fuel; }
.callout[data-callout="heart"] { --callout-color: 209, 77, 65; --callout-icon: heart; }
.callout[data-callout="location"] { --callout-color: 209, 77, 65; --callout-icon: map-pin; }
.callout[data-callout="pin"] { --callout-color: 209, 77, 65; --callout-icon: pin; }
.callout[data-callout="power"] { --callout-color: 209, 77, 65; --callout-icon: power; }
.callout[data-callout="shield"] { --callout-color: 209, 77, 65; --callout-icon: shield; }
.callout[data-callout="discord"] { --callout-color: 88, 101, 242; --callout-icon: discord; }
.callout[data-callout="facebook"] { --callout-color: 24, 119, 242; --callout-icon: facebook; }
.callout[data-callout="github"] { --callout-color: 64, 120, 192; --callout-icon: github; }
.callout[data-callout="instagram"] { --callout-color: 255, 0, 105; --callout-icon: instagram; }
.callout[data-callout="linkedin"] { --callout-color: 10, 102, 194; --callout-icon: linkedin; }
.callout[data-callout="twitch"] { --callout-color: 145, 70, 255; --callout-icon: twitch; }
.callout[data-callout="twitter"] { --callout-color: 29, 161, 242; --callout-icon: twitter; }
.callout[data-callout="youtube"] { --callout-color: 255, 0, 0; --callout-icon: youtube; }