I have been asked by A LOT of people "How can I create my own skins for LC. Well here is my attempt to help.
DISCLAIMER
OK, please understand that what I am going to show you is really poorly written code. It works for most things, but when building a professional web page you want to make sure that it would also translate well to PDA's, Web Phones, etc... But this takes some shortcuts and to explain further would be book, not a blog.
JUST THE BASICS
Here is the basic for the body of a page:
body {background-image: url(http://i52.photobucket.com/albums/g7/YOURPIC.jpg);
background-attachment: fixed;
background-position:top Left;
background-repeat:repeat;
The first line tells the browser that you want to display an image and gives the address of what image to use from photo bucket or whatever. If you do not have photobucket or another server that you store pictures on that gives you the HTML code, go to www.photobucket.com. It is free!
The second line tells the browser that you want this image to be fixed in place so it doesn't scroll when the user scrolls down the page. I like to use this option 99% of the time. If you want it to scroll, then leave this out.
The third line tells the browser where to place the photo. (First Vertically, then Horizontally). The commands are common English. Top, Center, or Bottom (Vert) and then Left, Center, or Right (Horz). This can be used in any combination.
EXAMPLE
background-position: Center Center; will place the photo in the center of the person's browser vertically and horizontally.
The fourth line tells the background if you only want to display the picture once or if you want it to repeat to fill the entire page. To not repeat it would look like
background-repeat: no-repeat;
If you want it to repeat then
background-repeat: repeat;
Now as far as changing the colors, font, etc, this is where it gets too complicated for a blog. So what I would suggest for your first few is to browse through my skins and find one that uses a color combination that you like, rip it, then change the background image. (Put the http info from the picture that you stored in photobucket into the parenthasise in the background image url line.
Rename the skin, and Ta-da. You have created your first skin.
Below is an example of what the code looks like. Feel free to copy and paste this into a new skin, and then change the background image to one of yours.
body {
background-image: url(http://i52.photobucket.com/albums/g7/YOURPIC.jpg);
background-attachment: fixed;
background-position:top Left;
background-repeat:repeat;
}
table.user {
border:none;
padding:5px;
}
td.user_left {
text-align:center;
padding-left:2em;
padding-right:2em;
}
td.user_right {
text-align:left;
padding-left:2em;
padding-right:2em;
}
td.user_center {
text-align:center;
padding-left:1em;
padding-right:1em;
}
table.user_opts {
border:1px solid grey;
background-color:transparent;
text-align:left;
padding:5px;
width:100%;
}
td.user_opts {
text-align:left;
padding:2px;
}
table.poke_box {
border:1px solid red;
background-color:transparent;
text-align:left;
padding:5px;
width:100%;
}
th.poke_box {
font-size:11px;
color:yellow;
font-weight:bold;
background-color:transparent;
}
td.poke_box {
font-size:10px;
color:white;
background-color:transparent;
padding:5px;
}
a.poke_box_opt {
font-size:10px;
color:red;
text-decoration:underline;
font-weight:bold;
}
a.blast_link_body {
color:white;
text-decoration:none;
}
table.tabbed_friends_family {
}
td.tabbed_friends_family_thumbnail {
}
td.tabbed_friends_family_name {
}
table.my_friends {
border: 1px solid white;
background: transparent;
background-color:transparent;
padding:3px;
}
td.my_friends_top_sep {
text-align: center;
font-size:12px;
font-weight:bold;
padding-top:5px;
padding-bottom:5px;
}
td.my_fans_top_sep {
text-align: center;
font-size:12px;
font-weight:bold;
padding-top:5px;
padding-bottom:5px;
}
td.my_fans_sep {
text-align:center;
padding-right:3px;
padding-left:3px;
}
table.my_fans {
border: 1px solid white;
background: transparent;
background-color:transparent;
}
td.my_fans_top {
text-align: center;
font-size:12px;
padding-top:5px;
padding-bottom:5px;
}
td.my_fans {
text-align:center;
}
table.my_fan_of {
border: 1px solid white;
background: transparent;
background-color:transparent;
padding-top:5px;
padding-bottom:5px;
}
td.my_fan_of_top {
text-align: center;
}
td.my_fan_of {
text-align:center;
}
table.referral_path {
font-family: Verdana, Arial, sans-serif;
color: white;
text-indent: 0;
text-align:left;
padding-bottom:5px;
background-color:transparent;
}
td.referral_path {
text-align:left;
background-color:transparent;
}
a.referral_path_me {
font-family: Verdana, Arial, sans-serif;
color: red;
font-style:italic;
text-align:center;
}
table.user_info {
border-top-style: inset;
border-top-color: white;
border-top-width: thin;
background-color:transparent;
}
td.user_info_name {
color: yellow;
text-align:center;
font-size: medium;
background-color:transparent;
}
td.user_info {
text-align: center;
color: white;
background-color:transparent;
}
td.user_info_c {
text-align: center;
color: white;
background-color:transparent;
}
table.user_info_c {
text-align: center;
color: white;
background-color:transparent;
}
td.user_info_r {
text-align: right;
text-indent: 10;
color: white;
}
td.user_info_l {
text-align: left;
color: white;
}
table.user_music {
border:1px solid white;
text-align:left;
padding: 2px;
}
td.user_music_hdr {
text-align:left;
color:black;
background-color:white;
padding:2px;
font-size:medium;
}
td.user_music_data {
text-align:left;
color:white;
background-color:transparent;
padding:2px
}
table.play_track {
text-align:center;
padding:10px;
background-color:transparent;
border:1px solid red;
}
td.play_track_hdr {
font-weight:bold;
text-align:right;
padding:5px;
}
td.play_track {
text-align:center;
padding:3px;
color:red;
}
td.play_track_r {
text-align:right;
padding:3px;
color:red;
}
td.play_track_l {
text-align:left;
font-weight:bold;
padding:3px;
color:white;
}
table.user_aboutme {
border:1px solid white;
text-align:left;
padding: 2px;
}
td.user_aboutme_hdr {
text-align:left;
color:black;
background-color:white;
padding:2px;
font-size:medium;
}
td.user_aboutme_data {
text-align:left;
color:white;
background-color:transparent;
padding:2px
}
table.user_games {
border:1px solid white;
text-align:left;
padding: 2px;
}
td.user_games_hdr {
text-align:left;
color:black;
background-color:white;
padding:2px;
font-size:medium;
}
td.user_games_data {
text-align:left;
color:white;
background-color:transparent;
padding:2px
}
table.user_music {
border:1px solid white;
text-align:left;
padding: 2px;
}
td.user_music_hdr {
text-align:left;
color:black;
background-color:white;
padding:2px;
font-size:medium;
}
td.user_music_data {
text-align:left;
color:white;
background-color:transparent;
padding:2px
}
table.user_general {
border:1px solid white;
text-align:left;
padding: 2px;
}
td.user_general_hdr {
text-align:left;
color:black;
background-color:white;
padding:2px;
font-size:medium;
}
td.user_general_data {
text-align:left;
color:white;
background-color:transparent;
padding:2px
}
table.user_movies {
border:1px solid white;
text-align:left;
padding: 2px;
}
td.user_movies_hdr {
text-align:left;
color:black;
background-color:white;
padding:2px;
font-size:medium;
}
td.user_movies_data {
text-align:left;
color:white;
background-color:transparent;
padding:2px
}
table.leave_comment_box {
border:1px solid white;
padding:10px;
background-color:transparent;
background:transparent;
text-align:center;
}
td.leave_comment_box_hdr {
text-align:center;
padding:5px;
color:yellow;
border-bottom:1px solid yellow;
font-size:larger;
background-color:black;
}
td.leave_comment_box_body {
padding:5px;
background-color:black;
}
table.user_rating_box {
border:1px solid red;
text-align:center;
padding:3px;
background-color:transparent;
}
td.user_rating_current {
background-color:transparent;
padding:3px;
}
td.user_already_rated {
text-align:center;
font-size:10px;
color:#CCCCCC;
background-color:transparent;
}
td.rating_anon_desc {
text-align:center;
vertical-align:bottom;
font-size:10px;
font-style:italic;
color:#CCCCCC;
background-color:transparent;
}
table.top_lists {
padding:5px;
background-color:black;
border:1px solid #990000;
}
td.top_lists_hdr {
padding:5px;
text-align:center;
background-color:transparent;
color:yellow;
font-weight:bold;
font-size:14px;
}
td.top_lists {
padding:5px;
text-align:center;
background-color:transparent;
font-size:14px;
}
table.user_comment {
padding:3px;
background-color:transparent;
background:transparent;
text-align:left;
border-bottom:1px solid red;
}
td.user_comment_user {
border:none;
padding:3px;
background-color:transparent;
text-align:center;
}
td.user_comment_hdr {
font-size:9px;
font-weight:bold;
color:white;
border-bottom:1px solid red;
background-color:transparent;
}
td.user_comment_body {
text-align:left;
background-color:transparent;
}
td.user_comment_date {
color:grey;
font-style:italic;
border-bottom:1px dashed grey;
font-size:9px;
padding-top:3px;
background-color:transparent;
}
table.profile_viewers_small {
text-align:center;
color:white;
padding:2px;
background-color:transparent;
}
td.profile_viewers_border {
text-align:center;
color: white;
border-bottom: 1px solid white;
}
td.profile_viewers {
text-align: center;
color: white;
padding:4px;
}
