Profile sheet: “Cato”

[terra]

Image Preview

The Code

This is a pretty basic floating div setup. It's designed to work as a single entry in the default dreamwidth skin. The left column is 275px wide, and your image should be 275px as well for best effect. Remember to disable auto-formatting!

<raw-code><div style="background: #fff; width: 90%; color: #000; clear: both; padding: 2em; margin: 1em auto; font: 1.1em/1.8 Helvetica, sans-serif;"> <div style="border-bottom: 1px solid #eee; margin-bottom: 1em; padding-bottom: 1em;"> <span style="display: block; font: bold 2.5em Helvetica, sans-serif;">Cato.</span> <span style="display: block; font: italic 1.2em Times New Roman, serif; letter-spacing: .05em; text-transform: uppercase;">Chains or conquest, liberty or death</span> </div> <div style="width: 35%; max-width: 275px; padding: 1em 0; box-sizing: border-box; float: left;"> <img src="http://valiantknife.org/dwidth/vigils/cato.png" style="max-width: 100%;"> <p style="font:italic 1.2em Times New Roman, serif; text-align: center;">“I guess you'd put something here.”</p></img> <span style="display: block; background: #000; color: #fff; font: bold .8em Helvetica; text-transform: uppercase; letter-spacing: .1em; padding: .25em .5em; margin: .5em 0 1em 0;">Heading</span> <!-- begin faux-table --> <div style="display: table; margin-bottom: 2em;"> <div style="display: table-row;"> <div style="display: table-cell; padding-right: 1em; font: italic 1.1em Times New Roman, serif; text-align: center; text-transform: uppercase; letter-spacing: .2em;">Name</div> <div style="display: table-cell;">Porcia Catonis filia</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-right: 1em; font: italic 1.1em Times New Roman, serif; text-align: center; text-transform: uppercase; letter-spacing: .2em;">A.K.A.</div> <div style="display: table-cell;">Something else</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-right: 1em; font: italic 1.1em Times New Roman, serif; text-align: center; text-transform: uppercase; letter-spacing: .2em;">D.O.B. / Age</div> <div style="display: table-cell;">c. 70 <span style="font-size: .9em;">BC</span>, 27.</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-right: 1em; font: italic 1.1em Times New Roman, serif; text-align: center; text-transform: uppercase; letter-spacing: .2em;">Canon</div> <div style="display: table-cell;">The Late Republic</div> </div> </div> <!-- end faux-table --> <span style="display: block; font: italic 1.2em Times New Roman, Times, serif; text-transform: uppercase; letter-spacing: .1em; margin: 1em 0 .5em 0;">Alt. Heading</span> <!-- begin faux-table --> <div style="display: table; margin-bottom: 2em;"> <div style="display: table-row;"> <div style="display: table-cell; padding-right: 1em; font: bold 1.1em Helvetica, Arial, sans-serif; text-align: center; letter-spacing: -.05em;">Name</div> <div style="display: table-cell;">Porcia Catonis filia</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-right: 1em; font: bold 1.1em Helvetica, Arial, sans-serif; text-align: center;">A.K.A.</div> <div style="display: table-cell;">Something else</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-right: 1em; font: bold 1.1em Helvetica, Arial, sans-serif; text-align: center;">D.O.B. / Age</div> <div style="display: table-cell;">c. 70 <span style="font-size: .9em;">BC</span>, 27.</div> </div> <div style="display: table-row;"> <div style="display: table-cell; padding-right: 1em; font: bold 1.1em Helvetica, Arial, sans-serif; text-align: center;">Canon</div> <div style="display: table-cell;">The Late Republic</div> </div> </div> <!-- end faux-table --> <span style="display: block; font: bold 1.5em Helvetica, sans-serif; margin-bottom: .5em;">Heading III;</span> <p>In hac habitasse platea dictumst. Vestibulum vitae dignissim nulla, ac maximus risus. Aenean rhoncus lacus sed metus malesuada sollicitudin.</p> </div> <!-- end left column --> <!-- end right column --> <div style="width: 65%; padding: 1em 0 1em 1em; box-sizing: border-box; float: right;"> <p style="font: 1.1em/2 Times New Roman, Times, serif;"><em>This is a serif paragraph.</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac diam nisl. Pellentesque pulvinar rhoncus consequat. Maecenas in dolor mattis, convallis dolor vitae, dapibus eros. In hac habitasse platea dictumst. Vestibulum vitae dignissim nulla, ac maximus risus. Aenean rhoncus lacus sed metus malesuada sollicitudin. </p> <p>Vestibulum finibus nisl at ligula imperdiet elementum. Nunc ut nunc eu lacus imperdiet fermentum. Mauris lacus arcu, elementum sed volutpat at, ullamcorper molestie nisl. Proin consectetur metus nec metus scelerisque posuere. Sed porta libero mauris, ut lobortis turpis ornare a. Morbi feugiat lacinia tincidunt.</p> <span style="display: block; font: bold 1.5em Helvetica, sans-serif; margin: 1em 0 .5em 0;">Personality;</span> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ullamcorper metus dignissim, tempus sapien quis, vestibulum erat. Nunc pharetra a arcu a varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac fermentum arcu. Proin mollis massa sed blandit egestas. Nam quis arcu convallis, auctor lectus vitae, varius metus. Sed vitae tortor ultricies mauris pretium consequat ac a risus. Etiam maximus neque at dolor elementum varius volutpat sit amet velit. Proin tempus diam a nunc bibendum venenatis. Nam in risus ex. Aenean imperdiet sollicitudin elementum. In in augue ultricies est rhoncus eleifend. Vivamus vitae ligula imperdiet, facilisis neque quis, placerat ipsum. Praesent quis lobortis nulla.</p> <span style="display: block; background: #000; color: #fff; font: bold .8em Helvetica; text-transform: uppercase; letter-spacing: .1em; padding: .25em .5em; margin: .5em 0 1em 0;">What a pity it is / That we can die but once to serve our country.</span> <p>Suspendisse at elementum quam, in eleifend eros. Donec placerat auctor quam, vel sollicitudin ipsum. Fusce vel risus vitae tortor ultricies ultrices. Ut non laoreet lectus. Suspendisse vitae sagittis sem. Nulla et dapibus ipsum. In dictum libero eget erat sodales commodo. In varius luctus pellentesque.</p> <span style="display: block; font: italic 1.2em Times New Roman, Times, serif; text-transform: uppercase; letter-spacing: .1em; margin: 1em 0 .5em 0;">Character Background;</span> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ullamcorper metus dignissim, tempus sapien quis, vestibulum erat. Nunc pharetra a arcu a varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac fermentum arcu. Proin mollis massa sed blandit egestas. Nam quis arcu convallis, auctor lectus vitae, varius metus. Sed vitae tortor ultricies mauris pretium consequat ac a risus. Etiam maximus neque at dolor elementum varius volutpat sit amet velit. Proin tempus diam a nunc bibendum venenatis. Nam in risus ex. Aenean imperdiet sollicitudin elementum. In in augue ultricies est rhoncus eleifend. Vivamus vitae ligula imperdiet, facilisis neque quis, placerat ipsum. Praesent quis lobortis nulla.</p> </div><!-- end right column --> <div style="clear: both; text-align: right; font: .9em Times New Roman, Times, serif; text-transform: uppercase; letter-spacing: 0.05em;">Code by <a href="http://vigils.dreamwidth.org/14701.html">Vigils</a>.</div> </div></raw-code>

Customizing

This profile styling is designed to be pretty flexible. I've coded a lot of sample styles in the document that you can mix and match at leisure.

Heading 1;

<span style="display: block; font: bold 1.5em Helvetica, sans-serif; margin: 1em 0 .5em 0;">Heading 1;</span>

Heading II;

<span style="display: block; font: italic 1.2em Times New Roman, Times, serif; text-transform: uppercase; letter-spacing: .1em; margin: 1em 0 .5em 0;">Heading II;</span>

Heading III;

<span style="display: block; background: #000; color: #fff; font: bold .8em Helvetica; text-transform: uppercase; letter-spacing: .1em; padding: .25em .5em; margin: .5em 0 1em 0;">Heading III;</span>

Feel free to modify this however you like, and follow me at vigils for more coding.