basically, all i want is a really simple layout that i can do myself with a few codes.
aaaand i was wondering if it is as simple as sticking in style codes (link styles, etc.)?
i've never been able to figure out livejournal coding... HELP!
simple like this: http://users.livejournal.com/_perfectperfume/
that's my friend's livejournal and i've been trying forever to figure out how to get mine like it.
i know nothing. :D
Full Version: Confused about LJ coding
You can try to follow this, I haven't actually looked through it m'self so I don't know how helpful that will be. If you can be more specific on what you'd like (after reading that thread), please, post again. (: I'm actually on my way out, so when I get back, hopefully I'll be able to explain what you're looking to do.
i used the code given in that thread, but it isn't exactly working.
it isn't setting the link styles the way i put them, gaaah.
do you know how i can get my layout like this, but with the same idea of what i have now?
here is my livejournal.
and here is the coding i have done (using the help thread you showed me):
CODE
LASTN_HEAD<=
<title>lala</title>
<style type="text/css">
<!--
body {
SCROLLBAR-ARROW-COLOR: #CEAF80;
SCROLLBAR-BASE-COLOR: #000000;
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
}
BODY, TD {font-family:verdana, sans-serif;color:#000000;font-size:10;}
A:link {color: "#4A372E"; text-decoration:bold}
A:visited {color: "#4A372E"; text-decoration:none}
A:hover { text-decoration:underline bold; color:"#6E533E"; cursor:crosshair; }
body {
overflow-x: hidden;
margin-left: 218;
margin-top: 20
}
body {
background-image: url('http://i11.tinypic.com/2z55g5f.jpg');
background-attachment:scroll;
background-repeat: repeat;
}
table, tr, td, .shadowed {
background: #C8B187;
}
table {
width: 350px;
margin-left: 2%;
margin-right: 51%;
}
table table {
width: 100%;
margin:0;
}
table table table {
width: auto;
}
-->
</style>
<style type="text/css">
<!--
.x {
position:absolute; left:0; top:0; z-index: -10; }
-->
</style>
</xx-head>
LASTN_HEAD<=
<xx-p>
<=LASTN_HEAD
LASTN_TALK_READLINK=><a href="%%urlread%%">[%%messagecount%% Comments]</a>
LASTN_WEBSITE<=
<div style="position: absolute; left: 53; top: 534; width: 172; height: 362; z-index: 2">
<center><img src="ICONURLHERE" width="100" height="100"></center>
<p align=left><font color="#ffffff"><b>Name></b></font>
<p><font color="#ffffff"><b>Country></b></font> </p>
<p><font color="#ffffff"><b>Personality></b></font> </p>
<p><font color="#ffffff"><b>Likes</b>></font>
<p><font color="#ffffff"><b>Hates</b>></font> <p><font color="#ffffff"><b> Bands></b></font>
<p><font color="#ffffff"><b>Features</b>></font> Amy Lee by <a href="www.livejournal.com/users/ley_chan>Ashley</a>
<p><font color="#ffffff"><b>Send me a line</b>></font> <a href="aim:goim?screenname=insert sn&
message=Hey>AIM</a>, <a href="Url">Link</a>, <a href="mailto:insertemail">email</a>
</div>
<img
src="" class="x" width="#" height="#">
<=LASTN_WEBSITE
LASTN_TALK_LINKS<=
<table>
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments">
%%readlink%% <a href="%%urlpost%%">[Comments]
</a> <center><br>
</center></td>
</tr>
<=LASTN_TALK_LINKS
<title>lala</title>
<style type="text/css">
<!--
body {
SCROLLBAR-ARROW-COLOR: #CEAF80;
SCROLLBAR-BASE-COLOR: #000000;
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
}
BODY, TD {font-family:verdana, sans-serif;color:#000000;font-size:10;}
A:link {color: "#4A372E"; text-decoration:bold}
A:visited {color: "#4A372E"; text-decoration:none}
A:hover { text-decoration:underline bold; color:"#6E533E"; cursor:crosshair; }
body {
overflow-x: hidden;
margin-left: 218;
margin-top: 20
}
body {
background-image: url('http://i11.tinypic.com/2z55g5f.jpg');
background-attachment:scroll;
background-repeat: repeat;
}
table, tr, td, .shadowed {
background: #C8B187;
}
table {
width: 350px;
margin-left: 2%;
margin-right: 51%;
}
table table {
width: 100%;
margin:0;
}
table table table {
width: auto;
}
-->
</style>
<style type="text/css">
<!--
.x {
position:absolute; left:0; top:0; z-index: -10; }
-->
</style>
</xx-head>
LASTN_HEAD<=
<xx-p>
<=LASTN_HEAD
LASTN_TALK_READLINK=><a href="%%urlread%%">[%%messagecount%% Comments]</a>
LASTN_WEBSITE<=
<div style="position: absolute; left: 53; top: 534; width: 172; height: 362; z-index: 2">
<center><img src="ICONURLHERE" width="100" height="100"></center>
<p align=left><font color="#ffffff"><b>Name></b></font>
<p><font color="#ffffff"><b>Country></b></font> </p>
<p><font color="#ffffff"><b>Personality></b></font> </p>
<p><font color="#ffffff"><b>Likes</b>></font>
<p><font color="#ffffff"><b>Hates</b>></font> <p><font color="#ffffff"><b> Bands></b></font>
<p><font color="#ffffff"><b>Features</b>></font> Amy Lee by <a href="www.livejournal.com/users/ley_chan>Ashley</a>
<p><font color="#ffffff"><b>Send me a line</b>></font> <a href="aim:goim?screenname=insert sn&
message=Hey>AIM</a>, <a href="Url">Link</a>, <a href="mailto:insertemail">email</a>
</div>
<img
src="" class="x" width="#" height="#">
<=LASTN_WEBSITE
LASTN_TALK_LINKS<=
<table>
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments">
%%readlink%% <a href="%%urlpost%%">[Comments]
</a> <center><br>
</center></td>
</tr>
<=LASTN_TALK_LINKS
this is so confusing.
You'll want to set your journal styles to generator. Also, are you using the S1 style system or the S2 style system? I really should've asked that first, but it slipped my mind.
i'm using the s1 style system.
i just set my lj to generator style for everything i could.
it didn't exactly change anything though.
(thanks for humoring me; i'm hopeless when it comes to this stuff.)
edit
after deleteing the automatic lj intro post thing it looks a bit better.
i'm not sure how to separate the different sections (the actualy entry from the user picture/links).
i just set my lj to generator style for everything i could.
it didn't exactly change anything though.
(thanks for humoring me; i'm hopeless when it comes to this stuff.)
edit
after deleteing the automatic lj intro post thing it looks a bit better.
i'm not sure how to separate the different sections (the actualy entry from the user picture/links).
If you want your header image to appear, you must have a website listed on your profile. Again, please be more specific in what you want. For example, do you want the navigation at the top of the page to appear or not? Do you want your layout to be right or left aligned? Do you want a navigation bar on the right/left side of the journal? You get the idea. In any case, change what's in the bolded red (in the first part, make sure that the two numbers add up to a hundred).
LASTN_TALK_READLINK=><a href="%%urlread%%">[%%messagecount%% Comments]</a>
LASTN_HEAD<=
<title>lala</title>
<style type="text/css">
<!--
body {
SCROLLBAR-ARROW-COLOR: #CEAF80;
SCROLLBAR-BASE-COLOR: #000000;
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
}
BODY, TD {font-family:verdana, sans-serif;color:#000000;font-size:10;}
A:link {color: "#4A372E"; text-decoration:bold}
A:visited {color: "#4A372E"; text-decoration:none}
A:hover { text-decoration:underline bold; color:"#6E533E"; cursor:crosshair; }
body {
overflow-x: hidden;
margin-left: 218;
margin-top: 20
}
body {
background-image: url('http://i11.tinypic.com/2z55g5f.jpg');
background-attachment:scroll;
background-repeat: repeat;
}
table, tr, td, .shadowed {
background: #C8B187;
}
table table {
width: 350px;
margin-left: 50%;
margin-right: 50%;
}
table table table {
width: 100%;
margin:0;
}
table table table table {
width: auto;
}
.x {
position:absolute; left:0; top:0; z-index: -10; }
-->
</style>
</xx-head>
LASTN_HEAD<=
<xx-p>
<=LASTN_HEAD
LASTN_WEBSITE<=
<img
src="IMAGEURLGOESHERE" class="x" width="XXX" height="XXX">
<=LASTN_WEBSITE
LASTN_TALK_LINKS<=
<table>
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments">
%%readlink%% <a href="%%urlpost%%">[Comments]
</a> <center><br>
</center></td>
</tr>
<=LASTN_TALK_LINKS
LASTN_TALK_READLINK=><a href="%%urlread%%">[%%messagecount%% Comments]</a>
LASTN_HEAD<=
<title>lala</title>
<style type="text/css">
<!--
body {
SCROLLBAR-ARROW-COLOR: #CEAF80;
SCROLLBAR-BASE-COLOR: #000000;
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
}
BODY, TD {font-family:verdana, sans-serif;color:#000000;font-size:10;}
A:link {color: "#4A372E"; text-decoration:bold}
A:visited {color: "#4A372E"; text-decoration:none}
A:hover { text-decoration:underline bold; color:"#6E533E"; cursor:crosshair; }
body {
overflow-x: hidden;
margin-left: 218;
margin-top: 20
}
body {
background-image: url('http://i11.tinypic.com/2z55g5f.jpg');
background-attachment:scroll;
background-repeat: repeat;
}
table, tr, td, .shadowed {
background: #C8B187;
}
table table {
width: 350px;
margin-left: 50%;
margin-right: 50%;
}
table table table {
width: 100%;
margin:0;
}
table table table table {
width: auto;
}
.x {
position:absolute; left:0; top:0; z-index: -10; }
-->
</style>
</xx-head>
LASTN_HEAD<=
<xx-p>
<=LASTN_HEAD
LASTN_WEBSITE<=
<img
src="IMAGEURLGOESHERE" class="x" width="XXX" height="XXX">
<=LASTN_WEBSITE
LASTN_TALK_LINKS<=
<table>
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments">
%%readlink%% <a href="%%urlpost%%">[Comments]
</a> <center><br>
</center></td>
</tr>
<=LASTN_TALK_LINKS
yeah, sorry... i'm really bad at being specific.
using your guidlines, this is now the code for my lj that i'm using:
now for specifics:
using your guidlines, this is now the code for my lj that i'm using:
CODE
LASTN_TALK_READLINK=><a href="%%urlread%%">[%%messagecount%% Comments]</a>
LASTN_HEAD<=
<title>lala</title>
<style type="text/css">
<!--
body {
SCROLLBAR-ARROW-COLOR: #CEAF80;
SCROLLBAR-BASE-COLOR: #000000;
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
}
BODY, TD {font-family:verdana, sans-serif;color:#000000;font-size:10;}
A:link {color: "#4A372E"; text-decoration:bold}
A:visited {color: "#4A372E"; text-decoration:none}
A:hover { text-decoration:underline bold; color:"#6E533E"; cursor:crosshair; }
body {
overflow-x: hidden;
margin-left: 218;
margin-top: 130
}
body {
background-image: url('http://i11.tinypic.com/2z55g5f.jpg');
background-attachment:scroll;
background-repeat: repeat;
}
table, tr, td, .shadowed {
background: #C8B187;
}
table table {
width: 350px;
margin-left: 50%;
margin-right: 50%;
}
table table table {
width: 100%;
margin:0;
}
table table table table {
width: auto;
}
.x {
position:absolute; left:0; top:0; z-index: -10; }
-->
</style>
</xx-head>
LASTN_HEAD<=
<xx-p>
<=LASTN_HEAD
LASTN_WEBSITE<=
<center><br><br><img
src="http://i14.tinypic.com/2q8n0hh.jpg" class="x"></center>
<=LASTN_WEBSITE
LASTN_TALK_LINKS<=
<table>
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments">
%%readlink%% <a href="%%urlpost%%">[Comments]
</a> <center><br>
</center></td>
</tr>
<=LASTN_TALK_LINKS
LASTN_HEAD<=
<title>lala</title>
<style type="text/css">
<!--
body {
SCROLLBAR-ARROW-COLOR: #CEAF80;
SCROLLBAR-BASE-COLOR: #000000;
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
}
BODY, TD {font-family:verdana, sans-serif;color:#000000;font-size:10;}
A:link {color: "#4A372E"; text-decoration:bold}
A:visited {color: "#4A372E"; text-decoration:none}
A:hover { text-decoration:underline bold; color:"#6E533E"; cursor:crosshair; }
body {
overflow-x: hidden;
margin-left: 218;
margin-top: 130
}
body {
background-image: url('http://i11.tinypic.com/2z55g5f.jpg');
background-attachment:scroll;
background-repeat: repeat;
}
table, tr, td, .shadowed {
background: #C8B187;
}
table table {
width: 350px;
margin-left: 50%;
margin-right: 50%;
}
table table table {
width: 100%;
margin:0;
}
table table table table {
width: auto;
}
.x {
position:absolute; left:0; top:0; z-index: -10; }
-->
</style>
</xx-head>
LASTN_HEAD<=
<xx-p>
<=LASTN_HEAD
LASTN_WEBSITE<=
<center><br><br><img
src="http://i14.tinypic.com/2q8n0hh.jpg" class="x"></center>
<=LASTN_WEBSITE
LASTN_TALK_LINKS<=
<table>
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments">
%%readlink%% <a href="%%urlpost%%">[Comments]
</a> <center><br>
</center></td>
</tr>
<=LASTN_TALK_LINKS
now for specifics:
- how do i center and move my picture down so it isn't cut off by the top links?
- how do i change the comment link and the amount of comments link?
- http://users.livejournal.com/_perfectperfume/ - see how her "Glittering Wax Butterflies" and "White It Out" links have a red background instead of a white one? how do i make my comment links like that?
Alright, that I can help you with. :D
First, to move your header image around, find this in your coding:
.x {
position:absolute; left:0; top:0; z-index: -10; }
The left value is the number of pixels your image is away from the left side of the browser; the same applies for the top value. If you want to center it, you can put 50% for the left value.
Because your blog body won't automatically move down, your graphic may be covered by the navigation. To fix that, find this in your coding and increase the bolded number accordingly:
body {
overflow-x: hidden;
margin-left: 218;
margin-top: 130
}
Both two and three can be fixed with the same bits of coding (since they both refer to the comment links).
LASTN_TALK_LINKS<=
<table>
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments">
%%readlink%% <a href="%%urlpost%%">[Comments]
</a> <center><br>
</center></td>
</tr>
<=LASTN_TALK_LINKS
^ This changes your comment link. Right now, it's [Comments]. To change what the link says, just change [Comments]. What I've bolded is extra coding (it doesn't do anything), so you can remove that. Now then, find bgcolor="%%color:weak_back%%" That is the background color behind your links. Change %%color:weak_back%% to any hex number.
LASTN_TALK_READLINK=><a href="%%urlread%%">[%%messagecount%% Comments]</a>
^ This is the link that shows the number of comments. Right now, it's set to appear as [2 Comments]. The text in between <a href="%%urlread%%"></a> is linked to the comment page. %%messagecount%% is (if you couldn't guess) the number of comments you have on the livejournal page. The brackets and "Comments" are changeable to whatever you want.
First, to move your header image around, find this in your coding:
.x {
position:absolute; left:0; top:0; z-index: -10; }
The left value is the number of pixels your image is away from the left side of the browser; the same applies for the top value. If you want to center it, you can put 50% for the left value.
Because your blog body won't automatically move down, your graphic may be covered by the navigation. To fix that, find this in your coding and increase the bolded number accordingly:
body {
overflow-x: hidden;
margin-left: 218;
margin-top: 130
}
Both two and three can be fixed with the same bits of coding (since they both refer to the comment links).
LASTN_TALK_LINKS<=
<table>
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments">
%%readlink%% <a href="%%urlpost%%">[Comments]
</a> <center><br>
</center></td>
</tr>
<=LASTN_TALK_LINKS
^ This changes your comment link. Right now, it's [Comments]. To change what the link says, just change [Comments]. What I've bolded is extra coding (it doesn't do anything), so you can remove that. Now then, find bgcolor="%%color:weak_back%%" That is the background color behind your links. Change %%color:weak_back%% to any hex number.
LASTN_TALK_READLINK=><a href="%%urlread%%">[%%messagecount%% Comments]</a>
^ This is the link that shows the number of comments. Right now, it's set to appear as [2 Comments]. The text in between <a href="%%urlread%%"></a> is linked to the comment page. %%messagecount%% is (if you couldn't guess) the number of comments you have on the livejournal page. The brackets and "Comments" are changeable to whatever you want.
thank you SO much!
you've helped me a lot.
just oooone more question:
how to i make my actual blog spot narrower?
edit
yay!
i switched to the basic account (i saw you told one girl to do that).
now it looks great.
thanks again for your help!!
you've helped me a lot.
just oooone more question:
how to i make my actual blog spot narrower?
edit
yay!
i switched to the basic account (i saw you told one girl to do that).
now it looks great.
thanks again for your help!!
Find and change the number:
width: 350px;
Let me know how it goes!
width: 350px;
Let me know how it goes!
i was fooling around with the number for that and it seems it just changed the very bottom table's width.
(the navigation one).
is it possible to make every table narrower (including the brown part)?
(the navigation one).
is it possible to make every table narrower (including the brown part)?
Hm, can you provide your coding again? What I had you put in was adjusted for the sponsored+ account.
this is my code:
i like how it looks now though.
CODE
LASTN_TALK_READLINK=><a href="%%urlread%%">%%messagecount%% Criminals</a>
LASTN_HEAD<=
<title>And when we get home, I know we won't be home at all</title>
<style type="text/css">
<!--
body {
SCROLLBAR-ARROW-COLOR: #CEAF80;
SCROLLBAR-BASE-COLOR: #000000;
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
}
BODY, TD {font-family:verdana, sans-serif;color:#000000;font-size:10;}
A:link {color: "#4A372E"; text-decoration:bold}
A:visited {color: "#4A372E"; text-decoration:none}
A:hover { text-decoration:underline bold; color:"#6E533E"; cursor:crosshair; }
body {
overflow-x: hidden;
margin-left: 218;
margin-top: 20
}
body {
background-image: url('http://i11.tinypic.com/2z55g5f.jpg');
background-attachment:scroll;
background-repeat: repeat;
}
table, tr, td, .shadowed {
background: #C8B187;
}
table table {
width: 300px;
margin-left: 50%;
margin-right: 50%;
}
table table table {
width: 100%;
margin:0;
}
table table table table {
width: auto;
}
.x {
position:absolute; left:25%; top:50; z-index: -10; }
-->
</style>
</xx-head>
LASTN_HEAD<=
<xx-p>
<=LASTN_HEAD
LASTN_WEBSITE<=
<center><br><br><img
src="none" class="x"></center>
<=LASTN_WEBSITE
LASTN_TALK_LINKS<=
<table>
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:#FFFFFF%%" class="comments">
%%readlink%% <a href="%%urlpost%%">Crimials
</a> </td>
</tr>
<=LASTN_TALK_LINKS
LASTN_HEAD<=
<title>And when we get home, I know we won't be home at all</title>
<style type="text/css">
<!--
body {
SCROLLBAR-ARROW-COLOR: #CEAF80;
SCROLLBAR-BASE-COLOR: #000000;
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
}
BODY, TD {font-family:verdana, sans-serif;color:#000000;font-size:10;}
A:link {color: "#4A372E"; text-decoration:bold}
A:visited {color: "#4A372E"; text-decoration:none}
A:hover { text-decoration:underline bold; color:"#6E533E"; cursor:crosshair; }
body {
overflow-x: hidden;
margin-left: 218;
margin-top: 20
}
body {
background-image: url('http://i11.tinypic.com/2z55g5f.jpg');
background-attachment:scroll;
background-repeat: repeat;
}
table, tr, td, .shadowed {
background: #C8B187;
}
table table {
width: 300px;
margin-left: 50%;
margin-right: 50%;
}
table table table {
width: 100%;
margin:0;
}
table table table table {
width: auto;
}
.x {
position:absolute; left:25%; top:50; z-index: -10; }
-->
</style>
</xx-head>
LASTN_HEAD<=
<xx-p>
<=LASTN_HEAD
LASTN_WEBSITE<=
<center><br><br><img
src="none" class="x"></center>
<=LASTN_WEBSITE
LASTN_TALK_LINKS<=
<table>
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:#FFFFFF%%" class="comments">
%%readlink%% <a href="%%urlpost%%">Crimials
</a> </td>
</tr>
<=LASTN_TALK_LINKS
i like how it looks now though.
i'm going to close this for now, even though you didn't get your question answered, because you seem to be satisfied with your current layout. pm me or anna to have it reopened
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.