Testing 6 Colored Chat Bubbles & Blockquotes

Why not have a colorful talk, huh? > [!user] 🤖 > `user` — Muted Crimson, right-aligned. > > This is the default bubble. > [!user2] 🤖 > `user2` — Burnt Amber, left-aligned. > > This is the second bubble. > [!user3] 🤖 > `user3` — Amethyst, right-aligned. > > This is the third bubble. > [!user4] 🤖 > `user4` — Deep Steel Blue, left-aligned. > > This is the fourth bubble. > [!user5] 🤖 > `user5` — Slate Gray, right-aligned. > > This is the fifth bubble. > [!user6] 🤖 > `user6` — Muted Forest Green, left-aligned. > > This is the proposed sixth bubble. ## The Underlying Code Save the following code as `[vault]\.obsidian\snippets\user-callout.css` for local Obsidian, then enable it under **Settings ➡️ Appearance ➡️ CSS snippets**. For Obsidian Publish, append the exact same code to the vault’s `publish.css` file (ideally at the bottom) and publish the updated stylesheet. Credit for the coding on this page belongs to `ChatGPT 5.6 Sol` and `Gemini 3.1 Pro`. ``` /* ========================================================= SIX UNIFIED ALTERNATING CHAT-BUBBLE CALLOUTS user, user3, user5: right-aligned user2, user4, user6: left-aligned All six use the same geometry, title spacing, and a hard-wired message-square icon. Only color and alignment differ. ========================================================= */ /* ---------- Shared geometry and appearance ---------- */ .callout:is( [data-callout="user"], [data-callout="user2"], [data-callout="user3"], [data-callout="user4"], [data-callout="user5"], [data-callout="user6"] ) { width: 85% !important; max-width: 85% !important; box-sizing: border-box !important; background-color: rgba(var(--callout-color), 0.15) !important; border: 1px solid rgba(var(--callout-color), 0.30) !important; border-radius: 8px !important; padding: 16px !important; text-align: left !important; overflow-wrap: anywhere; } /* ---------- Individual colors ---------- */ .callout[data-callout="user"] { --callout-color: 180, 45, 65 !important; /* Muted Crimson */ } .callout[data-callout="user2"] { --callout-color: 220, 110, 40 !important; /* Burnt Amber */ } .callout[data-callout="user3"] { --callout-color: 130, 85, 165 !important; /* Amethyst */ } .callout[data-callout="user4"] { --callout-color: 70, 100, 160 !important; /* Deep Steel Blue */ } .callout[data-callout="user5"] { --callout-color: 120, 130, 145 !important; /* Slate Gray */ } .callout[data-callout="user6"] { --callout-color: 65, 125, 75 !important; /* Muted Forest Green */ } /* ---------- Hard-wired uniform message icon ---------- */ /* Obsidian normally derives a custom-callout icon from --callout-icon. Some active themes/plugins can override that registration. We therefore hide the supplied SVG and draw the same message-square mask ourselves for all six callouts. */ .callout:is( [data-callout="user"], [data-callout="user2"], [data-callout="user3"], [data-callout="user4"], [data-callout="user5"], [data-callout="user6"] ) .callout-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; } /* Hide whatever pencil/message SVG another layer supplied. */ .callout:is( [data-callout="user"], [data-callout="user2"], [data-callout="user3"], [data-callout="user4"], [data-callout="user5"], [data-callout="user6"] ) .callout-icon > svg { display: none !important; } /* Draw one identical message-square icon in every bubble. */ .callout:is( [data-callout="user"], [data-callout="user2"], [data-callout="user3"], [data-callout="user4"], [data-callout="user5"], [data-callout="user6"] ) .callout-icon::before { content: "" !important; display: block !important; width: 18px !important; height: 18px !important; background-color: rgb(var(--callout-color)) !important; -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMSAxNWE0IDQgMCAwIDEtNCA0SDdsLTQgNFY3YTQgNCAwIDAgMSA0LTRoMTBhNCA0IDAgMCAxIDQgNHoiLz48L3N2Zz4=") !important; mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMSAxNWE0IDQgMCAwIDEtNCA0SDdsLTQgNFY3YTQgNCAwIDAgMSA0LTRoMTBhNCA0IDAgMCAxIDQgNHoiLz48L3N2Zz4=") !important; -webkit-mask-position: center !important; mask-position: center !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-size: contain !important; mask-size: contain !important; } /* ---------- Uniform title row and icon spacing ---------- */ .callout:is( [data-callout="user"], [data-callout="user2"], [data-callout="user3"], [data-callout="user4"], [data-callout="user5"], [data-callout="user6"] ) .callout-title { display: flex !important; flex-direction: row !important; align-items: center !important; column-gap: 8px !important; } /* Keep the speaker emoji beside the message icon in every theme. */ .callout:is( [data-callout="user"], [data-callout="user2"], [data-callout="user3"], [data-callout="user4"], [data-callout="user5"], [data-callout="user6"] ) .callout-title-inner { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; } /* ---------- Right-aligned bubbles ---------- */ .callout:is( [data-callout="user"], [data-callout="user3"], [data-callout="user5"] ) { margin-inline-start: auto !important; margin-inline-end: 0 !important; margin-left: auto !important; margin-right: 0 !important; border-right: 4px solid rgb(var(--callout-color)) !important; } .callout:is( [data-callout="user"], [data-callout="user3"], [data-callout="user5"] ) .callout-title { justify-content: flex-end !important; text-align: right !important; } /* ---------- Left-aligned bubbles ---------- */ .callout:is( [data-callout="user2"], [data-callout="user4"], [data-callout="user6"] ) { margin-inline-start: 0 !important; margin-inline-end: auto !important; margin-left: 0 !important; margin-right: auto !important; border-left: 4px solid rgb(var(--callout-color)) !important; } .callout:is( [data-callout="user2"], [data-callout="user4"], [data-callout="user6"] ) .callout-title { justify-content: flex-start !important; text-align: left !important; } /* ---------- Nested quotations ---------- */ .callout:is( [data-callout="user"], [data-callout="user2"], [data-callout="user3"], [data-callout="user4"], [data-callout="user5"], [data-callout="user6"] ) blockquote { border-left-color: rgb(var(--callout-color)) !important; } /* ---------- Extra specificity for local Live Preview ---------- */ .markdown-source-view.mod-cm6 .callout:is( [data-callout="user"], [data-callout="user3"], [data-callout="user5"] ) { margin-inline-start: auto !important; margin-inline-end: 0 !important; margin-left: auto !important; margin-right: 0 !important; } .markdown-source-view.mod-cm6 .callout:is( [data-callout="user2"], [data-callout="user4"], [data-callout="user6"] ) { margin-inline-start: 0 !important; margin-inline-end: auto !important; margin-left: 0 !important; margin-right: auto !important; } ``` ## Regular Quotations (Blockquotes) For regular **quoted passages (blockquotes)**, as opposed to the *chat bubbles*, I use the following format on this site: > I have no jobs. That was a [Nero Wolfe](https://aboq.org/Rex_Stout) quotation. Whenever a quotation requires _attribution_, I input the following before the attribution on the final line: ``` ``` I set up a template in the Templater plugin that inserts this code for me via a keyboard shortcut in desktop Obsidian, and via a button press on Obsidian’s mobile toolbar. The result looks like this (the italics are specified manually): > Believe nothing, no matter where you read it, or who said it – even if I have said it – unless it agrees with your own reason and your own common sense. > > *Buddha* Whenever a longer attribution is needed, it can look like this: > Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. This requires not that the writer make all his sentences short, or that he avoid all detail and treat his subjects only in outline, but that he make every word tell. > > William Strunk, *[The Elements of Style](https://archive.org/details/cu31924014450716/page/24/mode/2up)* (1918/1920), ch. III Here is a quotation embedded inside a chat bubble: > [!user] 🐺 > Here’s a nice quotation by Chekhov: > > > В человеке должно быть все прекрасно: и лицо, и одежда, и душа, и мысли... > > Some pretty high standards, huh? Below is a regular quotation quoting other quotations: > It’s so nice to realize that even Immanuel Kant was an avid user of Obsidian like the rest of us! Here is a famous quotation of his: > >> Es iſt ſchlimm: daß nur allererſt, nachdem wir lange Zeit, nach Anweiſung einer in uns verſteckt liegenden Idee, rhapſodiſtiſch viele dahin ſich beziehende Erkentniſſe, als Bauzeug, geſammelt, ia gar lange Zeiten hindurch ſie techniſch zuſammengeſezt haben, es uns denn allererſt moͤglich iſt, die Idee in hellerem Lichte zu erblicken und ein Ganzes nach den Zwecken der Vernunft architectoniſch zu entwerfen. > > Immanuel Kant, [_Critik der reinen Vernunft_](https://www.deutschestextarchiv.de/book/view/kant_rvernunft_1781?p=864) (1781), II.3 (S. 834f) > > Or, if you prefer a translated English version: > >> Not until we have for a long time unsystematically collected observations to serve as building materials, following the guidance of an idea concealed in our minds, and indeed only after we have spent much time in the technical disposition of these materials, do we first become capable of viewing the idea in a clearer light, and of outlining it architectonically as a whole. > > I’m sure Mr. Kant would agree that Obsidian makes that collection of observations so much easier, followed by their technical disposition. After all, he was among the first subscribers to Obsidian Sync.