CalloutX
approvedby br4in
An easy way to explore, visualise, and modify callout icons.
CalloutX: Callout Icons Explorer
CalloutX is an Obsidian plugin that allows you to view, manage, and customise callout icons in your vault. It provides an easy way to explore, visualise, and modify the callout icons defined in your custom CSS.
Features
- Display a modal with all custom callout icons defined in your
custom-callouts.cssfile - Add new custom callouts with specified names, colors, and icons
- Edit existing callouts to change their names, colors, or icons
- Delete custom callouts you no longer need
- Search functionality to easily find specific callouts
- Automatically import the
custom-callouts.cssfile from the plugin folder to your snippets folder if it doesn't exist - Works on desktop versions of Obsidian
Installation
- Open Obsidian Settings
- Navigate to Community Plugins and disable Safe Mode
- Click on Browse and search for "CalloutX"
- Install the plugin and enable it
Usage
After installation, you can access the plugin functionality through:
-
The command palette (Ctrl/Cmd + P)
- Search for "Show Callout Icons" to open a modal displaying all custom callout icons
-
The plugin settings tab in Obsidian settings
- Here you can add, edit, delete, and search for callouts
The modal and settings tab will show the icon preview along with its name for each custom callout defined in your CSS.
Custom Callouts CSS
The plugin reads custom callout definitions from a file named custom-callouts.css in your snippets folder. If this file doesn't exist, the plugin will attempt to import it from the plugin folder.
To define custom callouts, use the following format in your CSS:
.callout[data-callout="your-callout-name"] {
--callout-color: 65, 201, 108;
--callout-icon: icon-name;
}
Replace your-callout-name with the desired callout name and icon-name with the appropriate Lucide icon name.
Compatibility
CalloutX is designed to work with desktop versions of Obsidian. It may not function correctly on mobile devices.
Support
If you encounter any issues or have suggestions for improvements, please open an issue on the GitHub repository.
For plugin developers
Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.