jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2024-11-13 10:29 am
10billionghosts) wrote2024-11-13 10:29 am
Entry tags:
code: MEMBERSHIP - a cr chart/directory code
EMMRICH VOLKARIN
mourn watch
●●●●○○○○○○
Cheesecake jelly-o marshmallow cupcake croissant shortbread cotton candy cotton candy. Sweet roll sugar plum marzipan muffin gummies dessert.
VIKTOR
white mage . warrior of light
○○○●●
Biscuit soufflé carrot cake bear claw cotton candy powder apple pie dragée soufflé. Wafer pastry icing pastry caramels.
Much like applying one of those tiny plungers to your shitty apartment bathtub drain, sufficient pressure (forcing myself to release SOMETHING) seems to have loosened the gunk in my brain enough for me to make something else! Hooray!
Back at it again with the card-like codes. This is meant to be a CR Chart code but works well as a Directory/Musebox/Cast List code as well. With a bit of editing you could probably also make it other things, thread topper, splash page, nav code. Stuff like that.
For ease of use, I've provided one version of the code that comes with a gradient background (pink/purple) and one version to be used for either a solid color or a background image.
GRADIENT BACKGROUND CODE:
SOLID/IMAGE BACKGROUND CODE:
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible! It is probably insanejournal friendly, but is not optimized for insanejournal and so may not look 100% over there.
❣️ As long as you use the outer wrapper, cards will stack up to three across on the widest resolutions, and will consolidate into one per line on mobile displays. You can add additional cards by copy-pasting the individual card code where indicated in the greater code.
❣️ Be sure to replace IMG_URL with the URL to an image you'd like to use for the little portrait slot. It was made with 100x100 icons in mind, but you can use any old portrait, gif, or transparent logo image and it should scale to fit! As usual, you may find you need to futz with background-position to get an image to align correctly.
❣️ You can use CSSGradient.io to generate gradient color code for the gradient background version of this code! By default it's a pink-purple gradient: "linear-gradient(223deg, rgba(252,77,178,1) 0%, rgba(207,111,198,1) 47%, rgba(181,21,99,1) 100%);".
❣️ On the gradient background code, the pip bar color is hex code #b51563 by default. Just replace this in the code with the color you'd like to use.
❣️ The solid background version of this code includes the necessary elements to apply a background image. Replace the BG_HERE placeholder text with the URL for the image you'd like to use. The stuff at transparenttextures.com works great for this!
❣️ On the solid background code, you'll want to change hex code #b70000 to adjust the overall background color and the pip bar color.
❣️ Other than that, #fff (white) controls the text area background and border around the image, and #000 (black) is declared at the very top of the code for the base font color.
❣️ For the space where you can put a short blurb, I MEAN A SHORT BLURB. Two to three sentences maximum! It will generate a scroll bar if you do more than that, and it will work but it will be ugly.
❣️ If the CHARACTER NAME text you want to use is very long and causing issues, you can shrink the actual font by changing "font-size:14px" to a smaller number.
❣️ The little circles for the meter are just circle text symbols. You can swap those out with whatever you want - square pips, emojis, etc.
❣️ This code comes with a credit by default. Appreciate it if you leave it in!
❣️ 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!
Back at it again with the card-like codes. This is meant to be a CR Chart code but works well as a Directory/Musebox/Cast List code as well. With a bit of editing you could probably also make it other things, thread topper, splash page, nav code. Stuff like that.
For ease of use, I've provided one version of the code that comes with a gradient background (pink/purple) and one version to be used for either a solid color or a background image.
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible! It is probably insanejournal friendly, but is not optimized for insanejournal and so may not look 100% over there.
❣️ As long as you use the outer wrapper, cards will stack up to three across on the widest resolutions, and will consolidate into one per line on mobile displays. You can add additional cards by copy-pasting the individual card code where indicated in the greater code.
❣️ Be sure to replace IMG_URL with the URL to an image you'd like to use for the little portrait slot. It was made with 100x100 icons in mind, but you can use any old portrait, gif, or transparent logo image and it should scale to fit! As usual, you may find you need to futz with background-position to get an image to align correctly.
❣️ You can use CSSGradient.io to generate gradient color code for the gradient background version of this code! By default it's a pink-purple gradient: "linear-gradient(223deg, rgba(252,77,178,1) 0%, rgba(207,111,198,1) 47%, rgba(181,21,99,1) 100%);".
❣️ On the gradient background code, the pip bar color is hex code #b51563 by default. Just replace this in the code with the color you'd like to use.
❣️ The solid background version of this code includes the necessary elements to apply a background image. Replace the BG_HERE placeholder text with the URL for the image you'd like to use. The stuff at transparenttextures.com works great for this!
❣️ On the solid background code, you'll want to change hex code #b70000 to adjust the overall background color and the pip bar color.
❣️ Other than that, #fff (white) controls the text area background and border around the image, and #000 (black) is declared at the very top of the code for the base font color.
❣️ For the space where you can put a short blurb, I MEAN A SHORT BLURB. Two to three sentences maximum! It will generate a scroll bar if you do more than that, and it will work but it will be ugly.
❣️ If the CHARACTER NAME text you want to use is very long and causing issues, you can shrink the actual font by changing "font-size:14px" to a smaller number.
❣️ The little circles for the meter are just circle text symbols. You can swap those out with whatever you want - square pips, emojis, etc.
❣️ This code comes with a credit by default. Appreciate it if you leave it in!
❣️ 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!
CHARACTER NAME
subheader text
●●●●○○○○○○
!!Your text here!!
CHARACTER NAME
subheader text
●●●●●●○○○○
!!Your text here!!
no subject
no subject
(thank you ilu)