Skem9 Basic Layout Tutorial

Skem9 Website Tutorials | Submited Nov 27, 2007

Written by: JustAMom

.NOTES{ default text settings for the whole }
body {background:#layout background color url("layout background url")
top center repeat fixed; font-family:tahoma, verdana, "sans-serfi"; font-size:10pt; text-align:center; margin:0px;}

a img {border:0px;change this only if you want a border around all images in the layout such as your ID pic, friend pics, etc.}

These default text colors affect the side table, friend ID in comments and main table.

a, a:visited {color:#default text color ; text-decoration:none;}
a:hover {color:#default hover text color; text-decoration:underline;}
table, td, div, p, a {font-family:tahoma, verdana, "sans-serfi"; font-size:10pt;}

.NOTES{ contents is the container that is the main background. Everything else is between the content div }

#contents {background:#center table background color url("center table background url") bottom repeat; text-align:left; margin:0 auto; width:780px default width; border:0px solid #border size, type and color for center table;}

.NOTES{ foot is the footer on the page }

#foot a, #foot a:visited {color:#footer text color; text-decoration:none;}
#foot a:hover {color:#footer hover text color;}

.NOTES{ head is the what holds the whole top section, Rmenu is the main navigation where Home | Generators | Layouts etc - ul#Umenu is the smaller navigation menu on the top left corner}

#head {background:#header color url("header image url") right center no-repeat; width:100%; the default is 780 px height:150px;you can change this value to make your header taller to fit the image}

#Rmenu { clear:both; text-align:center; z-index:10;background:url("background url for active") center repeat-x #active background color;}
#Rmenu ul {padding:0; margin-left:0; margin-right:0; list-style-type:none;}
#Rmenu li {display:inline; background:transparent; padding:0;}
#Rmenu a, ul#Rmenu a:visited {color:#active text color; font-weight:bold; font-size:12pt; text-decoration:none; padding:5px; border:1px solid #active border size, type and color for RMenu;}

#Rmenu a:hover {background:url("background url for hover") center repeat-x; color:#hover text color; border:1px solid #border size, type and color for RMenu hover;}

#Rmenu em {background:#default background color for RMenu; font-weight:bold; font-size:12pt;padding:5px;font-style:normal; color:#default text color for RMenu; border:1px solid #border size, type and color for default RMenu (I usually set these values the same as the active values);}





ul#Umenu {margin:10px 20px 20px 20px; padding:0; position:relative; top:15px; z-index:10; padding:0px; width:75px;list-style-type: none; float:left;}

ul#Umenu li {display: block; text-align: center; padding: 0; margin: 0; color:#this changes the color of the -90000 layouts - on the bottom of the list;}

ul#Umenu li a {font-size:11px;width: 75px; border-bottom: 0px solid #change this value if you want the words underlined;padding: 4px 0px 4px;margin: 0px 0px 0px;color: #ulmenu text color;text-decoration:italic;display: block;line-height:100%;text-align:center;}

ul#Umenu li a:hover {background: #hover background color; color:#hover text color;}

.NOTES{ the following is for the search box at the top center of the page .searchThis is when one of words above the search box is clicked on }

#search {float:right; margin:10px 20px 20px 20px; width:215px;}
#search p {margin:0; color:#selection separator image color;}
#search p span {cursor:pointer;}
#search .searchWhat {color:#default selection text color; font-weight:normal;}
#search .searchThis {color:#selected text color; font-weight:bold;}
#search .field input {background:#background color or search box; color:#text color for search box; padding:2px; border:1px outset #border size, type and color for search box;}

#search .submit input {background:#background color or search button; color:#text color for search button; border:1px outset #border size, type and color for search button;}

#search-results {color:#text color for search results; margin-top:5px; border-bottom:1px solid #size, type and color of line under the search results;}

.NOTES{ konny holds everything within your profile from your display name to the bottom of your comments }

#konny {color:#text color for remainder of center table;}

.NOTES{ MLine is the titles of the comments, and friend space. it also effects the is not logged in and you cannot comment your profile lines.

Everything that has a blue background, but looks like its an image. }

.MLine {color:#title box text color; font-weight:bold; background:#title box background color url("title box background url "); padding:2px; text-align:center; border:1px solid #size, type and color of border around title box;}

.MLine a:link, .MLine a:visited {color:#title box default link text color; text-decoration:underline;}

.MLine a:hover, .MLine a:active {color:#title box hover link text color;}

.MLine a {color:#default text color;}

.NOTES{ .browse is the class for the paging of the comments. }

.browse {background:#background color for browse titles url(background url for browse titles); padding:4px;text-align:center;}

.browse a, .browse a:visited {background:transparent; border:1px solid #size, type and color of border around active browse title; padding:3px; color:#text color for active browse text; text-decoration:none;}

.browse a:hover, .browse a:active, .browse a:focus {background:#background color for hover browse titles; border:1px solid #size, type and color of border around hover browse title; color:#text color for hover browse text;}

.browse span {background:#background color for selected browse titles; padding:3px; color:#text color for selected browse text; border:1px solid #size, type and color of border around the selected browse title;}

.proHead {background:url("background url for ProHead"); height:25px; text-indent:30px; font-weight:bold; color:#text color for ProHead; font-size:20px; font-family:georgia, tahoma, new times roman; color:#text color for ProHead; border:1px solid #size, type and color of border around the ProHead;}

.proPic {float:left; width:200px;margin-left:5px; text-align:center;}
.proInfoTable {float:left;width:300px; margin-left:5px;}


These are your buttons

#ContactTable a img{float:left;margin: 0 0 0 100px;display:none;}

a.add2buds
{margin-top:10px;display:block;width:200px;height:69px;background:url(add button url);background-repeat: no-repeat;-}
a.blockbud
{display:block;width:200px;height:60px;background:url(block button url);background-repeat: no-repeat;}
a.messagebud
{display:block;width:200px;height:65px;background:url(message button url);background-repeat: no-repeat;}

.proInfo {vertical-align:top;}
.proInfo td {width:100px;}

.proL {background:#fff url("background url for info table") top repeat-x; text-indent:3px; font-style:bold; color:#text color for info table; width:75px !important;border:1px outset #size, type and color of border around the info table;}

.proQuote {background:#background color for ProQuote url("background url for ProQuote "); line-height:100%; text-indent:0px; font-style:bold; color:#text color for ProQuote;border:2px outset #size, type and color of border around the ProQuote;}

.NOTES{ the layouts that are on your profiles }
.top5Layouts {float:left; text-align:center; margin:0 2px;}


.NOTES{ left side where the friends list is, and contact tables and the created images }
.UProSide {width:325px; float:left;}
.UProSide table {border-collapse:collapse;}
.UProSide table td {text-align:center; vertical-align:top;}

.UProSide div {text-align:center; width:325px;}

.UProSide div.images b {color:# text color contact table title;background:# contact table title box background color url( contact table title box background url); padding:4px 0;text-align:center; width:325px; display:block;border:2px outset # size, type and color of border around title box;}

.UProSide div.MSContacts img {cursor:pointer;}
.UProSide div.MSContacts div {width:100%;}
.UProSide div.MSContacts div a {display:block; width:100%; position:relative;}
.UProSide div.MSContacts {width:325px;}

.UProSide div.MSContacts .sideHead {background: url(" contact table intro title box background url") bottom repeat-x black;width:325px; padding:10px 0;}

.NOTES{ right side where the comments are at }
.Comments {float:right; width:450px;margin-bottom:0px;}

.NOTES{ fnopeck IE yo, I swear Ima knock it out of of these days haha }
* html .Comments {margin-right:3px;} this will keep the title box from running into the contents border

.commentsPeps {margin:0px 20px 3px 20px; width:390px; font-style:bold; color:# text color for comment box; border:3px outset # size, type and color of border around comment box; padding:5px; background:url( background url for comment box);}

.commentsPeps span.comName {display:block; text-indent:15px;background:url(" background url for comment title "); padding:5px 0px; font-style:bold;color:#text color for comment title;border:2px outset # size, type and color of border around comment title;}

.commentsPeps .commentMess {float:center; width:310px;}

.commentsPeps .comImg img {width:60px;}

.commentsPeps .comImg {float:center;}

.commentForm textarea {background:# background color for comment form; border:2px outset # size, type and color of border around comment form; padding:5px; width:320px;font-style:bold; color:# text color for comment form;}

.commentForm .comSub {width:200px;}

{ Put at the end of the comment code to make all html comments the same width }
html .Comments img {max-width:300px;}

.clear {clear:both;}
.centered {text-align:center;}


.NOTES{ heres whats within the middle section of the profiles }
#ProfileContents { padding:0px 4px;position:relative; display:block; border-left:150px solid #background color for side table; overflow:visible; }

* html #ProfileContents {display:inline-block;}
#ProfileContents .proProfile {float:left; position:relative; margin-left:-145px; display:inline; width:137px;}

#mainContents {border-left:1px solid # line1 color for main contents; padding:5px;}

.proProfile ul {list-style-type:none; margin:0; padding:0;}
.proProfile ul li {margin:0;}
.proProfile .linkTitle {color:# text color for side table title; background:# background color for side table title;text-indent:10px; display:block;width:100%; line-height:23px; border-bottom:1px outset # color for line under side table title;}

.extraTable1 {border-left:1px solid # line2 color for main contents; padding-left:5px; float:left; width:48%; background:# background color for extra table url( background url for extra table);}

.extraTable2 {float:left; width:48%; margin-left:5px;}

.ExtraTableTitle, .extraTableTitle { border:2px outset # size, type and color of border around extra table title; background# background color of comment title;}; text-indent:15px; font-style:bold; color:# text color for comment title;}

.NOTES {below is the codes for the goodie box thats on your profile}
.goodies {clear:both; width:250px; text-align:center; border:2px inset # size, type and color of border around goodie box; margin-bottom:10px;}
.goodies b {display:block; background:# background color of featured goodies; color:# text color for featured goodies; font-family:georgia;}
.goodies .boxes span {float:left; padding:5px; margin:2px; background:# background color for goodies title; border:1px inset # size, type and color of border around goodie title;color:# text color for goodies title;}

.NOTES{ The following is for the popup thing that comes up when you try to send someone a gift}
.goodieBox {display:none; padding:10px;}
.items {margin:0;}
.GoodieItems {float:left; margin: 5px; border:2px inset # size, type and color of border around goodie items; text-align:center; font-style:bold; color:# text color for goodie items; padding:5px;}

.GoodieItemsHover {float:left; margin: 5px; border:1px solid # size, type and color of border around goodie item hover; text-align:center; color:# text color for goodie item hover; padding:5px; background:# background color for goodies item hover;}

.goodieBox h3 {margin:5px 0 0 5px; background:# background color for goodies store; text-indent:25px; color:# text color for goodie store; border-bottom:1px inset # size, type and color of border around goodie store;}

.smallAbout {width:50%; text-indent:15px; font-style:bold; color:# text color for about table; padding:5px; margin:5px; background:# background color for about tablep; border:1px inset # size, type and color of border around about table;}

.linkBar {margin: 5px; line-height:25px;}
.linkBar a {padding:5px; background:# background color for link table; border:1px inset # size, type and color of border around link table;color:# text color for link table;}

.linkBar a:hover {background:# background color for link table hover; color:# text color for link table hover; border-color:# size, type and color of border around link table hover;}

.MyTokens {background:# background color for tokens; padding:5px; color:# text color for tokens; border-bottom:1px inset # size, type and color of border around tokens; text-indent:40px;}

If this is confusing or hard to read, you can also access this tutorial at my website:


JustAMom's Website