jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2025-06-12 10:24 pm
10billionghosts) wrote2025-06-12 10:24 pm
Entry tags:
code: TEXT AREA PACK 2, a 7-pack of styled textarea codes
FINALLY, I've put together a second pack of styled textarea codes! The first set went over really well and I've wanted to get enough together to release a second pack for AGES. Thankfully, I got to a nice round seven of them a few days ago, so- here they are!
There are live previews of each textarea at the bottom of this post. You can pick up the code for each in its respective preview. The How To Use section has some brief tips for customization and use.
What is a text area?
A text area is, as the name implies, a fixed-sized box that can contain a potentially infinite amount of text. Typically, they're used as part of a bigger submission form on apps and websites (contact pages, feedback and survey forms, etc.), but we use them a bit differently here on journal sites.
The stuff contained in a textarea tag presents as raw code. Nothing is automatically formatted, so things like bold tags and anchor links remain intact. The text area can also be (temporarily) edited by the end user live. This makes them a great tool for sharing standard biosheet codes, easy-to-read holds page forms, and meme templates with other users.
Why use a fancy textarea tag?
Cuz fashion is endgame for every activity, baby. Also it makes the content of the box easier to find on the page.
Will these work in comments?
No. :( These are for in-entry or full HTML pages only. On dreamwidth (and probably IJ), textareas can't be extensively styled in comments. All codes will lose most of their styling and look kinda weird in comments.
HOW TO USE:
❣️ These codes are mobile compatible and IJ friendly. They will NOT work in comments, as custom textareas don't work in comments.
❣️ All codes are pre-styled, but feel free to customize them!
❣️ To use, replace the 'your content here' placeholder text with the string of text and code you'd like to use.
❣️ READ THIS IF THE TEXT AREA LOOKS WEIRD OR IT'S DONKING UP YOUR ENTRY: By default, all codes are wrapped in LJ-RAW and CENTER tags. This shouldn't be an issue, but you may run into compatibility problems in some instances. If these text areas or the entry around them is looking wonky, try removing first the center and then the LJ-raw tags from the code.
❣️ You can easily resize the default sizing for these text areas! Each code is set to be a total width of 250px and a total height of 100px by default. These sizes are declared only once in each code. To adjust the size of the box, search for
❣️ By default, the little tab in the right corner that usually lets an end user resize a text area box themself is disabled. You can turn on this manual resizing feature in any of the codes by deleting
❣️ Each textarea has a customized scroll bar. To change the color of the scroll bar, search for
❣️ If you want to change the font used in the textarea, search
❣️ All textarea interiors are set to
❣️ All codes are pre-styled with unique colors, but you can feel free to customize them! Rather than list out each color I used, I'll instead single out the css properties you'll want to search for and change:
❣️ fog is NOT OPAQUE but rather is made using a low opacity gray, so it will tint backgrounds it is set against. You may want to adjust the font color to accommodate if you are using bold colors as background colors.
❣️ box is genuinely just the textarea box I use for all of my release posts. It's SUPER basic, but I figured someone might want it.
❣️ These codes contains small credit links. I'd appreciate if you'd left them in, but you can remove them if you'd like!
❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you'd like, you can also donate to my ko-fi!
There are live previews of each textarea at the bottom of this post. You can pick up the code for each in its respective preview. The How To Use section has some brief tips for customization and use.
What is a text area?
A text area is, as the name implies, a fixed-sized box that can contain a potentially infinite amount of text. Typically, they're used as part of a bigger submission form on apps and websites (contact pages, feedback and survey forms, etc.), but we use them a bit differently here on journal sites.
The stuff contained in a textarea tag presents as raw code. Nothing is automatically formatted, so things like bold tags and anchor links remain intact. The text area can also be (temporarily) edited by the end user live. This makes them a great tool for sharing standard biosheet codes, easy-to-read holds page forms, and meme templates with other users.
Why use a fancy textarea tag?
Cuz fashion is endgame for every activity, baby. Also it makes the content of the box easier to find on the page.
Will these work in comments?
No. :( These are for in-entry or full HTML pages only. On dreamwidth (and probably IJ), textareas can't be extensively styled in comments. All codes will lose most of their styling and look kinda weird in comments.
HOW TO USE:
❣️ These codes are mobile compatible and IJ friendly. They will NOT work in comments, as custom textareas don't work in comments.
❣️ All codes are pre-styled, but feel free to customize them!
❣️ To use, replace the 'your content here' placeholder text with the string of text and code you'd like to use.
❣️ READ THIS IF THE TEXT AREA LOOKS WEIRD OR IT'S DONKING UP YOUR ENTRY: By default, all codes are wrapped in LJ-RAW and CENTER tags. This shouldn't be an issue, but you may run into compatibility problems in some instances. If these text areas or the entry around them is looking wonky, try removing first the center and then the LJ-raw tags from the code.
❣️ You can easily resize the default sizing for these text areas! Each code is set to be a total width of 250px and a total height of 100px by default. These sizes are declared only once in each code. To adjust the size of the box, search for
width:250px;height:100px; and adjust JUST these values. The rest of the code will scale accordingly.❣️ By default, the little tab in the right corner that usually lets an end user resize a text area box themself is disabled. You can turn on this manual resizing feature in any of the codes by deleting
resize:none;.❣️ Each textarea has a customized scroll bar. To change the color of the scroll bar, search for
scrollbar-color: and change the two hex codes that follow it. The first hex code is the color of the scroll bar (the part that moves) and the second is the color of its track.❣️ If you want to change the font used in the textarea, search
font-family: and adjust. By default, most of the codes are using courier, but you can change to any web safe font.❣️ All textarea interiors are set to
font-size:11px by default. Search this string and adjust the 8px up or down from there. 12px is roughly standard web size, 13px - 15px are more legible/accessible sizes.❣️ All codes are pre-styled with unique colors, but you can feel free to customize them! Rather than list out each color I used, I'll instead single out the css properties you'll want to search for and change:
color:controls font color.background:controls the entire background of a given div/box; if it says "background:transparent", you can probably leave it alone.border:for the color of the border around a given div/boxscrollbar-color:as mentioned above, these two hex codes control the scroll bar and track colorsbox-shadow:any hex codes after the box shadow descriptor will control the color of the "shadow" that's behind a given div.
❣️ fog is NOT OPAQUE but rather is made using a low opacity gray, so it will tint backgrounds it is set against. You may want to adjust the font color to accommodate if you are using bold colors as background colors.
❣️ box is genuinely just the textarea box I use for all of my release posts. It's SUPER basic, but I figured someone might want it.
❣️ These codes contains small credit links. I'd appreciate if you'd left them in, but you can remove them if you'd like!
❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you'd like, you can also donate to my ko-fi!