Hi there,
As you know, LiveJournal enables customization through Html and CSS. Although I have used Html layouts through Myspace, and Friendster, LiveJournal is a first for me. Apparently, I'm a newbie at the whole "LJ" concept.....But I'll use as much effort as possible in explaining the process of customizing my own page.
- For starters, you would first log into your LJ account, then into the customization area. The URL is http://www.livejournal.com/customize/.
- Under Basics, you can change the style system. Initially, I had problems with using S1, but my page is currently in S2 mode. If you plan to use a similar layout as I currently have, then S2 would be appropriate. Save settings.
- Next, under the "look and feel" tab, change the layout language to "smooth sailing". Save settings.
- Then, under "custom options", choose the "custom CSS" link. You will see a custom style sheet. paste the following code inside:
body {
font-family: arial, tahoma;
font-size: 7pt;
margin: 0px;
background-color: #FFFFFF;
color: #333333;
background: url(http://img341.imageshack.us/img341/9
113/untitled4copyih6.jpg);
background-attachment: fixed;
background-color: #FFFFFF;
margin-top: 20px;
margin-bottom: 20px;
}
a {
color: #333333;
font-weight: lighter;
text-decoration: none;
font-weight: normal;
}
a:visited {
color: #333333;
font-weight: lighter;
text-decoration: none;
font-weight: normal;
}
a:hover {
background-color: #333333;
color: #B2C7C5;
font-weight: normal;
text-decoration: underline;
}
.pageblock{
width:681px;
margin: 0 auto;
background-color: #FFFFFF;
color: #B0C5C3;
background-position: center;
}
.pagefooterblock{
background-color: #333333;
color: #B2C7C5;
padding: 10px;
margin-top: 0px;
text-align: center;
text-transform: uppercase;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #B2C7C5;
}
.pageheaderblock {
text-align: left;
background-image: url(http://img234.imageshack.us/img234/2
916/themekanib5.jpg);
background-repeat: no-repeat;
Background-position: bottom center;
width: 679px;
height: 470px;
}
.header-title {
display: none;
}
.header-subtitle {
display: none;
}
.header-icon {
top: 0px;
right: 0px;
position: absolute;
z-index: 1;
}
.header-menu {
padding: 0px 0px 0px 0px;
background-color: transparent;
font-family: arial;
font-size: 10px;
line-height: 20px;
text-transform: uppercase;
text-align: center;
background-color: #FFFFFF;
}
.header-menu a, .header-menu a:visited {
white-space: nowrap;
text-align: left;
padding: 2px 7px 5px 5px;
color: #001435;
text-decoration: none;
font-weight: bold;
}
.header-menu a:hover {
color: #B2C7C5;
background-color: #333333;
}
.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li, #footer-menu li {
display: inline;
}
.bodyblock {
padding:0px;
}
.bodyheaderblock {
display: none;
}
.bodynavblock {
background-color: #FFFFFF;
color: #ccc;
margin: 10px 0px 4px 0px;
padding: 9px;
}
.bodynavblock a, .bodynavblock a:visited {
color: ##002415;
}
.body-title {
display: none;
}
.body-midtitle {
font-family: arial;
font-size: 18px;
color: #002415;
text-align: left;
padding-left: 8px;
}
.entryHolder {
color: #B0C5C3;
background-color: #FFFFFF;
font-family: arial;
font-size: 11px;
margin: 4px 5px 4px 0px;
text-align: justify;
padding-right: 35px;
}
.entryUserinfo {
text-align: center;
margin: 5px 6px 3px 5px;
background-color: transparent;
}
.entryUserinfo-usericon img {
border: 0px;
}
.entryText {
color: #374544;
padding: 6px;
}
.entryHeader {
background-color: #CCCCCC;
color: #283A3A;
font-family: arial;
font-size: 10px;
padding: 4px;
font-weight: bold;
text-transform: uppercase;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
letter-spacing: 2px;
text-align: center;
}
.entryHeader a{
color: #FFFF33;
}
.entryHeaderSubject {
}
.entryHeaderDate a {
color : #FFFF33;
text-decoration : none;
}
.entryHeaderDate a:hover {
color : #FFFF33;
text-decoration : underline;
}
.entryMetadata {
padding-left: 6px;
}
.entryMetadata ul {
margin: 0px;
padding: 0px;
}
.entryMetadata li {
list-style: none;
display: inline;
padding-right: 10px;
}
.entryMetadata-label {
font-weight: bold;
padding-right: 4px;
}
.entryLinkbar {
font-family: tahoma;
font-size: 11px;
color: #FFFF33;
text-align: right;
padding: 4px 0px 4px 0px;
}
.entryLinkbar ul {
margin: 0px;
padding: 0px;
}
.entryLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}
#footer-menu {
font-size: 11px;
text-align: center;
}
#footer-menu a, .footer-menu a:visited {
color: #033241;
white-space: nowrap;
padding: 6px;
text-align: center;
}
.sidebar {
font-family: arial;
font-size: 11px;
margin-right: 5px;
width: 170px;
background-color: #FFFFFF;
padding: 0px 0px 0px 0px;
margin-left: 40px;
}
.sidebox {
color: #648C88;
background-color: transparent;
margin: 4px 0px 4px 0px;
}
.sideboxTitle {
background-color: #999999;
color: #000000;
font-family: arial;
font-size: 10px;
padding: 5px;
text-align: left;
text-transform: uppercase;
font-weight: bold;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
letter-spacing: 2px;
}
.sideboxContent {
text-align: justify;
padding: 2px 4px 2px 4px;
}
.sidebox #profile, .sidebox #latestmonth, .sidebox #search {
text-align: center;
}
.sidebox #tags_sidebox {
text-align: center;
}
.sidebox #systemlinks {
text-align: center;
}
.sidebox #latestmonth table{
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
}
.listtitle {
font-weight: bold;
}
.profile-label {
font-weight: bold;
}
.commentHolder {
color: #648C88;
background-color: #B0C5C3;
font-family: arial;
font-size: 11px;
margin: 14px 0px 4px 10px;
border-bottom: 1px solid #648C88;
margin-right: 35px;
}
.commentUserinfo {
text-align: center;
margin: 0px 8px 8px 0px;
background-color: #FFFFFF;
}
.commentUserinfo-usericon img {
border: 0;
}
.commentText {
padding: 6px;
}
.commentHeader {
background-color: transparent;
color: #6F918D;
font-family: arial;
font-size: 12px;
padding: 4px 0px 4px 8px;
}
.commentHeader a{
color: #000000;
}
.commentHeaderScreened {
font-family: arial;
font-size: 12px;
background-color: #000000;
padding: 4px 0px 4px 8px;
}
.commentHeaderSubject {
font-weight: bold;
}
.commentLinkbar {
font-family: arial;
font-size: 11px;
color: #000000;
text-align: right;
padding-top: 4px;
padding-bottom: 4px;
}
.commentLinkbar ul {
margin: 0px;
padding: 0px;
}
.commentLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}
.replyform {
background-color: #FFFFFF;
color: #648C88;
padding-left: 10px;
margin-right: 35px;
}
#commenttext{
width:100%;
}
.yearlinks{
text-align: right;
}
.yearlink{
padding-left:4px;
padding-right: 4px;
}
.month {
width: 320px;
border: 1px solid #dddddd;
margin: 8px 8px 8px 40px;
}
.daysubjects {
color: #000000;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
border: 1px solid #dddddd;
background: #B0C5C3;
color: #000000;
}
.day-blank {
border: 1px solid #dddddd;
}
.day {
border: 1px solid #dddddd;
}
.day-date {
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
color: #000000;
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 20px;
}
.day-count a {
text-decoration: none;
color: #000000;
}
.tagstable, .tagstable td {
border: 1px solid #dddddd;
}
.tagstable { width: 300px; }
There are two image links within the code. The first image link is
http://img341.imageshack.us/img341/9113/untitled4copyih6.jpg. As you can see, is a small rectangle that has been looped around and made into a side background on my page. I made this through photoshop with the dimensions 176x48. You can choose to make your own image rectangle into a background as well, simply make a rectangle that you desire to loop throughout the background. Then, upload it (i use imageshack.us) and replace the first image link with your new url.
The second image url is the rainbow looking thing I've uploaded. I made this image through photoshop, then uploaded it into imageshack. When uploading your own image, check the "resize image" box on imageshack to 640x480. Then, copy and replace the second url with the new url.
After this, you're pretty much done. These are the current colors I have on my journal:
#FFFFFF = white
#999999 = Black
#CCCCCC = Light Gray
#333333 = Dark Gray.
To replace, you can choose your colors on a color chart and replace it. (Color chart http://www.pagetutor.com/pagetutor/makap
age/pics/net216-2.gif)
You can copy the entire text of code to wordpad, then going to edit ---> replace and filling the "Find what" with FFFFFF and replacing it with the color of your choice
Well. That's about it. I tried implementing background music...but no dice. I don't think LJ enables music for free S2 accounts. Overall, free to to ask any questions or comments. ^_^