InsaneJournal

Tweak says, "i've came to save the stage"

ᴀᴇʀʏɴ (affictitious) wrote in rp_tutorials,
@ 2013-09-23 13:43:00

Entry tags:

question: layouts

I'm currently using and tweaking this layout from coding. At the moment it looks like this after I tried fiddling with the code, but I would like it to look like this.

A. Is it possible?
B. If it is possible, what part of the code should I actually be working on?

Thank you to anyone that can help me out! :3 And here is my tweaked code:

FRIENDS_WEBSITE<=
<style type="text/css">
table table table table .meta {
visibility:hidden;
position:absolute;
top:1px;
}

table table table table table .meta {
visibility:visible;
position:relative;
top:1px;
}

tr.caption, .shadowed td div, {
display:none;
}

.shadowed img {
width:250px;
background:url(http://31.media.tumblr.com/811e6b69bec2e00b9e8f49e1f8931f6d/tumblr_mtgxx4Ezja1qai4qwo2_r2_500.gif) no-repeat;
}

.supguys {
font-family:arial;
font-size:11px;
line-height:12px;
border-left:1px dotted #cccccc;
padding:5px;
}

.supdude {
font-family:alike;
font-size:12px;
line-height:13px;
color:#404040;
padding-right:10px;
height:141px;
}
</style>

<tr><td colspan="5" width="600">
<table align="right" cellspacing="0" border="0" cellpadding="0">
<tr><td class="supdude" align="right" valign="middle"><img src="http://31.media.tumblr.com/811e6b69bec2e00b9e8f49e1f8931f6d/tumblr_mtgxx4Ezja1qai4qwo2_r2_500.gif" style="width:250px;"/>
</td>
<td class="supguys" align="center" width="30">
<a href="http://affictitious.insanejournal.com" title="JOURNAL">★</a> 
<a href="http://affictitious.insanejournal.com/info" title="INFO">★</a><br>
<a href="http://affictitious.insanejournal.com/calendar" title="CALENDAR">★</a>
<a href="http://affictitious.insanejournal.com/friends" title="FRIENDS">★</a></font> 
</td></tr></table></td></tr>
<=FRIENDS_WEBSITE

LASTN_TALK_LINKS=><tr><td align="right" valign="bottom" colspan="2" width="100%" class="comments">» <a href="%%urlpost%%">%%messagecount%%</a></td></tr>

GLOBAL_HEAD<=
<title>affictitious ;// a CDJ & more</title>
<link href='http://fonts.googleapis.com/css?family=Alike' rel='stylesheet' type='text/css'>
<style type="text/css">

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

body {
background-color:#e1e1e1;
}

table {
border:0;
padding-top:1px;
}

table table {
border:0;
}

body, td {
line-height:11pt;
color:#000000;
font-family:calibri;
font-size:12px;
text-align:justify;}

/* link effects. */
a {
font-family:arial;
font-size:7pt;
text-transform:uppercase;
color:#B11905;
text-decoration:none;
}

a:hover {
color:#ABD7F5;
text-decoration:none;
cursor:default;
}

/* top right navigation links. */
.index {
font-family:arial;
font-size:7pt;
line-height:0px;
text-transform:uppercase;
color:#000000;
text-align:right;
}

/* top banner main navigation links. */
table table table table td.meta {
font-family:arial;
font-size:7pt;
line-height:10px;
text-transform:uppercase;
}

/* subject lines. */
p table table td.caption {
font-family:arial;
font-size:7pt;
line-height:8px;
letter-spacing:1px;
text-transform:uppercase;
color:#B9B9B9;
background-color:#ffffff;
border-bottom:1px dotted #e1e1e1;
padding:0px;
}

/* date & time. */
.entrybox td.index {
font-family:arial;
font-size:7pt;
line-height:8px;
letter-spacing:0px;
text-transform:uppercase;
color:#ffffff;
background-color:#ffffff;
border-bottom:1px dotted #e1e1e1;
}

/* mood & music. */
.entrybox td.meta {
display:none;
}

/* comments. */
.comments {
font-family:arial;
font-size:7pt;
line-height:11px;
letter-spacing:0px;
text-transform:uppercase;
text-align:right;
}

/* 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%" class="comments">» <a href="%%urlpost%%">%%messagecount%%</a></td></tr>

LASTN_TALK_READLINK=><a href="%%urlread%%">%%messagecount%%</a>

LASTN_DATE_FORMAT=><span style="color:#B9B9B9;">%%mm%%.%%dd%%.%%yy%%, %%12h%%%%ap%%</span>

FRIENDS_TALK_READLINK=><a href="%%urlread%%">%%messagecount%%</a>

LASTN_WEBSITE<=
<style type="text/css">
table table table table .meta {
visibility:hidden;
position:absolute;
top:1px;
}

table table table table table .meta {
visibility:visible;
position:relative;
top:1px;
}

tr.caption, .shadowed td div, {
display:none;
}

.shadowed img {
width:250px;
background:url(http://31.media.tumblr.com/811e6b69bec2e00b9e8f49e1f8931f6d/tumblr_mtgxx4Ezja1qai4qwo2_r2_500.gif) no-repeat;
}

.supguys {
font-family:arial;
font-size:11px;
line-height:12px;
border-left:1px dotted #cccccc;
padding:5px;
}

.supdude {
font-family:alike;
font-size:12px;
line-height:13px;
color:#404040;
padding-right:10px;
height:145px;
}
</style>

FRIENDS_DATE_FORMAT=><span style="color:#B9B9B9;">%%mm%%.%%dd%%.%%yy%%, %%12h%%%%ap%%</span>

(Read comments) - (Post a new comment)

stomps
2013-09-23 07:46 pm UTC (link)

The visibility of those tables needs to be hidden, so under GLOBAL_HEAD (and you can erase the 'top main/right navigation links' stuff for a cleaner code, since you'll be hiding them anyway?):

/*hide top nav table*/
tr.caption {visibility: hidden; position: absolute; top: 1px;}
.shadowed td div {display: none; visibility: hidden; position: absolute; top: 1px;}
table table tr.caption td.caption {visibility: hidden;}
table table table table .meta {visibility: hidden; position: absolute; top: 1px;}
table table table table table .meta {visibility: visible; position: relative; top: 1px;}

Getting rid of the usericon is also under GLOBAL_HEAD and is:

.shadowed img {
display:none;
}

However, that will make the Ichabod gif disappear, so go down to LASTN_WEBSITE and where you have the img src, force visibility within the CSS style:

And to center it, go to the table a few lines above and change the table align and td align to "center" instead of "right". It works on my Chrome browser; hopefully it has the same results for yours.

(Reply to this) (Thread)

	stomps 2013-09-23 07:47 pm UTC (link)
	Haha, oh snap, sorry about that, that gif code should be <img src="http://31.media.tumblr.com/811e6b69bec2e00b9e8f49e1f8931f6d/tumblr_mtgxx4Ezja1qai4qwo2_r2_500.gif" style="width:250px; visibility: visible; display: inline;"> (Reply to this) (Parent) (Thread)

	affictitious 2013-09-24 02:49 am UTC (link)
	ASLDKJFAL;J! YOU ARE AMAZING! ♥ Thank you, it's worked out perfectly! :3 (Reply to this) (Parent) (Thread)

	stomps 2013-09-24 02:51 am UTC (link)
	You're welcome, I'm glad I could help! (Reply to this) (Parent)

(Read comments) -