Skip to Main Content

Current Mood: bouncy
Current Music: Matsumoto Jun - Naked

Entry tags:

[LAYOUT CHALLENGE] #1: MatsuJun - "Naked" LJ Skin

The first of the LAYOUT CHALLENGE skins!

I present to you: Matsumoto Jun, "Naked". Inspired by his Dream "A" Live solo, "Naked".

Skin information:

S2, Flexible Squares
Perfectly fine in Firefox, not sure about IE and other browsers
Color theme: Grey, White, Black

Note: Unless you have a paid account, there will not be the "edit", "edit tags" and "link" etc. next to the link to comment page. You may feel free to remove the background. I will also modify it based on your preferences so leave me comment.

Screenshots:

Click for bigger view.

Code:

/* Cleaned CSS: */
/*::::::::::::::::::: BODY :::::::::::::::::::::*/

html { margin: 0px; padding: 0px; }

body {
      margin: 0px 0px 0px 0px;
      padding: 0px;
      color: #000;
      background-image:url(http://www.k10k.net/_img/pixelpatterns/tiles/pat_20031119143631.gif);
      font-size: 10px;
      font-family: verdana, tahoma, arial, sans-serif;
      text-align: center;
      }
a:link, a:active, a:visited {
font-weight : bold;
text-decoration : none;
color : #ac8e76;
font-family : georgia, serif;;
font-size : 8pt;
font-weight : bold;
margin-top: 10px;

}

a:hover {
color : #ac8e76;
font-family : georgia, serif;;
font-size : 8pt;
font-weight : bold;
cursor : e-resize;
border-bottom : 1px dotted #203a5f;
}

blockquote {
	margin: 0px 30px 0px 30px;
	padding: 10px 10px 10px 10px;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
        color: #555555;
        background: #FFF9CC;
        border-color: #FFEB9F;
	}
	
blockquote:hover { background: #E3F8FF; border-color: #BFEAFF; }

code, kbd, pre, tt { font-family: monospace; font-size: 11px; color: #28B2E3; }
	
textarea { font-size:11px; color:#AAAAAA; }

b {
font-family : georgia, serif;
font-size : 9pt;
color : #500000;
width : 100%;
letter-spacing : 2pt;
padding : 0 0 0 0;
border-bottom : 1px dotted #203a5f;
text-align : left;
}
i {
color : #ac8e76;
}

/*::::::::::::::::: PAGE SETUP :::::::::::::::::*/

#content {
	padding: 0px 0px 0px 0px;
	margin: 0px auto 0px auto;
        text-align: center;
        width: 800px;
	}

#header {
	text-align: center;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	background: #FFFFFF;

}

#maincontent { padding: 0px 20px 0px 210px; text-align: left;
margin-top: 10px;
  }

#sidebar {
	float: left;
	width: 170px;
        margin: -20px 0px 0px 0px;
        padding: 10px 0px 0px 0px;
margin-top: 10px;
	text-align: left;
background: url(http://www.k10k.net/_img/pixelpatterns/tiles/pat_20031008191035.gif);
	}
	
#sidebar a:link, #navlist a:visited
{color: #000000;
text-decoration:none;
text-align :left;
}

#sidebar a:hover
{
background-color: #;
color: #765b3e;
text-align :left;font-style:italic;
}

#sidebar b {
font-family : georgia, serif;
font-size : 9pt;
color : black;
width : 100%;
letter-spacing : 2pt;
padding : 0 0 0 5;
border-bottom : 1px dotted #000;
text-align : left;
}

#sidebar a:tags {height: 200px;overflow:auto;}

#footer { text-align: center; }

/*:::::::::::::::::: HEADER ::::::::::::::::::::*/

.title { display: none; }

.headerimage {
            margin: 0px; padding: 0px; height: 600px;
            background: url(http://i40.photobucket.com/albums/e227/Darknesshanyou/Blogskin%20stuff/JunLJskinnakdsolo.jpg) top center no-repeat;
             }

/*::::::::::::::::::Menu:::::::::::::::::::*/

ul.navheader { display:none;
	margin: 0px; 
        padding: 1px 0px 0px 0px;
	font-size: 10px;
	line-height: 19px;
	font-family: arial, sans serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
       	border-bottom: 1px solid #EDEDED;
        border-top: 1px solid #F6F6F6;
        background: url(http://i239.photobucket.com/albums/ff183/pg_layouts/layout01/bg_menu.jpg) repeat;
	}

ul.navheader li { display: inline; list-style-type: none; }

ul.navheader li a:link, 
ul.navheader li a:visited {
	color: #BBBBBB; text-decoration: none; font-size: 10px;
        padding: 4px 20px 4px 20px;
	}

ul.navheader li a:hover {
	color: #ff0000; 
        text-decoration: none;
        background: #F8F8F8;
	}

li.view {
	padding: 4px 20px 4px 20px;
        white-space: nowrap; 
        color: #FFBE22;
	}

/*:::::::::::::::::: ENTRIES :::::::::::::::::::*/

.subcontent { margin: 0px; padding: 0px; 
background: url(http://www.k10k.net/_img/pixelpatterns/tiles/pat_20030820204447.gif);}

.entry { margin: 2px; padding: 10px; text-align: justify;
background: url(http://www.k10k.net/_img/pixelpatterns/tiles/pat_20031008191035.gif);
      }

.entry ol li { list-style-type: decimal-type; }
	
.entry ul li { list-style-type: square; }

h3 {
   font-family: arial, sans-serif;
   font-size: 14px; font-weight: normal; color: #AAAAAA;
   }

.Linkbar li {
     padding: 0px 5px 0px 5px;
     margin: 0px;     
     display: inline;
     }

.Holder {
    color: #5DA9BB;
        background-color: #5DA9BB;
        }

/*::::::::Previous/Later edit...:::::::::::*/

.skiplinks {

margin: -3px 0px 10px 0px;
           color: #BBBBBB; text-align: center;
           }

/*:::::::::::::::Entries separators::::::::::::::::*/

.clear { height: 3px; }

.separator{ height: 20px; }

hr {
   border-width: 0px;
   border-bottom: #EAEAEA solid 1px;
   color: #FFFFFF;
   }

/*:::::::::::::::::Entries userpics:::::::::::::::*/

.userpic, .userpicfriends {
	float: right; z-index: 15;
	margin: 34px 2px 10px 10px;
	text-align: center;
	background-color: transparent !important;
        color: #000;
	}

.userpic a:link, .userpicfriends a:link, .userpic a:visited, .userpicfriends a:visited,
.userpic a:active, .userpicfriends a:active, .userpicfriends a font { color: #000!important; }

.userpicfriends a:hover font { color: #000!important; }
	
/*::::::::::::::Entries subject:::::::::::::::*/

.datesubject { margin: 0px; padding: 0px; }

.date { padding: 2px 0px 2px 0px; color: #000; }

.subject {
     background: url(http://i40.photobucket.com/albums/e227/Darknesshanyou/Blogskin%20stuff/nakedsubjectline.jpg);
     color: #ffffff;
     font-family: sans-serif, arial;
     font-size: 10px;
     padding: 4px 0px 3px 10px;
     font-weight: normal;
     text-transform: uppercase;
     line-height: 20px;
   letter-spacing: 1px;
	text-align: center;
        line-height: 25px;
margin-bottom: 20px;
     }

/*::::::::::::::::::Currents::::::::::::::::::*/

.ljtags {
	margin: 20px 0px 0px 0px;
	padding: 0px;
	font-weight: normal;
	color:#AAAAAA;
	}

.currentmood img {display: none;}

.currents strong { font-weight:normal; color: #AAAAAA; }

/*:::::::::::::::Leave a comment::::::::::::::::*/

.comments {
	margin: 10px 0px 0px 0px;
	padding: 0px;
	text-align: right;
	text-transform: lowercase;
	list-style-type: none;
        clear: right !important;
	}

div.comments a, div.comments a:link, div.comments a:visited {
	margin: 0px; padding: 0px; text-decoration: none;
	}

/*::::::::::::::::COMMENTS PAGE:::::::::::::::::*/

.box {
     padding: 10px 0px 0px 0px;
     margin: 0px;
     color: #AAAAAA;
     clear: right;
     }

.commentbox {
    border-color: #EAEAEA;
    border-width: 1px;
    border-style: solid;
    padding: 10px;
    margin: 14px 0px 20px 0px;
    padding: 29px 15px 10px 14px;
    color: #777777;
    background-color: #F6F6F6;
    text-align: justify;
    font-size: 11px;
    }

.datesubjectcomment {
        padding: 5px;
        color: #000;
        padding-bottom: 8px;
        font-size: 10px;
        }

.userpiccomment {
    position: relative;
    padding: 1px;
    margin: -15px 14px 0px 0px;
    z-index: 15;
    float: left;
    }

/*:::::::::::::::Text of the comment::::::::::::::::*/

.commentreply {
    position: relative;
    margin: 0px 0px 10px 0px;
    color: #777777;
    font-size: 10px;
    }

.commentboxpartial {
    border-color: #EAEAEA;
    border-width: 1px;
    border-style: solid;
    padding: 10px;
    margin: 20px;
    margin-right: 0px;
    background-color: #F6F6F6;
    color: #777777;
    font-size: 10px;
    }

/*checkbox */
.ljcomsel { border-width: 0px; background: #FFFFFF; margin: 0px; }

/*:::::::::::::::COMMENT FORM:::::::::::::::: */

#postform { margin: 8px 0px 10px 0px; }

textarea.textbox  {
      width: 99% !important;
      font-family: verdana, tahoma, arial, sans-serif;
      font-size: 10px;
      color: #555555;
      margin: 1px 0px 2px 0px;
      }

select, option {
       font-family: verdana, tahoma, arial, sans-serif;
       font-size: 9px;
       height: 18px;
       width: 195px;
       color: #555555;
       margin-top: 4px; 
      }

input {
      font-family: verdana, tahoma, arial, sans-serif;
      font-size: 10px; color: #555555;
      margin: 1px 0px 1px 0px;     
      }

label { font-family: verdana, tahoma, arial, sans-serif; font-size: 9px; }

/*::::::::::::::Post a comment:::::::::::::*/

.replytoposter {
            color: #555555;
            padding: 10px 0px 1px 0px;
            margin: 0px 0px 10px 0px;
            border-top: 0px solid #EAEAEA;
            }

.replytosubject {
            margin: 0px 0px 5px 0px;
            font-weight: bold; color: #555555;
            text-transform: normal;

}

/*:::::::::::::::::::SIDEBAR::::::::::::::::::::*/

.sbarbody { margin: 0px; padding: 5px; color: #AAAAAA; }

.sbarheader { margin: 0px; padding: 5px; }
	
li.sbartitle {
font-family : georgia, serif;
font-size : 12pt;
color : #740606;
width : 100%;
letter-spacing : 2pt;
padding : 0 0 0 0;
border-bottom : 1px dotted #203a5f;
text-align : left;
	}

/*:::::::::::::::::Userpic::::::::::::::::*/

.defaultuserpic { padding: 20px 0px 0px 3px; text-align: center; }

.defaultuserpic a img {
	border-width: 2px;
        border-style: solid;
        border-color: #EAEAEA;
        background-color: #F8F8F8;
        padding: 10px;
	}

.defaultuserpic a:hover img { border-color: #555555; }

/*:::::::::::::::Blurb::::::::::::::::*/

.sbarbody2 {
	margin: 0px;
	padding: 0px 0px 0px 5px;
	color: #AAAAAA;
        text-align: justify;
	}

/*:::::::::::::::::Lists:::::::::::::::::*/

ul.sbarlist { margin: 0px; padding: 0px; list-style: none; }

li.sbaritem { color: #AAAAAA; }

li.sbaritem a {
         display: block;
         line-height: 12px;
	 padding: 2px 0px 3px 3px;
	 border-bottom: 1px solid #EAEAEA;
         text-transform: lowercase;
	 }
/*:::::::::::::::Calendar::::::::::::::::*/

table.calendar { width: 100%; margin: 1px 0px 0px 1px; }

table.calendar td {
        border: 1px solid #EAEAEA;
	text-align: center;
        color: #BBBBBB; font-size: 9px;
        background: url(http://i239.photobucket.com/albums/ff183/pg_layouts/layout01/bg_menu.jpg) repeat;
        }

.sbarcalendarposts a { display: block; }

.sbarcalendarposts { background: #FFFFFF; }

.sbarcalendarposts:hover a { color: #FFFFFF; }
	
.sbarcalendarposts:hover { background: url(); }
/*::::::::::::::::: ARCHIVES :::::::::::::::::::*/

ul.year { padding: 0px; margin: 0px 0px 10px 0px; }

ul.year li {
	display: inline;
	color: #555555;
	font-size: 10px;
        font-weight: normal;
	margin: 0px;
	}
	
.yeardate a { font-weight: normal; }

ul.year	{ text-align: center; }

/*::::::::::::::::::::::::::::::::*/

table.yeartable {
	margin-left: auto; margin-right: auto;
	width: 80%;
	}

table.yeartable td.yeardate {
	border: 1px solid #EAEAEA;
        padding-right: 2px;
       	background: #F9F9F9;
	}

table.yeartable td.yearday {
        border: 1px solid #EAEAEA;
	text-align: center;
        background: #FFFFFF;
	}

td.yearmonth { border-style: none; }

/*::::::::::::::::: TAGS PAGE ::::::::::::::::::*/

.ljtaglist {
       list-style-type:none;
       padding: 0px; margin: -1px 0px 0px 3px;
       }

H2 {
   font-family: sans-serif, arial;
   font-weight: normal;
   font-size: 10px;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: #555555;
   margin: 2px 0px 3px 3px;
   }

/*:::::::::::::::::: FOOTER ::::::::::::::::::::*/

ul.navfooter {
	width: 100%;
	padding: 10px 0px 3px 0px; margin: 0px;
	text-align: center;
	list-style-type: none;
	font-weight: normal;
	}

.navfooter li  {
	display: inline;  
        margin: 0px; padding: 0px 10px 0px 0px;
	}

.navfooter a:link, .navfooter a:visited, .navfooter a:active { padding: 0px 0px 0px 10px; }

.clearfoot {
	margin: 0px; padding: 0px;  
        clear: both; height: 0px;
	}

PLEASE CREDIT ME IN THE SIDEBAR IF YOU USE THIS SKIN. Also, please COMMENT if you're using this skin, thank you!

A simple "LJ Skin made by:

berniechan " will suffice.

Comments/Feedback are welcome, and greatly loved!

X-posted.

LINK TO TUTORIAL: HERE! HERE!

Post a comment in response:

From:

Anonymous This account has disabled anonymous posting.

OpenID

Dreamwidth account

If you don't have an account you can create one now.

Subject

HTML doesn't work in the subject.

Formatting type

Message