Recolle Simple CR Code

[randomtology]

Hey guys it's been a bit! So I joined recolle recently, and it's been a lot of fun! As such, I felt inspired to make a simple CR code that kinda matches the Retrospect layout.




Live Preview


CODE:
<raw-code><div id="container" style="display: block; width: 100%;"> <!--START CHART--> <center> <!--START CR ENTRY--> <div style="display: inline-block; background-color: #FFF; width: 325px; height: 110px; margin: 5px; border-radius: 5px; border: 1px solid rgba(0, 153, 255, 0.6); box-shadow: 1px 1px 0px #47738E;"> <!--START ICON--> <div style="display: inline-block; margin: 5px;"> <img src="ICON-URL HERE" style="border-radius: 50px; border: 1px solid #0055ee;"></div> <!--END ICON--> <!--START INFO--> <div style="display: inline-block; width: 203px; height: 100px; float: right; margin: 5px;"><div style="border-bottom: 1px solid #0099ff;"><div style="height: 35px; text-align: left; padding-left: 5px"> <span style="font-size: 15px; font-family:helvetica; color:#0055ee; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #47738E 0px 1px 1px;">AU Name</span></div> <div style="height: 20px; text-align: left; padding-left: 5px;"><span style="font-family: helvetica, arial, sans-serif; font-size:10px; color:#888; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"> <a href="URL" style="text-decoration: none; color: #888;">Journal</a> <img src="http://i.imgur.com/grmg3D7.png" style="width:10px;"> Canon Name <!--leave blank if same name--></span></div></div> <div style="height: 45px; text-align: left; padding-left: 5px; padding-top: 5px; font-family: helvetica, arial, sans-serif; color:#888; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;">Short Blurb.</div></div> <!--END INFO--> </div> <!--END CR ENTRY--> </center> <!--END CHART--> </div></raw-code> <div style="text-align: center; font-family: verdana; font-size: 90%; font-variant: small-caps;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div>

NOTES:

The text area allows for about 2-3 small lines of text. Someday I might make a version that'll allow for more text, but I wanted to keep this simple.

Downside is superlong names can sometimes mess up the code. You can lower the font size or just shorten the name somehow.

I do request/recommend uploading your own version of the Retrospec flower just to save on bandwidth.

This is compatible with Slip's CR chart automation algorithm, so take advantage of that if you wish.

Modifications are totally fine. I'd love to see what you do with it though!

Comments are nice but not necessary. However, please leave the credit line on!