code: NEW OLD FRIEND - a thread topper

[10billionghosts]

CHARACTER & CHARACTER

Sweet roll carrot cake sugar plum halvah chocolate cake liquorice. Marzipan tiramisu cake cookie lemon drops powder donut.

CODE

NEW OLD FRIEND is a simple thread topper code featuring space for two portraits and a bit of text. Fairly straightforward! Please enjoy.

GET THE CODE:
<lj-raw> <div style="width:100%;max-width:375px;height:305px;margin:0 auto;display:grid;grid-template-columns:53px 130px 10px 130px 53px;grid-template-rows:2fr 100px .5fr;gap:0;font-family:helvetica, sans serif;font-size:11px;line-height:1.3;text-align:center;color:#3f1703"> <!-- images --> <div style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:4;background:#ccc url('IMG_URL')center;background-size:cover;"></div> <div style="grid-column-start:4;grid-column-end:6;grid-row-start:1;grid-row-end:4;background:#ccc url('IMG_URL')center;background-size:cover;"></div> <!-- label --> <div style="opacity:.9;box-sizing:border-box;grid-column-start:2;grid-column-end:5;grid-row-start:2;grid-row-end:3;padding:5px;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;background:#fcfcf4;"> <!-- header --> <div style="padding:0 0 5px;font-size:15px;font-family:georgia;">CHARACTER & CHARACTER</div> <!-- nice lil divider line --> <div style="width:80%;margin:5px auto;border-top:1px solid #3f1703"></div> <!-- body --> <div style="padding:5px 10px 10px;">!! your descriptive text here !!</div> </div> <!-- CREDIT --> <div style="grid-column-start:1;grid-column-end:6;grid-row-start:4;text-align:right;"><a href="https://10billionghosts.dreamwidth.org/" style="font-size:8px;text-decoration:none;color:#CBCCDA;">CODE</a></div> </div> </div> </lj-raw>

HOW TO USE:

❣️ This code is mobile compatible! I have not tested it on InsaneJournal.

❣️ As uzh, update the two instances of IMG_URL under the heading with the URL for the images you'd like to use. These images will be set to center by default and may need to be tweaked to sit nicely. You can read up on background positioning at W3Schools!

❣️ By default, the space for text is set to 90% opacity. You can make it fully opaque by deleting "opacity:.9" from the code. You can also make it more transparent by changing it to a smaller number, so like opacity:.75, for example.

❣️ hex code #3f1703 is declared in two places: at the top of the code and toward the bottom, under the divider line section. It is the font color. Change this to change the color of text.

❣️ hex code #fcfcf4 is an off-white/yellow color used for the background of the label. It's declared only in the label section, so go there to change it, if you'd like.

❣️ Don't forget to update the header & body text!

❣️ 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!

Comments

[wirelessly]

this code is so neat and tidy! i'm using it here for a catch-all psl post, ty so much!

[10billionghosts]

Glad you like it!! Love what you've done with it. :] Good colors.

[impala_chick]

Oh this is great! I'll probably use it for a Hades game related post.

[10billionghosts]

Hades game?? eyes emoji

[ravenna]

this is so great!! is there a method to the madness of making the images bigger? i can see i'd need to add columns/rows and pick where they start and stop, but i just keep screwing it up, lol.

[10billionghosts]

Glad you like it! Actually, it can be managed from the top of the code, I belieeeeve, but it requires a bit of math. The part at the top of the code that's like

max-width:375px;height:305px;margin:0 auto;display:grid;grid-template-columns:53px 130px 10px 130px 53px;grid-template-rows:2fr 100px .5fr;

Notably, to make it wider, you'll want to change
- the max-width value
- the first two and last two grid-template-columns values (keep that 10px in place, it's the "gap" between the two portraits)

To make it taller you'll want to change
- just the height value

So like, if you want to make it, let's say 500px wide by 350px tall, you'd do this:

max-width:500px;height:350px;margin:0 auto;display:grid;grid-template-columns:60px 185px 10px 185px 60px;grid-template-rows:2fr 100px .5fr;

and here would be for 600px by 450px

max-width:600px;height:450px;margin:0 auto;display:grid;grid-template-columns:60px 235px 10px 235px 60px;grid-template-rows:2fr 100px .5fr;

I hope that helps!

[ravenna]

oooooooooohhhh i'm seeing the matrix now i think. thanks so much!!

[10billionghosts]

YAHOO I'm glad my explanation made even like 5% sense. lmk if you need more assistance! If you find yourself banging your head against the wall, you can just tell me how big you'd like it and I can probably figure the math/coding out. :]

[ravenna]

belated because i am the slowest of the slow at fiddling with stuff, but it did make sense and helped me figure it out! thanks v much for making your codes available, i've been really loving them.

[sink]

I'm using this for a psl, thank you so much! (Also in general, I have been pulling apart some codes of yours I'm not using anywhere just to learn from them, thanks for that too.)

[10billionghosts]

Glad you enjoy it and LOVE to hear that! Always a delight to hear folks picking up HTML and CSS. Genuinely hope my code helps with that. :]