live preview & code for SALAD Info Pages

[10billionghosts]

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

SALAD Info Pages is mostly here to provide you with some easy starting points -- each one is just a repetition of a given style of "info box" subsection. You can see a live preview of each one and grab its code below.

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!

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

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

INFORMATION:

locales

Descriptive Title.

Cotton candy bonbon sesame snaps tart chocolate cake sugar plum. Cupcake toffee jujubes fruitcake tiramisu gummies lollipop jelly beans.

Descriptive Title.

Ice cream dragée sugar plum bear claw oat cake donut dragée chocolate bar pastry. Halvah croissant fruitcake ice cream halvah donut shortbread. Cake tiramisu powder cookie gingerbread jelly-o icing. Macaroon lemon drops candy canes chupa chups pie sweet marzipan soufflé.

Descriptive Title.

Pie lemon drops jelly beans bonbon carrot cake pie jelly. Cake bonbon chupa chups pastry wafer candy croissant brownie oat cake. Chocolate cake sesame snaps pie dragée bear claw.

Descriptive Title.

Cake tiramisu powder cookie gingerbread jelly-o icing. Macaroon lemon drops candy canes chupa chups pie sweet marzipan soufflé.

code

SALAD Info Page (Locales) uses only image-on-top text-on-bottom info boxes. It comes with four of them (two rows) by default, but you can, of course, add more or remove some if you'd like. It works really well for brief blurbs about important locations (hence the name), but can be used for pretty much anything you might want to categorize and then talk about.

INFO PAGE (locales) 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"> <!-- //CONTENT BELOW HERE// --> <!-- HEADER --> <div style="box-sizing:border-box;width:100%;display:flex;flex-wrap:wrap;justify-content:end;align-items:end;align-content:end;gap:0;color:#fff;"> <div style="width:100%;margin:0;padding:0;font-size:30px;line-height:1.2;text-align:right;font-weight:bold;font-style:italic;border-bottom:4px dotted #fff;">INFORMATION:</div> <div style="width:100%;margin-top:-2px;padding-right:5px;font-size:15px;text-align:right;text-transform:lowercase;font-variant:small-caps;">subheader</div> </div> <!-- HEADER end --> <!-- {two image boxes across} --> <!-- text box one --> <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;"> <legend style="box-sizing:border-box;width:100%;height:150px;padding:2%;margin:0 0 10px;display:flex;flex-wrap:wrap;justify-content:end;align-items:end;align-contents:end;border:5px solid #fff;font-size:18px;line-height:1.2;text-align:right;font-weight:bold;border-radius:12px;text-shadow:1px 1px 0px #5c4677, 0px 0px 2px #5c4677;background:#ccc url('IMG_URL')center;background-size:cover;color:#fff">Descriptive Title.</legend> <div style="box-sizing:border-box;width:100%;padding:4%;border-radius:12px;background:#fff;"></lj-raw>!! description here !!<lj-raw></div></fieldset> <!-- text box 2 --> <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;"> <legend style="box-sizing:border-box;width:100%;height:150px;padding:2%;margin:0 0 10px;display:flex;flex-wrap:wrap;justify-content:end;align-items:end;align-contents:end;border:5px solid #fff;font-size:18px;line-height:1.2;text-align:right;font-weight:bold;border-radius:12px;text-shadow:1px 1px 0px #5c4677, 0px 0px 2px #5c4677;background:#ccc url('IMG_URL')center;background-size:cover;color:#fff">Descriptive Title.</legend> <div style="box-sizing:border-box;width:100%;padding:4%;border-radius:12px;background:#fff;"> </lj-raw>!! description here !!<lj-raw> </div></fieldset> <!-- end {two image boxes across} --> <!-- {two image boxes across} --> <!-- text box one --> <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;"> <legend style="box-sizing:border-box;width:100%;height:150px;padding:2%;margin:0 0 10px;display:flex;flex-wrap:wrap;justify-content:end;align-items:end;align-contents:end;border:5px solid #fff;font-size:18px;line-height:1.2;text-align:right;font-weight:bold;border-radius:12px;text-shadow:1px 1px 0px #5c4677, 0px 0px 2px #5c4677;background:#ccc url('IMG_URL')center;background-size:cover;color:#fff">Descriptive Title.</legend> <div style="box-sizing:border-box;width:100%;padding:4%;border-radius:12px;background:#fff;"></lj-raw>!! description here !!<lj-raw></div></fieldset> <!-- text box 2 --> <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;"> <legend style="box-sizing:border-box;width:100%;height:150px;padding:2%;margin:0 0 10px;display:flex;flex-wrap:wrap;justify-content:end;align-items:end;align-contents:end;border:5px solid #fff;font-size:18px;line-height:1.2;text-align:right;font-weight:bold;border-radius:12px;text-shadow:1px 1px 0px #5c4677, 0px 0px 2px #5c4677;background:#ccc url('IMG_URL')center;background-size:cover;color:#fff">Descriptive Title.</legend> <div style="box-sizing:border-box;width:100%;padding:4%;border-radius:12px;background:#fff;"> </lj-raw>!! description here !!<lj-raw> </div></fieldset> <!-- end {two image boxes across} --> <!-- //CONTENT ABOVE HERE// --> </div> <!-- credit --> <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> <!-- credit --></lj-raw>

INFORMATION:

headliner

Dragée tootsie roll pastry halvah gummi bears candy toffee donut donut. Jujubes brownie cotton candy carrot cake candy canes shortbread. Jelly-o shortbread cupcake marshmallow jelly beans chupa chups muffin candy dragée.

Gingerbread candy danish sesame snaps bear claw sesame snaps. Halvah chocolate bar ice cream cookie donut cake jelly beans. Gummi bears brownie gummi bears candy canes dessert gingerbread. Cake topping chocolate sweet roll candy cake.

Dragée tootsie roll pastry halvah gummi bears candy toffee donut donut. Jujubes brownie cotton candy carrot cake candy canes shortbread. Jelly-o shortbread cupcake marshmallow jelly beans chupa chups muffin candy dragée.

Gingerbread candy danish sesame snaps bear claw sesame snaps. Halvah chocolate bar ice cream cookie donut cake jelly beans. Gummi bears brownie gummi bears candy canes dessert gingerbread. Cake topping chocolate sweet roll candy cake.

code

SALAD Info Page (Headliner) uses only side-by-side alternating text / image rows. Great for things like NPCs or divisions/departments/houses.

INFO PAGE (headliner) 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"> <!-- //CONTENT BELOW HERE// --> <!-- HEADER --> <div style="box-sizing:border-box;width:100%;display:flex;flex-wrap:wrap;justify-content:end;align-items:end;align-content:end;gap:0;color:#fff;"> <div style="width:100%;margin:0;padding:0;font-size:30px;line-height:1.2;text-align:right;font-weight:bold;font-style:italic;border-bottom:4px dotted #fff;">INFORMATION:</div> <div style="width:100%;margin-top:-2px;padding-right:5px;font-size:15px;text-align:right;text-transform:lowercase;font-variant:small-caps;">subheader</div> </div> <!-- HEADER end --> <!-- INFO / IMAGE --> <!-- {info} --> <div style="box-sizing:border-box;flex:1 1 46%;min-width:250px;height:250px;overflow:auto;scrollbar-width:thin;align-self:stretch;padding:2.5%;border-radius:12px;background:#fff;"> </lj-raw>!! your content here !!<lj-raw> </div> <!-- {info} end --> <!-- {image} --> <div style="box-sizing:border-box;flex:1 1 46%;min-width:250px;height:250px;align-self:stretch;padding:2.5%;border-radius:12px;border:5px solid #fff;background:#ccc url('IMG_URL')center;background-size:cover;"></div> <!-- {image} end --> <!-- end INFO / IMAGE --> <!-- DIVIDER --> <div style="width:90%;height:0;border-top:4px dotted #fff;"></div> <!-- DIVIDER end --> <!-- IMAGE / INFO --> <!-- {image} --> <div style="box-sizing:border-box;flex:1 1 46%;min-width:250px;height:250px;align-self:stretch;padding:2.5%;border-radius:12px;border:5px solid #fff;background:#ccc url('IMG_URL')center;background-size:cover;"></div> <!-- {image} end --> <!-- {info} --> <div style="box-sizing:border-box;flex:1 1 46%;min-width:250px;height:250px;overflow:auto;scrollbar-width:thin;align-self:stretch;padding:2.5%;border-radius:12px;background:#fff;"> </lj-raw>!! your content here !!<lj-raw> </div> <!-- {info} end --> <!-- end IMAGE / INFO --> <!-- //CONTENT ABOVE HERE// --> </div> <!-- credit --> <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> <!-- credit --></lj-raw>

INFORMATION:

block

section name.

Croissant topping chocolate bar bear claw tart ice cream gingerbread. Donut bonbon muffin cake chocolate marshmallow chocolate bar lollipop. Jelly beans powder cake cotton candy dragée jelly beans oat cake halvah jujubes. Dragée candy halvah pastry sesame snaps muffin toffee gummies pudding. Candy canes liquorice macaroon chocolate cake bear claw apple pie chocolate dragée sweet roll. Cookie sugar plum jujubes sweet tiramisu shortbread.

Lollipop marzipan dessert sugar plum cheesecake apple pie. Shortbread fruitcake gummi bears chupa chups danish. Candy canes candy canes powder toffee cotton candy tootsie roll croissant apple pie croissant. Gingerbread chupa chups carrot cake ice cream cupcake. Candy canes lemon drops marshmallow liquorice powder shortbread toffee. Soufflé icing powder sesame snaps chocolate bar.

a longer section name.

Jelly beans oat cake lollipop sweet roll toffee chocolate cake. Danish liquorice jujubes chocolate cake liquorice shortbread muffin chocolate cake sweet roll. Tiramisu chupa chups sweet lemon drops fruitcake caramels apple pie.

Pudding caramels jelly bear claw oat cake danish gingerbread powder. Lollipop cake gummi bears lollipop chocolate cake topping. Marzipan bonbon powder jelly bear claw. Shortbread chocolate tootsie roll fruitcake croissant. Caramels gummi bears brownie jelly beans tootsie roll fruitcake pudding lollipop.

code

SALAD Info Page (Block) is for big wall-o-text style entries like rules, FAQ, or premise pages. By default it comes with just one labeled section, but as you can see in the live example, you can add more without issue.

INFO PAGE (block) 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"> <!-- //CONTENT BELOW HERE// --> <!-- HEADER --> <div style="box-sizing:border-box;width:100%;display:flex;flex-wrap:wrap;justify-content:end;align-items:end;align-content:end;gap:0;color:#fff;"> <div style="width:100%;margin:0;padding:0;font-size:30px;line-height:1.2;text-align:right;font-weight:bold;font-style:italic;border-bottom:4px dotted #fff;">INFORMATION:</div> <div style="width:100%;margin-top:-2px;padding-right:5px;font-size:15px;text-align:right;text-transform:lowercase;font-variant:small-caps;">subheader</div> </div> <!-- HEADER end --> <!-- SECTION --> <div style="box-sizing:border-box;width:100%;padding:10px;border-radius:12px;background:#fff;"> <div style="box-sizing:border-box;padding:9px 10px;margin:-15px 10px 0 -15px;float:left;font-size:13px;font-weight:bold;text-transform:lower-case;font-variant:small-caps;border-radius:12px;background:#e0d7ea;">section name.</div> </lj-raw>!! your content here !!<lj-raw> </div> <!-- SECTION end --> <!-- //CONTENT ABOVE HERE// --> </div> <!-- credit --> <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> <!-- credit --></lj-raw>