code: ALCOVE - a set of two cast/muse lists

[10billionghosts]

NAME
SURNAME

word . word . word

NAME
SURNAME

pb name . word . another word

@wolstan

haurchefant greystone

ffxiv . of the silver fuller

@UNIRONICKYLORENFAN

liam blumenthal

the moon . hahaiah . matt bennett

Merry Draftsmas! I'm releasing codes number Four and Five of the Draftsmas release block together, because they're so visually (if not technically) similar. So, say hello to Alcove! A set of two cast/muse list codes that came about for completely different reasons but nevertheless wound up looking too samey and sat unreleased because I wasn't sure what to do about it.

ALCOVE: COLORFUL (the arch-shaped one) was inspired by a desire to create a design with a half-circle/arch shape. This was harder than I thought it'd be to actually code, but it's pretty straightforward to use!

ALCOVE: APPLES (the rounded square) was inspired by the early instagram widget aesthetic/late-2000s iOS icons. While its default is simple white with black/gray text, I've included all the code needed to use an image or other color for the background.

Both codes are fairly simple and, hopefully, easy to use! You can see some live previews and pick up both codes at the bottom of this post along with their HOW TO USE sections!

BY THE WAY, WHILE YOU'RE HERE! These are kinda sorta matchy to baisemain's fantastic collapsible playlist code. So give that a peep.

ALCOVE: COLORFUL

NAME
SURNAME

word . word . word

NAME
SURNAME

pb name . word . another word

NAME
SURNAME

pb name . tag . game

code

CODE HERE:
<lj-raw> <!-- OUTER WRAPPER - top; the wrapper is necessary for the code to work as intended --> <div style="max-width:750px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:30px;font-family:georgia, serif;font-size: clamp(11px, 1vw, 12px);"> <!-- CONTENT SPACE!!! - start; all of your cards go below this point --> <!-- CARD - !!character name!!; start --> <div style="width:230px;height:255px;display:grid;grid-template-columns:1fr;grid-template-rows:1fr 15px 70px 20px;gap:0;border-radius:50% 50% 5% 5%;overflow:hidden;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;"> <!-- UPPER BACKGROUND; you'll need to change #be064a to your own hex code here --> <div style="grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:2;background:#be064a;"></div> <!-- UPPER BACKGROUND; end --> <!-- PORTRAIT; change IMG_URL, the image will scale automatically --> <div style="grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:5;margin:10px;border-radius:200% 200% 0 0;background:#be064a url('IMG_URL')center bottom;background-size:cover;"></div> <!-- PORTRAIT; end --> <!-- WEE BAND; update hex code #be064a if changing the background color of the card --> <div style="grid-column-start:1;grid-column-end:2;grid-row-start:2;grid-row-end:3;background:#be064a;"></div> <!-- WEE BAND; end --> <!-- TEXT AREA; lots of stuff to change here, update any hex codes to proper colors and customize text --> <div style="grid-column-start:1;grid-column-end:2;grid-row-start:3;grid-row-end:4;padding:6px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;text-align:center;background:#fff;color:#be064a;"> <a href="#URL_HERE" style="text-decoration:none;width:100%;line-height:1;font-size:14px;font-weight:bold;letter-spacing:1.1px;color:#be064a;">!!NAME!!<br/>!!SURNAME!!</a> <div style="width:85%;height:1px;margin:4px auto 2px;background:#be064a;"></div> <div style="width:100%;"><a href="#URL_HERE" style="text-decoration:underline dotted;color:#be064a;">link</a> . <a href="#URL_HERE" style="text-decoration:underline dotted;color:#be064a;">link</a> . word</div> </div> <!-- TEXT AREA; end --> <!-- BOTTOM BAND; update hex code #be064a here if changing away from default background color --> <div style="grid-column-start:1;grid-column-end:2;grid-row-start:4;grid-row-end:5;background:#be064a;"></div> <!-- BOTTOM BAND; end --> </div> <!-- CARD - !!character name!!; end --> <!-- CONTENT SPACE - end; all of your cards go above this point --> </div> <!-- CREDIT; start --> <div style="max-width:750px;width:100%;margin:5px auto;text-align:center;font-size:10px;color:#ddd"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ccc;">code</a></div> <!-- CREDIT; end --> </lj-raw>

HOW TO USE:

❣️ Mind those lj-raw tags!!

❣️ This code is mobile compatible and insanejournal friendly! It is NOT comment compatible, but alcove: apples is.

❣️ This code comes with ONE card to start, but you can copy paste in as many as you like where indicated in the code. They will stack up to three across on the largest resolutions, and will shuffle down to one per line on mobile devices.

❣️ hex code #be064a; is the primary color for your card. It's declared several times as a background and font color, so I suggest running a find and replace when updating this color code.

❣️ Be sure to replace IMG_URL with the URL of a portrait. The positioning on this can be a leeetle finnicky, so aim for a picture where the focus is concentrated toward the top and center of the image if you don't want to mess with positioning.

❣️ Watch for any instance of #URL_HERE and update those as needed! By default, the name is a link. I've provided additional coding for smaller text links, as well. Feel free to delete those and just do plain text if you don't want the links.

❣️ This code comes with a credit by default. Appreciate it if you leave it in, but you can delete if you want! :)

❣️ 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 one of the charities listed on the main draftmas hub post.

ALCOVE: APPLES

@wolstan

haurchefant greystone

ffxiv . of the silver fuller

@UNIRONICKYLORENFAN

liam blumenthal

the moon . hahaiah . matt bennett

@aegletes

apollo

god of prophecy, poetry, & being petty

code

CODE HERE:
<lj-raw> <!-- OUTER WRAPPER - top; the wrapper is necessary for the code to work as intended --> <div style="max-width:750px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:30px;font-family:georgia, serif;font-size: clamp(11px, 1vw, 12px);"> <!-- CONTENT SPACE!!! - start; all of your cards go below this point --> <!-- CARD - !!character name!!; start --> <div style="width:215px;height:250px;display:grid;grid-template-columns:1fr;grid-template-rows:27px 173px 50px;gap:0;border-radius:25px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;background:#fff url('BG_URL_HERE');"> <!-- HEADER; journal name or character name here, don't forget to change #URL_HERE! --> <a href="#URL_HERE" style="text-decoration:none;grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:2;padding:4px;display:flex;justify-content:center;align-items:center;align-content:end;text-align:center;font-weight:bold;text-transform:uppercase;text-shadow: 1px 1px 0px rgba(167,167,167,.75);color:#212121;">@!!username!!</a> <!-- HEADER; end --> <!-- PORTRAIT; change IMG_URL, size is 173x215, but any image will auto-scale to fit --> <div style="grid-column-start:1;grid-column-end:2;grid-row-start:2;grid-row-end:3;border:0;border-top:4px solid #fff;border-bottom:4px solid #fff;background:#ccc url('IMG_URL')center;background-size:cover;"></div> <!-- PORTRAIT; end --> <!-- FOOTER; for additional information like pb or origin series --> <div style="grid-column-start:1;grid-column-end:2;grid-row-start:3;grid-row-end:4;padding:5px;text-align:center;line-height:1;"> <div style="margin:0;padding:0;font-size: clamp(10px, 1vw, 11px);text-transform:uppercase;font-weight:bold;letter-spacing:2px;color:#212121;"></lj-raw>!!character name!!<lj-raw></div> <div style="margin-top:5px;font-size: clamp(9px, 1vw, 10px);text-transform:lowercase;font-style:italic;color:#aaa;"></lj-raw>!!sub-header!! . <a href="#URL_HERE" style="text-decoration:underline dotted;color:#aaa">!!link!!</a><lj-raw></div> </div> <!-- FOOTER; end --> </div> <!-- CARD - !!character name!!; end --> <!-- CONTENT SPACE - end; all of your cards go above this point --> </div> <!-- CREDIT; start --> <div style="max-width:750px;width:100%;margin:5px auto;text-align:center;font-size:10px;color:#ddd"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ccc;">code</a></div> <!-- CREDIT; end -->

HOW TO USE:

❣️ Mind those lj-raw tags!!

❣️ This code is mobile compatible, comment compatible, and insanejournal friendly!

❣️ This code comes with ONE card to start, but you can copy paste in as many as you like where indicated in the code. They will stack up to three across on the largest resolutions, and will shuffle down to one per line on mobile devices.

❣️ By default, this code has a white background, but you can easily change that. Either change BG_URL_HERE into the url to the background you want to use, or change the preceding #fff to the color you'd like it to be if you want a solid color.

❣️ By default, I have set the background image size to cover. If you are using a tiling background, you will want to delete 'background-size:cover' under ONLY the top CARD - !!character name!! section. Leave any other instances of that intact. If you aren't using a tiling background, you can just leave that there.

❣️ hex code #212121 is the default dark gray for all heading text. Find-replace this to update it.

❣️ hex code color:#aaa; is the default light gray text for the sub-text in the footer. You will almost certainly want to change this if you change the background to anything other than white!

❣️ rgba(167,167,167,.75) is used for the text shadow on the header, and you may want to adjust this if you're using a background color or image. I would suggest leaving the .75 as is, as this controls the opacity. You'll just want to change the other three numbers.

❣️ Remember to change IMG_URL to the URL of the portrait you'd like to use. No special advice here, just do what you like.

❣️ There are two instances of #URL_HERE to account for. One in the header, intended to link to a journal or profile, and one pre-styled example link in the footer, for whatever.

❣️ The text &#64; is what creates the @ (at symbol) in the header. You can keep or delete it.

❣️ This code comes with a credit by default. Appreciate it if you leave it in, but you can delete if you want! :)

❣️ 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 one of the charities listed on the main draftmas hub post.

Comments

[poisonenvy]

Hi! I'm wanting to use the Alcove code, but I've spent the last little while trying to figure out how to add more rows of text underneath, and I cannot for the life of me figure it out. If you've got any suggestions for doing so, I'd appreciate it a lot!

[poisonenvy]

Actually, it's not perfect, but I think I figured it out over here

[10billionghosts]

Ah! Yes! That would be the quick fix I'd suggest. Adjusting the size at all kind of donks up the overall shape because of how the corner rounding works, sadly. So, adding more space would require some math-ing.

One other thing you could also try, see if you like it...

Replace the TEXT AREA part of the code with this:

<!-- TEXT AREA; lots of stuff to change here, update any hex codes to proper colors and customize text --> <div style="grid-column-start:1;grid-column-end:2;grid-row-start:3;grid-row-end:4;padding:6px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;text-align:center;background:#fff;color:#be064a;overflow:auto;scrollbar-width:thin;">

It will cause the text section to auto generate a scroll bar so that you can put more info in without changing the overall shape of the code. May not be the style you're looking for though.