10billionghosts: (smooches hero)
jay, novice human ([personal profile] 10billionghosts) wrote2025-09-21 01:16 pm
  • Add Memory
  • Share This Entry
Entry tags:

code: HEADERS - 8 comment-compatible headers for tls & announcements




More RP notions! This is a pack of simple comment-compatible headers for use in announcements and top levels. Wanted some options that would be legible regardless of dark or light mode viewing. Many of these include a collapsing element built in so that you can easily hide lengthier or spoiler-y content.

All live previews and the codes themselves are available in the comment section at the bottom of this post!

HOW TO USE:

❣️ These codes are mobile and comment compatible!

❣️ Because these codes are comment-first, they do not use lj-raw tags. This means they'll probably look off if you attempt to use them in the body of a post, rather than in the comments. You can wrap any actual code in lj-raw and /lj-raw tags to fix that, if you want.

❣️ Feel free to customize colors on any of these! You don't need to retain the default colors. You'll want to look for and change hex codes found after tags like color:, background:, border:, and drop-shadow:.

❣️ Need multiple headers? Just copy-paste the code multiple times!

❣️ Because their code is a little more complex, headers 1 and 2 do not include collapsing elements.

❣️ All other headers include a collapsing details element and are set to open by default. In order to set them to hidden by default, delete the word "open" from the top of the code.

❣️ Styling on the actual body text for these codes is pretty minimal. That's to make them flexible for individual user readability settings like dark vs light mode or font size.

❣️ That said, three different block quote stylings are included: no border, dotted gray (#ccc) border, and dashed, color border. You can mix and match these however you like. Just copy paste the blockquote style="" info for the styling you like into the code you're using.

❣️ No credit line is included in any of these this time. Feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi -- it's always greatly appreciated!
Flat | Top-Level Comments Only
10billionghosts: (Default)

(frozen comment) HEADER CODES: 01 & 02, no collapsing body

[personal profile] 10billionghosts 2025-09-21 04:58 pm (UTC)(link)


header 01...

This header is taken from my recently released Quickbox code and is pretty much just a 1:1 of the header from that made fully comment compatible. Because of the complexity of the code & limits on comment compatible HTML, it does not include a collapsing details tag, and will always show the block quote contents.

You can stop the bar from stretching the full width of the comment by changing width:100% to width:max-content, but I don't think that looks as good lol. Hex codes to change for this one are #9d6ce6 and #471d85. Here's the code:




announcements.



Header 02 was intended for use as a header for major announcement/updates. Styled in black and gray by default, but you can switch up the colors by changing hex codes #000 and #ccc. Be sure to do that with a find-replace tool like in Notepad++ so you get everything! Otherwise, fairly straightforward.

Edited 2025-10-06 16:29 (UTC)
10billionghosts: (Default)

(frozen comment) HEADER CODES: 03, 04, 05, collapsible, no styling.

[personal profile] 10billionghosts 2025-09-21 05:04 pm (UTC)(link)
➤ HEADER 03
Remember, you can set any collapsible header to hide its body content by deleting the word "open" from the top of the code!



- HEADER 04
Remember, you can set any collapsible header to hide its body content by deleting the word "open" from the top of the code!



05. HEADER
On this one, if you want to customize the look, the colors you're looking to change are #40855e (green) and #fff (white). Remember, you can set any collapsible header to hide its body content by deleting the word "open" from the top of the code!

Edited 2025-09-21 17:12 (UTC)
10billionghosts: (Default)

(frozen comment) HEADER CODES: 06, 07, 08, collapsible, border styling

[personal profile] 10billionghosts 2025-09-21 05:11 pm (UTC)(link)
header 06
Color customization for this one is #82bf91 (green), #1e1e1e (dark gray, font color for header), and #ccc (gray, blockquote border color). Remember, you can set any collapsible header to hide its body content by deleting the word "open" from the top of the code!



header 07.
Just one custom color used here: #c42359. Remember, you can set any collapsible header to hide its body content by deleting the word "open" from the top of the code!



+ header 08
This header is matchy to my Itty Bitty Bio code. Color customization here is #7b100f (dark red), #b30000 (red), #fff (white). Remember, you can set any collapsible header to hide its body content by deleting the word "open" from the top of the code!

Flat | Top-Level Comments Only