> [!Metadata|i-at] > [[ITS Theme]] # Callout Adjustments > Add new callout styling and adjustments options! 📥 [Get Callout Adjustments Snippet](https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/Snippets/S%20-%20Callouts.css) > [!caution] Do not use snippet version with the ITS Theme installed --- > [!example|clean] Table Of Contents > - [[#Syntax]] > - [[#Types]] > - [[#Adjustments]] > - [[#Sizing]] > - [[#Colors]] > - [[#Positions]] # Syntax ```markdown > [!callout|attribute attribute] Open Callout with Attributes > [!callout|attribute attribute]- Collapsed Callout with Attributes > [!callout|attribute attribute]+ Open Collapsible Callout with Attributes ``` ``` > [!callout-type|adjustment adjustment2] > [!kanban|n-t] > [!kanban|no-title txt-c] > [!caption|left] ``` # Types | Type | Description | | --- | --- | | [[Callout - Infoboxes\|Infoboxes]] | Wikipedia-like infoboxes | | [[Callout - Captions\|Captions]] | Displays text around image in the style of a caption | | [[Callout - Kanban\|Kanban]] | Displays a (functionally limited) kanban board | | [[Callout - Grid\|Grid]] | Display images in a grid/masonry style | | [[Callout - Recite\|Recite]] | A D&D styled popout | | [[Callout - Metadata\|Metadata]] | Styled callout that colors \*\*bold\*\* words, table headers, and inline dataview keys blue | | [[Callout - Cards\|Cards]] | Style images and dataview tables like notion's gallery view | | [[Callout - Columns\|Columns]] | Style inner callouts as columns | | [[Callout - Timeline\|Timeline]] | Style callout as a vertical Timeline | | [[Callout - Asides\|Asides]] | Add asides to the side of notes | | [[Callout - Kith\|Kith]] | Callouts for person/person relationship types | | [[Callout - Table\|Table]] | Prevent table from wrapping | | [[Callout - Quote\|Quote]] | Fancier quote styling | | [[Callout - Checks\|Checks]] | | | [[Callout - Statblocks\|Statblocks]] | | %% > [!info|subtitle]- [[Callout - Infoboxes|Infoboxes]] _Wikipedia-like infoboxes_ > ![[Callout - Infoboxes|clean no-t no-it no-h]] > [!info|subtitle]- [[Callout - Grid|Grid]] _Display images in a grid/masonry style_ > ![[Callout - Grid|clean no-h no-t no-it]] > [!info|subtitle]- [[Callout - Cards|Cards]] _Style images and dataview tables like notion's gallery view_ > ![[Callout - Cards|clean no-t no-it no-h nmg]] > [!info|subtitle]- [[Callout - Columns|Column]] _Style inner callouts as columns_ > ![[Callout - Columns|no-t no-it no-h]] > [!info|subtitle]- [[Callout - Captions|Captions]] _Displays text around image in the style of a caption_ > ![[Callout - Captions|clean no-t no-it no-h]] > [!info|subtitle]- [[Callout - Metadata|Metadata]] _Styled callout that colors \*\*bold\*\* words, table headers, and inline dataview keys blue_ > [[Callout - Metadata|clean no-t no-it no-h]] > [!info|subtitle]- [[Callout - Kanban|Kanban]] _Displays a (functionally limited) kanban board_ > ![[Callout - Kanban|clean no-t no-it no-h]] > [!info|subtitle]- [[Callout - Timeline|Timeline]] _Style callout as a vertical Timeline_ > ![[Callout - Timeline|clean no-t no-it no-h]] > [!info|subtitle]- [[Callout - Asides|Asides]] _Add asides to the side of notes_ > ![[Callout - Asides|clean no-t no-it no-h]] > [!info|subtitle]- [[Callout - Kith|Kith]] _Callouts for person/person relationship types_ > ![[Callout - Kith|clean no-t no-it no-h]] %% # Adjustments Callout Title Adjustments | Abbr. | Full Title | Description | | --- | --- | --- | | `no-t` | `no-title` | Hides callout title | | `s-t` | `show-title` | Show callout title | | `ttl-c` | `title-center` | Center callout title text | | `no-i` | `no-icon` | Hide callout icon | | `subt` | `subtitle` | Style words in italic (`* *`, `_ _`) as subtitles | Table Adjustments | Abbr. | Full Title | Description | | --- | --- | --- | | `n-th` | `no-table-header` | Hides table header in callouts | | `t-w` | `table-wide` | Widen table to edges of callout | | `tbl-cln` | `table-clean` | Remove most table styling: lines, background colors | | | `table-cell-top` | Move text alignment to top of table cell | Text | Abbr. | Full Title | Description | | --- | --- | --- | | `txt-c` | `text-center` | Center callout text | | `txt-r` | `txt-right` | Right align callout text | | `txt-l` | `txt-left` | Left align callout text | | `txt-s` | `text-small` | Shrink callout text size | Styling | Abbr. | Full Title | Description | | --- | --- | --- | | | `embed` | Remove callout padding to expand embed | | `nmg` | `no-margin` | Remove callout margins | | | `clean` | Remove callout Styling | | | `collapse` | Remove all padding and margins for ultra compact look | | `nbrd` | `no-border` | Borderless callout | | | `clear` | Move any other floating elements near to under this callout | | | `dim` | Dim collapsible (`+`/`-`) callouts unless hovered and opened | | `dim-hvr` | | Dim callout unless hovered | Alternate Styling | Abbr. | Full Title | Description | | --- | --- | --- | | `alt-co` | | Alternate Callout styling for individual callouts | | `alt-line` | | Minimalistic callout style with only title underlined | | `co-o` | `callout-original` | Revert to pre-Obsidian v0.16 callout styling | | `co-block` | `callout-block` | Alternate callout mixing pre & post v0.16 styling | | `co-si` | `callout-side-icon` | Move icon to side of callouts <br>(callout titles won't show) | ## Sizing Sizing sames are the as the [[Image Adjustments#Sizing|Image Adjustment Sizing]] names | Attributes | Callout Width `%` | Callout Width `px` | | --- |:---:|:---:| | `wmicro` | 10% | 50px | | `wtiny` | 20% | 100px | | `wsmall` | 30% | 200px | | `ws-med` | 40% | 300px | | `wm-sm` | 50% | 400px | | `wmed` | 60% | 500px | | `wm-tl` | 80% | 600px | | `wtall` | 95% | 700px | | `wfull` | 100% | | | `wfit` | Auto | Auto | > [!Note] Add `|static` to use fixed sizing with pixels > Callout sizing uses percentages by default, `|static` switches to pixels to use static sizing. ### Callout Content Padding | Attribute | Abbr | Callout Padding Sizing | | --- | --- |:---:| | `content-padding-small` | `c-p-sm` | 6px | | `content-padding-medium` | `c-p-med` | 12px | | `content-padding-large` | `c-p-lg` | 24px | ## Positions > [!warning] Will not wrap text around in live preview or float on mobile | Attribute | Description | | --- | --- | | `left` | Float callout to the left | | `right` | Float callout to the right | ## Colors ![[Callout - Colors|no-t no-it no-h]]