jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2025-06-21 08:20 pm
10billionghosts) wrote2025-06-21 08:20 pm
code: QUICKBOX - a mobile & comment compatible infobox/biosheet/event code
Was going through an old character journal looking for something and found this code tucked away in there. Zhuzhed it up a bit for release because I thought it was cute.
Quickbox is another fairly straightforward, easy to use text framing code that is designed to work well on desktop and mobile displays. It comes with a fake lj-cut by default, which makes its appearance on a journal's entry list a little more compact. You can easily edit this out if you don't want that effect (see the How To Use section). The examples I've provided are styled to show off how it can be used as a biosheet and an event/meme code, but you can use it for just about anything you might use an info/text box for! The code itself is styled, but not super filled in.
You can see live previews below, including a preview of how the code looks in comments. Check that out!
CODE HERE:
HOW TO USE:
❣️ This code is mobile compatible! It is MOSTLY comment compatible!
❣️ Mind the LJ-raw tags.
❣️ All sections are fully optional and can be removed or moved around in the code as you'd like.
❣️ If you're posting the sort of meme that has a form, you should be able to add in one of my custom text area codes wherever needed.
❣️ This code does come with an LJ-CUT baked in. To take full advantage of this, be sure to edit your post once you've posted it and update the placeholder text #POST_URL_HERE with the URL for the post itself.
❣️ Out of the box, the main header text is coded to be a link that will take you to the post itself. I've also included styling for a smaller link within the header & portrait area, if you'd like to use that instead.
❣️ To remove link functionality from the main header text, simply delete href="#POST_URL_HERE" from that bit of code.
❣️ If you do not want the fake LJ-CUT, simply delete the bit of code between the comments labeled "FAKE LJ-CUT HERE".
❣️ Replace IMG_URL with the URL for an image you'd like to use for the header! A landscape ratio picture is best for this image slot, and on mobile displays the header image WILL get wider while staying roughly the same height.
❣️ Most of the text areas are fairly customizable. As you can see in the live event example below, you can toss in float:left or float:right images easily or add a textarea code, as examples!
❣️ Look for instances of !! in the code, these are placeholder text that you'll want to update.
❣️ Color/Appearance customization for this code:
❣️ I love peeking at what people do with my codes, so 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!
Quickbox is another fairly straightforward, easy to use text framing code that is designed to work well on desktop and mobile displays. It comes with a fake lj-cut by default, which makes its appearance on a journal's entry list a little more compact. You can easily edit this out if you don't want that effect (see the How To Use section). The examples I've provided are styled to show off how it can be used as a biosheet and an event/meme code, but you can use it for just about anything you might use an info/text box for! The code itself is styled, but not super filled in.
You can see live previews below, including a preview of how the code looks in comments. Check that out!
HOW TO USE:
❣️ This code is mobile compatible! It is MOSTLY comment compatible!
❣️ Mind the LJ-raw tags.
❣️ All sections are fully optional and can be removed or moved around in the code as you'd like.
❣️ If you're posting the sort of meme that has a form, you should be able to add in one of my custom text area codes wherever needed.
❣️ This code does come with an LJ-CUT baked in. To take full advantage of this, be sure to edit your post once you've posted it and update the placeholder text #POST_URL_HERE with the URL for the post itself.
❣️ Out of the box, the main header text is coded to be a link that will take you to the post itself. I've also included styling for a smaller link within the header & portrait area, if you'd like to use that instead.
❣️ To remove link functionality from the main header text, simply delete href="#POST_URL_HERE" from that bit of code.
❣️ If you do not want the fake LJ-CUT, simply delete the bit of code between the comments labeled "FAKE LJ-CUT HERE".
❣️ Replace IMG_URL with the URL for an image you'd like to use for the header! A landscape ratio picture is best for this image slot, and on mobile displays the header image WILL get wider while staying roughly the same height.
❣️ Most of the text areas are fairly customizable. As you can see in the live event example below, you can toss in float:left or float:right images easily or add a textarea code, as examples!
❣️ Look for instances of !! in the code, these are placeholder text that you'll want to update.
❣️ Color/Appearance customization for this code:
- The headers and outer border of this code use a tiling background from transparenttextures.
- This is included in the code, itself. You can swap this out for a different tiling background code if you like by replacing the imgur URL at the top of the code with the URL for a different tiling background image
- hex code #4a3a63 is a dark purple declared at the top of the code for the font color.
- hex code #3b038f is a purple used for the outer border, the header bars, and the outline on header text. Find-replace to update this, as it occurs a bunch, necessarily.
- hex code #9d6ce6 is a neon purple used as the drop shadow color on the header bars. It is declared once on each header bar as part of the box-shadow code.
- Comment HTML is a little weird. To get this code to work nicely, you will want to keep a few things in mind...
- Verticality is an absolute pain in the ass in comment HTML. You cannot simply tell a div to be 300px height. It will not listen. SO, to get the image to have a reasonable height, you MUST do two things:
- First, change the
min-width:value of the portrait to around 25px - Next, make the corresponding text on that row as tall as you'd like the image. Write a longer summary or add some additional return lines in the text area to make the image taller.
- First, change the
- You can also just forego the header image entirely and use only text! Then you won't have to worry about it.
- If you want to center the code itself, be sure to wrap it in center tags.
❣️ I love peeking at what people do with my codes, so 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!
OMELET DU GOMMAGE
everyone loves a party!
Here are one or two sentences about the event. A very brief summary. You can put more if you want, too! Please look forward to it. (ENTER)
header text...
Pudding marshmallow halvah pastry marzipan cupcake cheesecake macaroon. Lollipop carrot cake brownie tart halvah jujubes cupcake apple pie cheesecake. Marshmallow donut icing cheesecake marshmallow jelly halvah cotton candy jelly.
header text...
Liquorice jujubes wafer tootsie roll dessert. Gingerbread sugar plum jujubes soufflé tiramisu marzipan fruitcake cake. Gingerbread chocolate cake candy tootsie roll dragée sweet shortbread. Tiramisu sweet roll powder caramels croissant pie marzipan danish gingerbread.
Tootsie roll biscuit sweet roll carrot cake dragée. Caramels bonbon donut marshmallow cupcake danish. Oat cake dessert chocolate topping cake donut ice cream halvah toffee. Tootsie roll cake apple pie lemon drops caramels donut.
Tootsie roll biscuit sweet roll carrot cake dragée. Caramels bonbon donut marshmallow cupcake danish. Oat cake dessert chocolate topping cake donut ice cream halvah toffee. Tootsie roll cake apple pie lemon drops caramels donut.
CHARACTER NAME
subheader text here
ITEM: answerITEM: answer
ITEM: answer
header text...
Liquorice jujubes wafer tootsie roll dessert. Gingerbread sugar plum jujubes soufflé tiramisu marzipan fruitcake cake. Gingerbread chocolate cake candy tootsie roll dragée sweet shortbread. Tiramisu sweet roll powder caramels croissant pie marzipan danish gingerbread.
Pudding marshmallow halvah pastry marzipan cupcake cheesecake macaroon. Lollipop carrot cake brownie tart halvah jujubes cupcake apple pie cheesecake. Marshmallow donut icing cheesecake marshmallow jelly halvah cotton candy jelly.
Pudding marshmallow halvah pastry marzipan cupcake cheesecake macaroon. Lollipop carrot cake brownie tart halvah jujubes cupcake apple pie cheesecake. Marshmallow donut icing cheesecake marshmallow jelly halvah cotton candy jelly.
header text...
Liquorice jujubes wafer tootsie roll dessert. Gingerbread sugar plum jujubes soufflé tiramisu marzipan fruitcake cake. Gingerbread chocolate cake candy tootsie roll dragée sweet shortbread. Tiramisu sweet roll powder caramels croissant pie marzipan danish gingerbread.
Pudding marshmallow halvah pastry marzipan cupcake cheesecake macaroon. Lollipop carrot cake brownie tart halvah jujubes cupcake apple pie cheesecake. Marshmallow donut icing cheesecake marshmallow jelly halvah cotton candy jelly.
Pudding marshmallow halvah pastry marzipan cupcake cheesecake macaroon. Lollipop carrot cake brownie tart halvah jujubes cupcake apple pie cheesecake. Marshmallow donut icing cheesecake marshmallow jelly halvah cotton candy jelly.
header text...
!! your content here !!
header text...
!! your content here !!
PREVIEW: comment version of code