jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2024-02-26 02:17 pm
10billionghosts) wrote2024-02-26 02:17 pm
Entry tags:
code: TEXT AREA PACK 1, a 12-pack of styled textareas
Hello! Today I'm releasing a pack of styled text areas. This pack comes with 12 fully styled textarea codes that can be pasted directly into blank posts, added into existing codes (for example, to the subsections of info page or ic/ooc codes), or pasted below other codes (for memes, holds pages, etc).
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:
❣️ shuffle (which is taken directly from the geometric set) can have a background image added; simply change IMG_URL to the URL of the image you'd like to use.
❣️ playne tayne is a bit lengthier than all the other codes, but still functions the same for resizing! Only change the 250px and 100px width and heights!
❣️ vaporwave uses a linear gradient for its background color. You can generate your own linear gradient code at cssgradient.io. Replace this portion of code
❣️ Don't forget to change the "HEADER TEXT" for the text areas that have 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.
https://i.imgur.com/Uoi4tRC.png with the URL of the image you'd like to use.
❣️ shuffle (which is taken directly from the geometric set) can have a background image added; simply change IMG_URL to the URL of the image you'd like to use.
❣️ playne tayne is a bit lengthier than all the other codes, but still functions the same for resizing! Only change the 250px and 100px width and heights!
❣️ vaporwave uses a linear gradient for its background color. You can generate your own linear gradient code at cssgradient.io. Replace this portion of code
background: linear-gradient(30deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%); with your new gradient!❣️ Don't forget to change the "HEADER TEXT" for the text areas that have 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!
TEXT AREA #02: bg-image
TEXT AREA #03: scifi
TEXT AREA #04: grayscale
TEXT AREA #06: framed
TEXT AREA #09: hotgoss
TEXT AREA #10: shuffle
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject