Rp Tutorials

I found this code on a journal that I absolutely adored and wanted to use, but I can't seem to make it show up in my journal. You can see it if you go to the page itself which isn't what I was going for.

Since I snagged the code from page source, I'm sure I got something wrong and don't have the journal's original code source to see where they got it and find a solution.

Any help would be appreciated, even if it's a point in the right direction.

<center><br><table cellpadding="0" cellspacing="0" style="-webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); transform: rotate(-2deg);"><tbody><tr><td><center><table cellpadding="0" cellspacing="0" style="background:white; padding: 6px 6px 6px; text-align: center; text-decoration: none; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .3); -moz-box-shadow: 0 2px 4px rgba(0,0,0,.3); box-shadow: 0 2px 4px rgba(0,0,0,.3);"><tbody><tr><td height="141" width="250" align="left" valign="top" background="https://31.media.tumblr.com/e5d661e903a00714352035dda82e0621/tumblr_mzb9swQVDU1qly9gho2_250.gif"></td></tr></tbody></table><font style="font-family: calibri;font-size: 6px;font-weight: lighter;letter-spacing: 1px;line-height: 14px;text-transform:uppercase;"><a href="http://airialanmod.insanejournal.com/">Airialan</a> ・ <a href="http://athaisce.insanejournal.com/2001/01/01/">customs</a> ・ <a href="http://asylums.insanejournal.com/airialanlines/">scenes</a> ・ awaiting production</font></center></td></tr><tr><td height="8"></td></tr></tbody></table></center>

<center><br><table cellpadding="0" cellspacing="0" style="-webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); transform: rotate(-2deg);"><tbody><tr><td><center><table cellpadding="0" cellspacing="0" style="background:white; padding: 6px 6px 6px; text-align: center; text-decoration: none; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .3); -moz-box-shadow: 0 2px 4px rgba(0,0,0,.3); box-shadow: 0 2px 4px rgba(0,0,0,.3);"><tbody><tr><td height="141" width="250" align="left" valign="top" background="https://31.media.tumblr.com/cf639fd3bacb63b96981ee0ea3775bf1/tumblr_my9tu9Uo3J1qjnqapo1_500.gif"></td></tr></tbody></table><font style="font-family: calibri;font-size: 6px;font-weight: lighter;letter-spacing: 1px;line-height: 14px;text-transform:uppercase;"><a href="http://airialanmod.insanejournal.com/">Airialan</a> ・ <a href="http://athaisce.insanejournal.com/2001/01/01/">customs</a> ・ <a href="http://asylums.insanejournal.com/airialanlines/">scenes</a> ・ awaiting production</font></center></td></tr><tr><td height="8"></td></tr></tbody></table></center>

Edit: Picture!

Layout Code:

GLOBAL_HEAD<=
<title>Elven Ward</title>
<link href='http://fonts.googleapis.com/css?family=Seaweed+Script' rel='stylesheet' type='text/css'>
<style type="text/css">

/* Layout credit: ~coding@insanejournal.com; join/contact with any questions! */

@font-face {font-family:"wideopen";src:url('http://static.tumblr.com/7glhdxz/K8Wmgevib/kgeyeswideopen.ttf');}

body {background-color:#e1e1e1;}
table {border:1px solid #FFA300; border-bottom: 2px dotted #AA891E;}
table table {border:0;}
td {font-family:arial; font-size:12px; line-height:12px; letter-spacing:1px;}
body, td {color:#9b3326;}
.shadowed, .ljshadowed, td, .entrybox {color:#df8383; background:#ffffff;}
.shadowed img {border-radius:100px; border:1px dashed #ff5200; padding: 3px;}
.shadowed {background-image:url(http://i.imgur.com/KTw0UNd.png);}
td.caption {font-size:0px; line-height:0px;}

/* link effects. */
a {color:#a66f00; text-decoration:none;}
a:hover {color:#404040; cursor:default; text-decoration:none;}

/* namefield. */
.shadowed td div {font-family:seaweed script; font-size:26pt; line-height:12pt; letter-spacing:0px; text-shadow:#a66f00 2px 2px 2px; color:#ffb6b6;}

/* top right navigation links. */
.index {font-family:consolas, arial; font-size:8px; line-height:8px; text-transform:uppercase; color:#888888;}

/* top banner main navigation links. */
table table table table td.meta {font-family:consolas, arial; font-size:8px; line-height:8px; text-transform:uppercase; color:#888888;}

/* subject lines. */
p table table td.caption {font-family:seaweed script; font-size:22px; line-height:10px; letter-spacing:0px; text-transform:lowercase; color:#ffffff; text-shadow:#000000 0px 0px 1px; background-image:url(http://i.imgur.com/trWYK.jpg);}

/* date & time. */
.entrybox td.index {font-family:arial; font-size:8pt; line-height:8px; letter-spacing:0px; text-transform:uppercase; color:#b98d46; background-image:url(http://i.imgur.com/trWYK.jpg);}

/* mood & music. */
p table table table td.meta {font-family:consolas, arial; font-size:7px; line-height:9px; letter-spacing:1px; text-transform:uppercase; color:#888888;}

/* comments. */
.comments {font-family:consolas, arial; font-size:8px; line-height:7px; text-transform:uppercase; color:#888888;}

/* image opacity. */
img {opacity:0.6;}
img:hover {opacity:1.0; -webkit-transition-duration:1s;}

/* friends page icons & users. */
.entrybox a.index {background-color:#ffffff; color:#dddddd; font-size:8px; text-transform:uppercase;}

/* usericons & locks. */
.ljuser img {display:none;}
.ljuser:before {content: "★";}
.caption img{width:8px; height:8px;}
</style>

<=GLOBAL_HEAD

FRIENDS_TALK_LINKS=><tr><td align="right" valign="bottom" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments">%%readlink%% <a href="%%urlpost%%">[Whisper]</a></td></tr>

LASTN_TALK_READLINK=>[%%messagecount%% <a href="%%urlread%%">Whispered Words]</a>

LASTN_DATE_FORMAT=><span style="color:#ffffff;">%%dayshort%%, %%dd%% %%monshort%% %%yyyy%% at %%12h%%:%%min%%%%ampm%%</span>

FRIENDS_TALK_READLINK=>[%%messagecount%% <a href="%%urlread%%">Whispered Words]</a>

FRIENDS_DATE_FORMAT=><span style="color:#ffffff;">%%dayshort%%, %%dd%% %%monshort%% %%yyyy%% at %%12h%%:%%min%%%%ampm%%</span>

LASTN_TALK_LINKS=><tr><td align="right" valign="bottom" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments">%%readlink%% <a href="%%urlpost%%">[Whisper]</a></td></tr>

Tags: coding: character profile

Oct. 13th, 2013

mistojen

rp_tutorials

mistojen

rp_tutorials

[No Subject]

mistojen

rp_tutorials

Oct. 13th, 2013 at 3:32 AM

mistojen

rp_tutorials

Okay...long time lurker, first time poster here. To practice my CSS skills now that I'm actually in school and I need to be able to successfully implement them for grades instead of just pretteh IJs, I decided to give a character profile a try. It looks good, except there are some hiccups. First, I...don't even know what's going on with the line that IJ has going, but instead of being under my character bio, it's to the right which makes the horizontal scroll pop up and is basically ruining my life, HOW DO fix it? lol

Second, I know there has GOT to be a better way to get that middle section to stay where it is without shifting the right floating div down, but I've tried everything and I can't get it to work, so basically, if you have an image that's any other size at all...the whole thing is jacked up. Anybody willing to take a look and help a beginner get better? I implemented the code here on a journal I'm not using at the moment.

Here's the coding:

<lj-raw><div id="profile" style="color: #000; width: 900px; margin: 0 auto; text-align: justify; padding-top: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 110%;">
        <img src="http://i.imgur.com/XeSmyCi.jpg" width="480px" height="200px" style="-moz-border-radius: 240px / 10px;-webkit-border-radius: 240px / 100px; border-radius: 240px / 100px;">

<div id="basic" style="background: #FFF; width: 200px; height: 200px; float: left; text-align: left; padding: 5px;">
        <br /><br /><br />
    <div class="allthethings" style="font-family: Georgia, serif; font-size: 18px; font-style: italic; font-weight: bold; text-transform: lowercase; color: #139FE7; margin-top: 5px; margin-bottom: 10px;">basics</div>
    <b><small>NAME:</small></b> Name Goes Here<br />
    <b><small>NICKNAMES:</small></b> Nicknames Go Here<br />
    <b><small>AGE:</small></b> Age Goes Here<br />
    <b><small>SEXUALITY:</small></b> Sexual Orientation Goes Here<br />
    <b><small>MARITAL STATUS:</small></b> Marital Status Goes Here<br />
    <b><small>ORIGIN:</small></b> Origin Goes Here<br />
    </div>

<div id="appear" style="background: #FFF; width: 200px; height: 200px; float: right; padding: 5px;">
        <br /><br /><br />
    <div class="allthethings" style="font-family: Georgia, serif; font-size: 18px; font-style: italic; font-weight: bold; text-transform: lowercase; color: #139FE7; margin-top: 5px; margin-bottom: 10px;">appearance</div>
    <b><small>HEIGHT:</small></b> Height Goes Here<br />
    <b><small>BUILD:</small></b> Build Go Here<br />
    <b><small>EYES:</small></b> Eye Color Goes Here<br />
    <b><small>HAIR:</small></b> Hair Color Goes Here<br />
    <b><small>EXTRA:</small></b> Piercings/Tats/Scars/Etc. Go Here<br />
    <b><small>PB:</small></b> Played By Goes Here<br />
    </div>
    
    <div id="bottom" style="float: left; width: 880px; background: #FFF; padding: 10px;">
    <div class="section" style="background: #FFF; width: 880px; height: 200px; float: right; padding: 5px;">
    <div class="allthethings" style="font-family: Georgia, serif; font-size: 18px; font-style: italic; font-weight: bold; text-transform: lowercase; color: #139FE7; margin-top: 5px; margin-bottom: 10px;">personality</div>
    Aliquam in purus in nunc placerat porta at at ligula. Quisque tristique enim et leo ullamcorper, sed mattis massa dignissim. Ut laoreet aliquam quam, eget adipiscing ipsum consequat at. Donec sit amet tempor sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam malesuada sodales risus. Praesent id nisl nec lectus placerat ornare eu sed lorem. Duis id quam at urna laoreet consectetur. Maecenas et arcu quis nisl molestie tempus. Phasellus quis purus a justo malesuada consequat. Nulla blandit ante tortor, quis bibendum nisl aliquet dictum. Quisque et condimentum eros, sit amet imperdiet ligula. Quisque porta dignissim elementum. Phasellus at arcu tempus nisi ullamcorper fringilla.
    <br /><br />
    Suspendisse malesuada consequat ipsum, et varius erat molestie sed. Aenean vitae tincidunt massa. Integer ipsum elit, semper quis elementum vel, tristique ac felis. Cras mattis massa a feugiat blandit. Cras cursus gravida risus, id sodales mi egestas a. Mauris at mi quis turpis suscipit imperdiet non ac massa. Ut quis nisi luctus, dignissim justo vel, pharetra odio. Sed eleifend arcu ac ultricies consequat. Donec cursus felis ut nunc malesuada, non molestie elit malesuada. 
    </div>
    
    <div id="icons" style="width: 900px; padding: 20px;">
    <img src="http://i.imgur.com/XeSmyCi.jpg" style="width:100px; -moz-border-radius: 100px;-webkit-border-radius: 100px; border-radius: 75px; margin-left: 100px;"> <img src="http://i.imgur.com/XeSmyCi.jpg" style="width:100px; -moz-border-radius: 100px;-webkit-border-radius: 100px; border-radius:100px; margin-left: 75px;">  <img src="http://i.imgur.com/XeSmyCi.jpg" style="width:100px; -moz-border-radius: 100px;-webkit-border-radius: 100px; border-radius:100px; margin-left: 75px;">  <img src="http://i.imgur.com/XeSmyCi.jpg" style="width:100px; -moz-border-radius: 100px;-webkit-border-radius: 100px; border-radius:100px; margin-left: 75px; margin-right: 75px;">
    </div>
    
    <div class="section" style="background: #FFF; width: 880px; float: left; padding: 5px;">
    <div class="allthethings" style="font-family: Georgia, serif; font-size: 18px; font-style: italic; font-weight: bold; text-transform: lowercase; color: #139FE7; margin-top: 5px; margin-bottom: 10px;">history</div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque enim est, facilisis ut imperdiet malesuada, rhoncus ut mauris. Nulla arcu massa, porttitor eget eros nec, varius elementum nunc. Nunc at libero molestie, viverra elit id, malesuada ante. Maecenas non turpis placerat neque ullamcorper pharetra varius vel est. Aliquam sapien ligula, iaculis at laoreet sit amet, pretium quis odio. Nullam pretium est felis, eu rhoncus velit gravida non. In fermentum tellus at congue pharetra. Morbi vitae tellus vehicula diam viverra interdum non quis felis. Aliquam erat volutpat. Integer tempor mauris a dapibus aliquam. Praesent a ligula eu justo malesuada luctus at eu arcu. Nulla rutrum lacus quis diam sagittis, non congue odio sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet pharetra neque, quis pharetra diam. Sed sit amet lorem vel est luctus commodo in non purus. Nulla facilisi.
    <br /><br />
     Phasellus sagittis condimentum dapibus. Cras viverra malesuada rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis sodales porta pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer ut nibh fermentum, placerat quam quis, euismod ante. Mauris non tristique sem. Morbi placerat metus quis faucibus tincidunt.
<br /><br />
    Morbi ipsum est, mattis at metus ac, ullamcorper rutrum leo. Vestibulum tincidunt ligula sit amet nisi vestibulum, in vehicula elit congue. Proin convallis adipiscing sapien in molestie. Suspendisse gravida, dolor id sollicitudin faucibus, dui lacus lacinia dui, quis gravida velit purus non odio. Praesent dui dolor, dapibus et posuere ut, scelerisque sed tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean mi eros, blandit et arcu vel, lacinia scelerisque ante. In gravida est ligula, vitae sodales lectus adipiscing vel. Sed at massa commodo, hendrerit nisl et, adipiscing libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eu consequat ante, et cursus dui.
    </div>
    
    <div id="credit" style="width: 890px; float: left; background: #139FE7; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: lighter; text-transform: capitalize; text-decoration: none; text-align: center; margin: 20px 0 0 0; padding: 10px 0 10px 0">
    DESIGN BY <a href="http://skepticalwriter.insanejournal.com" style="color: #000; text-decoration: none;">~SKEPTICALWRITER</a>; CODING BY <a href="http://mistojen.insanejournal.com" style="color: #000; text-decoration: none;">~MISTOJEN</a>
    </div>
    </div>
    </div></lj-raw>

ETA! An anonny mouse helped me fix it! ♥

Tags: coding: character profile