jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2024-03-02 12:07 am
10billionghosts) wrote2024-03-02 12:07 am
Entry tags:
code: POP! - a text box code (UPDATED 4/25)
UPDATE 4/24: lmao oh my god this code was broken the whole time dsalkjffdlakj it's fixed now. i just noticed when i tried to use it myself. sorry everybody sob. ;A;
Today's code is one that I made back in 2020 (!!!) and never released because (a) I didn't know what purpose it would serve, and (b) I made it before I understood grids and it was an absolute mess lmao. I've always liked the LOOK of it, so four years on, I've rewritten it, added a bit more internal styling, and I figure, if anyone wants to use it, they'll find a way! (Extraneous lore for you: somewhere in there, I used what I had learned from designing this code to create the Slick Chaos biosheet.)
POP! is a styled box for text that has some optional elements that can be mix-n-matched in into various codes. It can be used for info pages, thread starters, logs, or even character directories. By default, I've included two pre-styled codes:
(1) a "CR CHART" code, which uses a 100x100 emblem for a character icon and a header that includes a pip-based progress bar (theoretically, to describe character relationships).
(2) a "INFO" code, that includes space for a transparent image emblem and link list in addition to the base space for text.
While the code comes in two pre-styled flavors, it's very customizable, and sections can be swapped and edited with ease. (You can probably also steal sub-sections from my other codes and paste them in, but I haven't messed with that.) ANYWAY, check out the three live examples of code at the bottom of this post, and pick out the two pre-styled examples below.
CR CHART CODE:
INFO CODE:
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly! It is not comment compatible.
❣️ Parts of the code commented out in ALL CAPS are optional and can be swapped with the corresponding part from the other version of the code. For example, you can trade EMBLEM (ICON) out for EMBLEM (IMG) or delete the EMBLEM section entirely and still have a functional code.
❣️ Each sub-section is commented out [in brackets] (like the relationship value in the CR CHART code, which is labeled as [cr chart pips]), is completely optional, and can be swapped in and out in any version of the code.
❣️ Add as much text as you want to the BODY section (between the LJ-RAW tags). It'll scale automatically!
❣️ Body text is set to
❣️ This code can be pasted multiple times in an entry without breaking anything if you'd like more than one text box.
❣️ Under the BACKGROUND section, you can optionally swap the placeholder text 'REPEATING' with the URL for a repeating pattern or seamless background. Otherwise, just leave that in place and change the hex code, instead, to change the background color.
❣️ The EMBLEM (ICON) version of the code is meant to take a 100x100 icon, but you can put any image into the IMG_URL placeholder text and it'll auto-scale to fit the space.
❣️ The EMBLEM (IMG) version of the code, which also uses IMG_URL as a placeholder, works best with transparent images that have the same width and height values. It works well with transparent pngs or animated gifs.
❣️ If using the [cr chart pips] section, you can empty a box/pip by changing the
❣️ The [link list] subsection can accept as many links as you want! Add more by copy-pasting the default. They'll automatically stack up to 4 across at a time. By default, it comes with 8 blank links, but feel free to remove some if that's too many.
❣️ Don't forget to change all the placeholder text (#URL_HERE, link desc, and link) if you're using the [link list] subsection!
❣️ To change fonts, search for
❣️ Use the find-replace feature of a text editor to easily update colors. Here are the default hex codes you'll be looking for.
❣️ 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!
Today's code is one that I made back in 2020 (!!!) and never released because (a) I didn't know what purpose it would serve, and (b) I made it before I understood grids and it was an absolute mess lmao. I've always liked the LOOK of it, so four years on, I've rewritten it, added a bit more internal styling, and I figure, if anyone wants to use it, they'll find a way! (Extraneous lore for you: somewhere in there, I used what I had learned from designing this code to create the Slick Chaos biosheet.)
POP! is a styled box for text that has some optional elements that can be mix-n-matched in into various codes. It can be used for info pages, thread starters, logs, or even character directories. By default, I've included two pre-styled codes:
(1) a "CR CHART" code, which uses a 100x100 emblem for a character icon and a header that includes a pip-based progress bar (theoretically, to describe character relationships).
(2) a "INFO" code, that includes space for a transparent image emblem and link list in addition to the base space for text.
While the code comes in two pre-styled flavors, it's very customizable, and sections can be swapped and edited with ease. (You can probably also steal sub-sections from my other codes and paste them in, but I haven't messed with that.) ANYWAY, check out the three live examples of code at the bottom of this post, and pick out the two pre-styled examples below.
INFO CODE:
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly! It is not comment compatible.
❣️ Parts of the code commented out in ALL CAPS are optional and can be swapped with the corresponding part from the other version of the code. For example, you can trade EMBLEM (ICON) out for EMBLEM (IMG) or delete the EMBLEM section entirely and still have a functional code.
❣️ Each sub-section is commented out [in brackets] (like the relationship value in the CR CHART code, which is labeled as [cr chart pips]), is completely optional, and can be swapped in and out in any version of the code.
❣️ Add as much text as you want to the BODY section (between the LJ-RAW tags). It'll scale automatically!
❣️ Body text is set to
text-align:justify by default as this is the style I have the easiest time reading. You can change 'justify' to 'left' for a standard look, 'center' for centered text, or 'right' for right-aligned.❣️ This code can be pasted multiple times in an entry without breaking anything if you'd like more than one text box.
❣️ Under the BACKGROUND section, you can optionally swap the placeholder text 'REPEATING' with the URL for a repeating pattern or seamless background. Otherwise, just leave that in place and change the hex code, instead, to change the background color.
❣️ The EMBLEM (ICON) version of the code is meant to take a 100x100 icon, but you can put any image into the IMG_URL placeholder text and it'll auto-scale to fit the space.
❣️ The EMBLEM (IMG) version of the code, which also uses IMG_URL as a placeholder, works best with transparent images that have the same width and height values. It works well with transparent pngs or animated gifs.
❣️ If using the [cr chart pips] section, you can empty a box/pip by changing the
background: value to the word transparent. If you want to fill an empty box, change transparent to a hex code -- by default, #fff.❣️ The [link list] subsection can accept as many links as you want! Add more by copy-pasting the default. They'll automatically stack up to 4 across at a time. By default, it comes with 8 blank links, but feel free to remove some if that's too many.
❣️ Don't forget to change all the placeholder text (#URL_HERE, link desc, and link) if you're using the [link list] subsection!
❣️ To change fonts, search for
font-family: in the code and change the corresponding fonts. By default, the header text is Georgia, serif and the body text is arial, helvetica, sans serif.❣️ Use the find-replace feature of a text editor to easily update colors. Here are the default hex codes you'll be looking for.
- hex code #fff - white, used extensively in the code; use find-replace.
- hex code #40a0bd - blue, used for the background and link color, if you're using the link list subsection.
- hex code #084a5e - dark blue, declared only in the BACKGROUND section near the top of the code, for the dashed line.
❣️ 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!
Character Name
Cupcake ipsum dolor sit amet sweet. Pastry tiramisu topping shortbread dragée topping jelly-o. Cake chocolate jelly chocolate bar fruitcake jujubes. Muffin ice cream wafer bonbon danish cheesecake cake cheesecake.
Header Text
Cupcake ipsum dolor sit amet danish jelly-o sesame snaps candy. Ice cream chocolate cake pie powder carrot cake muffin chocolate bar. Ice cream powder cookie toffee bear claw macaroon tootsie roll dragée. Bear claw sweet roll gingerbread topping dessert.
Chocolate lollipop marshmallow jujubes tiramisu pudding cotton candy. Jelly tiramisu dragée cake soufflé chocolate cake. Candy canes sweet chocolate cake dragée candy canes marzipan toffee jelly chocolate. Dragée chocolate cake tootsie roll candy canes tart. Biscuit tart halvah muffin candy ice cream sesame snaps. Donut candy dragée shortbread croissant candy jelly jelly tootsie roll.
Chocolate lollipop marshmallow jujubes tiramisu pudding cotton candy. Jelly tiramisu dragée cake soufflé chocolate cake. Candy canes sweet chocolate cake dragée candy canes marzipan toffee jelly chocolate. Dragée chocolate cake tootsie roll candy canes tart. Biscuit tart halvah muffin candy ice cream sesame snaps. Donut candy dragée shortbread croissant candy jelly jelly tootsie roll.
Header Text
Cupcake ipsum dolor sit amet danish jelly-o sesame snaps candy. Ice cream chocolate cake pie powder carrot cake muffin chocolate bar. Ice cream powder cookie toffee bear claw macaroon tootsie roll dragée. Bear claw sweet roll gingerbread topping dessert.
Chocolate lollipop marshmallow jujubes tiramisu pudding cotton candy. Jelly tiramisu dragée cake soufflé chocolate cake. Candy canes sweet chocolate cake dragée candy canes marzipan toffee jelly chocolate. Dragée chocolate cake tootsie roll candy canes tart. Biscuit tart halvah muffin candy ice cream sesame snaps. Donut candy dragée shortbread croissant candy jelly jelly tootsie roll.
Lemon drops biscuit sugar plum macaroon cheesecake gummi bears. Cake pastry sweet donut tiramisu cookie jelly beans chocolate candy. Jelly sugar plum topping carrot cake sugar plum toffee candy canes. Sugar plum icing bear claw dragée tootsie roll pie. Dragée sweet roll danish chocolate bar sweet roll sesame snaps soufflé. Cookie fruitcake sweet jelly-o gummi bears candy shortbread jelly beans caramels.
Chocolate lollipop marshmallow jujubes tiramisu pudding cotton candy. Jelly tiramisu dragée cake soufflé chocolate cake. Candy canes sweet chocolate cake dragée candy canes marzipan toffee jelly chocolate. Dragée chocolate cake tootsie roll candy canes tart. Biscuit tart halvah muffin candy ice cream sesame snaps. Donut candy dragée shortbread croissant candy jelly jelly tootsie roll.
Lemon drops biscuit sugar plum macaroon cheesecake gummi bears. Cake pastry sweet donut tiramisu cookie jelly beans chocolate candy. Jelly sugar plum topping carrot cake sugar plum toffee candy canes. Sugar plum icing bear claw dragée tootsie roll pie. Dragée sweet roll danish chocolate bar sweet roll sesame snaps soufflé. Cookie fruitcake sweet jelly-o gummi bears candy shortbread jelly beans caramels.
no subject
no subject
no subject
no subject
no subject
Also thank you! I'm also very pleased with how it all came together. :)
no subject
Yeah! I tend to either purposefully design a bunch of codes that have cohesive elements or am just heavily influenced by a particular aesthetic at certain points, but either way I personally enjoy having a cohesive set of codes for whatever purposes, so I do try to do that when I design.
If you browse my tags, anything labeled code: set: is gonna be cohesive within that tag, too. (Except for the one labeled Draftsmas.)
no subject
That's helpful to know, since I'll still need a few more! I may snag some for other journals as well.
no subject
Would it be okay if I used this and some of the CSS from your biosheets as basis for codes for my own personal use? (Mostly the flexbox/grids combo solution for mobile-friendliness—last time I was doing my own codes, using tables was still the best way to get grid layouts, and trying to use Dreamwidth on a smartphone was out of the question, so I have no clue what I'm doing rn.)
I wouldn't publicly share/sell the codes, of course, and I'd credit you; I know you're fine with people modifying your codes for personal use, but "taking the codes apart to cherry-pick useful bits and Frankenstein them with my own code" feels like something I wanna ask for explicit permission for, just in case.
no subject
Yes, absolutely. And thank you for checking. :] I'm totally cool with Frankenstein-ing as long as the codes aren't then being sold or used in generative software/AI, and do appreciate a credit to this journal being left somewhere in the code, especially if it's being released for public use.
Drop me a link when you've released something so I can peep it!