10billionghosts | live preview & code for SALAD Event

What's Up?

Halvah danish tiramisu chupa chups chocolate bar sesame snaps croissant. Dessert tootsie roll soufflé dragée cake jujubes sugar plum jelly. Powder pastry cheesecake chupa chups carrot cake cheesecake caramels. Macaroon pie powder candy canes chocolate croissant.

Apple pie ice cream muffin wafer cake croissant apple pie brownie marshmallow. Bear claw chupa chups bonbon gummi bears caramels gummies cake cookie chocolate bar. Lollipop cake danish wafer soufflé. Candy gingerbread jujubes cheesecake jelly lollipop dragée.

Volunteer Slots

Ice cream marshmallow pastry powder pie [bear claw] donut. Ice cream powder liquorice carrot cake apple pie.

Jelly cookie [apple pie] apple pie bear claw.

Chocolate carrot cake sugar plum [brownie] halvah. Carrot cake jelly beans pie bonbon apple pie candy.

Chocolate bar [jelly beans] icing bear claw biscuit oat cake dragée topping cookie.

Header Text

Bear claw apple pie chupa chups liquorice chocolate bar pastry pastry cake lemon drops. Lollipop liquorice toffee gingerbread jelly-o chocolate bar jelly. Carrot cake biscuit lollipop topping chupa chups soufflé danish shortbread. Chocolate cake chocolate oat cake lemon drops marzipan sugar plum.

Chocolate brownie pastry gingerbread dragée candy canes cake candy canes chocolate cake. Cake sugar plum ice cream tiramisu wafer bonbon topping. Jelly beans oat cake candy jelly beans cake dessert.

code

This is the release post for the SALAD set's IC/OOC code. Don't forget to head over to the SALAD release hub to see the other codes released as part of this pack!

SALAD Event is my obligatory pre-styled event code for the SALAD set. Out of the box, it comes with a header that makes for a built-in fake LJ-cut -- you can edit out the fake LJ-cut part. It also features a few areas for text, a simple 4-image aesthetic board, and a pre-styled textarea.

Grab the code below, check the bottom of the post for a screenshot of how the fake LJ-cut will look on a journal feed, and don't forget to read the instructions!

EVENT CODE:

<lj-raw><div style="box-sizing:border-box;max-width:700px;width:100%;margin:0 auto;padding:3%;display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;align-content:start;gap:20px;font-family:arial, helvetica, sans serif;font-size:12px;line-height:1.5;border-radius:12px;border:5px solid #232323;box-shadow:6px 5px 0 #232323;background:#5c4677 url('BG_HERE');color:#5c4677">

<div style="width:100%;display:grid;grid-template-columns:1fr 2fr 1fr;grid-template-rows:100px 80px;gap:20px;">

<div style="transform: rotate(0);grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:3;min-width:100px;margin-right:-10px;border-radius:50% 0 0 50%;border:5px solid #fff;background:#ccc url('IMG_URL')center;background-size:cover;"></div>

<div style="transform: rotate(0);grid-column-start:1;grid-column-end:4;grid-row-start:2;grid-row-end:3;margin-top:-15px;display:flex;justify-content:center;align-items:end;align-content:center;color:#fff;">

<a href="#ENTRY_URL" style="text-decoration:none;width:100%;padding-bottom:10px;font-size: clamp(25px, 3vw, 30px);text-align:center;font-weight:bold;font-style:italic;text-shadow:1px 1px 0px #5c4677, 0px 0px 2px #5c4677;color:#fff;">!! Event Name !!</a>

</div>

<div style="grid-column-start:1;grid-column-end:4;grid-row-start:2;grid-row-end:3;display:none"><lj-cut></div>

</div>

<fieldset style="box-sizing:border-box;flex:1 1 46%;min-width:250px;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:stretch;border:0;">

<div style="box-sizing:border-box;width:100%;padding:4%;border-radius:12px;background:#fff;"></lj-raw>!! your content here !!<lj-raw></div></fieldset>

<fieldset style="box-sizing:border-box;flex:1 1 46%;min-width:250px;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:stretch;border:0;">

</lj-raw>!! your content here !!<lj-raw>

</div></fieldset>

<div style="width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-contents:start;gap:20px;">

</div>

<fieldset style="width:100%;padding:0;margin:0;border:0;">

<legend style="box-sizing:border-box;width:100%;padding:0 2% 0;font-size:18px;font-weight:bold;text-align:right;color:#fff;">Header Text</legend>

</lj-raw>!! your content here !!<lj-raw>

<center><div><div style="box-sizing:border-box;width:250px;height:100px;padding:5px;margin:0 0 5px 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;border:3px solid #232323;border-radius:12px;box-shadow:6px 5px 0 #232323;background:#e0d7ea;">

<textarea style="box-sizing:border-box;width:100%;height:100%;border:0;box-shadow:none;outline:none;resize:none;overflow:auto;scrollbar-width:thin;scroll-padding:5px;scrollbar-color:#232323 #98b0ba;font-size:11px;background:transparent;color:#5c4677">!! your content here !!</textarea></div></div></center>

</div></fieldset>

</div>

<div style="max-width:700px;width:100%;margin:5px auto;text-align:right;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ccc;">code</a></div>
</lj-raw>

HOW TO USE:

❣️ Mind those lj-raw tags!!

❣️ This code is mobile compatible and insane journal friendly!

❣️ While this set is modular, it doesn't make for good Frankenstein fodder. What that means is, I can't guarantee it'll play nice with other codes outside the set (like '98, TAYNE, or codes made by other creators) without some amount of code tweaking, so combine with other codes at your own risk.

❣️ You can apply a seamless tiling background to the outer wrapper. 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!

❣️ To utilize the fake LJ-cut, you need to first post the code. Next, copy the link to the post, edit the post, and replace the placeholder text #ENTRY_URL with the URL for the post.

❣️ Don't want the fake LJ-cut? Here's a quick way to remove that functionality:

Remove href="#ENTRY_URL" from the code entirely. Just delete that part. Leave everything else around it.

Delete everything from  to .

If you don't want to commit reading page crimes, please add a new LJ cut to the very top of your post.

❣️ Add additional subsections by pasting full codes where indicated. Comments within the code indicate where to add new subsections and where those sections begin and end. You can add as many subsections as you want. Everything will auto-scale!

❣️ Any default section can be removed by deleting the entirety of its code. Each section has been commented so you can do this more easily.

❣️ Don't forget to update placeholder text like headers!

❣️ Any sub-sections that can take text will scale vertically with the amount of text you add, so you can add as much as you'd like!

❣️ The circular image board is just a flex grid with some pictures in it. Replace IMG_URL with the url for any image and it'll auto-scale and auto-center. You can add or remove circles as you like. I just think it looks best across desktop and mobile resolutions with four images.

❣️ By default, colors are standard for all standalone codes and subsections. I encourage you to customize them! Here're the hex codes you'll want to update:

hex code #5c4677 - used extensively throughout code; definitely use find and replace to update.

hex code #fff - white. sub-section background color and font color.

hex code #232323 - used for borders and shadows.

hex code #e0d7ea - used for some accents.

❣️ This code contains a credit link. I'd appreciate if you'd left it in!

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

With the fake LJ-cut, this is what the code will look like on a standard journal feed:

live preview & code for SALAD Event

no subject

no subject