10billionghosts | code: fyi - a barebones informational template (Reply)

header #1
subheader

link #1 . link #2 . link #3

Cotton candy cookie bear claw ice cream. Macaroon powder cotton candy candy canes oat cake. Gummies cupcake brownie.

Chocolate cake danish sweet roll jelly-o wafer. Sesame snaps macaroon chocolate bar powder muffin donut carrot cake chocolate cake. Cheesecake lollipop candy canes tootsie roll icing. Pastry gummies lemon drops chupa chups.

header #2
with a subheader

This is how a list would look in this code.

You can obviously style a list like this more to make it a little prettier.

header #3

Fruitcake pie jelly-o. Cookie icing chocolate cake cake. Jelly cookie dragée tootsie roll jelly-o chupa chups. Wafer liquorice tootsie roll donut.

Dessert topping chocolate. Jelly chupa chups marzipan danish ice cream tart sesame snaps. Oat cake lemon drops fruitcake croissant icing apple pie bonbon tiramisu lollipop.

NOTE 9/27/2021: This code is totally shit up on mobile. It works on IJ and on desktop dreamwidth. It's on my list of codes to fix, but not high priority. Use at own risk etc.

Original description follows

So I just joined a game where everybody uses pretty code to do their intro posts and whipped this up real quick so I could fit in. Sunglasses emoji. This is a very customizable little form if you aren't afraid to poke at HTML and really the main feature is the headers. I used this for solid paragraph writing, but with a little bit of elbow grease, you could turn this into an app form or fill it with little mood boards. Whatever floats your boat, really.

Here's the code:

<lj-raw>
<div style="max-width:550px;min-width:500px;margin:10px auto;padding:15px 15px 30px 15px;background:#fff;border:1px solid #eee;border-radius:4px;">

<div style="width:500px;height:110px;display:inline-block;">
<div style="width:112px;height:110px;background:#fff;border-radius:50%;border-right:1px solid #ccc;float:left;">
<div style="width:100px;height:100px;background:#ccc url('IMG_1')center;background-size:cover;border-radius:50%;margin:0;position:relative;top:5px;left:5px;">
</div>
</div>
<div style="width:387px;height:15px;border-bottom:1px solid #ccc;float:right;position:relative;top:40px;font-family:verdana, arial, sans serif;font-size:15px;text-align:right;font-variant:small-caps;color:#ccc;line-height:.9"><b>!!header text!!</b><br/>!!subheader!!</div>
<div style="clear:both"></div>
</div>

<div style="width:380px;margin:-45px 0 -10px 115px;font-family:helvetica, arial, sans-serif;font-size:12px;text-align:justify;color:#333333;line-height:1.5">
</lj-raw><a href="#" style="font-variant:small-caps;text-decoration:none;color:#333333"><b>link #1</b></a> . <a href="#" style="font-variant:small-caps;text-decoration:none;color:#333333"><b>link #2</b></a> . <a href="#" style="font-variant:small-caps;text-decoration:none;color:#333333"><b>link #3</b></a>

<lj-raw></div>

<div style="width:500px;height:110px;display:inline-block;">
<div style="width:112px;height:110px;background:#fff;border-radius:50%;border-right:1px solid #ccc;float:left;">
<div style="width:100px;height:100px;background:#ccc url(IMG_2)center;background-size:cover;border-radius:50%;margin:0;position:relative;top:5px;left:5px;">
</div>
</div>
<div style="width:387px;height:15px;border-bottom:1px solid #ccc;float:right;position:relative;top:40px;font-family:verdana, arial, sans serif;font-size:15px;text-align:right;font-variant:small-caps;color:#ccc;line-height:.9"><b>!!header text!!</b><br/>!!subheader!!</div>
<div style="clear:both"></div>
</div>

<lj-raw></div>

<div style="width:500px;height:110px;display:inline-block;">
<div style="width:112px;height:110px;background:#fff;border-radius:50%;border-right:1px solid #ccc;float:left;">
<div style="width:100px;height:100px;background:#ccc url('IMG_3')center;background-size:cover;border-radius:50%;margin:0;position:relative;top:5px;left:5px;">
</div>
</div>
<div style="width:387px;height:15px;border-bottom:1px solid #ccc;float:right;position:relative;top:40px;font-family:verdana, arial, sans serif;font-size:15px;text-align:right;font-variant:small-caps;color:#ccc;line-height:.9"><b>!!header text!!</b><br/>!!subheader!!</div>
<div style="clear:both"></div>
</div>

<lj-raw></div>

</div></lj-raw>

HOW TO USE
❣️ Keep the lj-raw tags!!

❣️ Paste into a new blank post. This form works best behind an LJ-cut, since it is set to a width of 500px.

❣️ The image spaces are designed to hold 100x100 images -- icons -- but will accommodate and resize just about any image you put in. Be sure to use images that are well centered for best results. Gifs work here, too.

❣️ To replace images search for the IMG_1, IMG_2, and IMG_3 and replace those words with image urls.

❣️ Customize the line and text color in each header by changing #ccc to whatever color hexcode you'd like.

❣️ Customize the font color of each body area by changing #333333 to whatever color hexcode you'd like.

❣️ Anything marked out by exclamation points !!like this!! is for you to fill in with your own text.

❣️ You don't need subheaders on any of the header text. Just delete out the !!subheader!! text and it should still work.

❣️ You can add as many headers and text areas as you want, tbh. Just copy paste everything between a 'SECTION HEADER' tag to the first 'END BODY AREA' tag and post that in-between the two tags labeled 'PUT ADDITIONAL HERE' and 'END ADDITIONAL'

As always, I do not require credit, but it is appreciated. I love to see what people have done with my code, so drop me a comment with a link if you decide to use!

This code is compatible with InsaneJournal, and was actually written with that site in mind.

code: fyi - a barebones informational template

Post a comment in response: