euphoric_zone

The second of the LAYOUT CHALLENGE skins!

I present to you: Aiba Masaki - "Because Angels Do Exist"

Skin information:

S2, Flexible Squares
Perfectly fine in Firefox, not sure about IE and other browsers
Color theme: White, Orange, Brown-ish

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.

Credits to

yuckie_chan for the scan.

TEASER:

CODE:

/* Cleaned CSS: */
/*------------------------------------------------------------------
 S2 Flexible Squares
 Layout and Graphics by berniechan @ berniechan.livejournal.com

Header Scan from: yuckie-chan.livejournal.com

--------------------------------------------------------------------*/

body {background: #f3f2e1; text-align: left; color: #676767; font-family: arial, sans-serif; font-size: 8pt; margin: 0;}
::-moz-selection {color: #FFF; background: #FFAA3F;}

a, a:link, a:visited {color: #FEAA3F; text-transform: lowercase; text-decoration: none; cursor:default;}
a:hover {color: #676767; text-transform: lowercase; text-decoration: none; cursor: default;}
h2 {padding-left: 30px; font-size: 8pt; text-transform: uppercase;}

#content {width: 850px; margin: 0 auto; background: #FFF;}
#maincontent {margin-right: 170px; margin-left: 0px; text-align: left; background: #FFF;}
#sidebar {background: #FDFDFD;  border: 1px solid #F8F8F8; width: 150px; float: right; text-align: justify; padding: 5px;}
#sidebar .defaultuserpic img {background: #FDFDFD; border: 1px solid #F8F8F8; padding: 0px;}
#header {background: #F8F8F8; width: auto; padding: 15px 0; margin: 0 auto; text-align: center; font-weight: bold;}
#sidebar .defaultuserpic {text-align: center;}
div#header a, div#footer a {text-transform: uppercase;}

.title, .subtitle {display: none;}
ul.navheader {padding: 0; margin: 0;}
ul.navheader li {display: inline; padding: 0 10px;}
.entry ul li {padding-left: 5px; margin-left: 15px;}
.entry ol li {padding-left: 5px; margin-left: 15px;}

.entry_text {min-height: -20px;}
.entry {padding: 10px; margin-top: 0px; text-align: left;}
.entry_text img {max-width: 600px; overflow: hidden;}
.userpic {position: relative; float: left; background: #FDFDFD; padding: 5px; margin: 10px; border: 1px solid #F8F8F8;}

.datesubject {text-align: right; text-transform: uppercase;}
.date {margin: 20px 10px 0 0; color: #3c322c;}
.subject {font-weight: bold;}
.subject a {color: #FEAA3F;}
.subject a:hover {color: #676767;}

.currents {color: #CCCCCC; text-align: left; text-transform: lowercase;}
.ljtags {padding-top: 10px; color: #CCCCCC; font-weight: bold; text-align: left; text-transform: lowercase;} 
.ljtaglist {list-style-type: square;} 
.comments {text-align: right;}
div.comments a {text-transform: uppercase; font-weight: bold;}
.userpicfriends {position: relative; float: left; padding: 5px; margin: 10px; text-align: center; color: #676767; border: 1px solid #F8F8F8;
background-color: #FDFDFD !important; font-family: arial, sans-serif; font-size: 8pt;}

.sbartitle, .sbarbody, .sbarbody2 {padding: 0;}
.sbarcalendar, .sbarcalendarposts {text-align: center;}
ul.sbarlist {padding-left: 0; margin-left: 0; list-style: none;}
li.sbaritem {padding-left: 0; list-style: none;}
li.sbartitle {padding-left: 0; list-style: none; margin: 10px 0; text-transform: uppercase; font-size: 8pt; font-weight: bold;}
li.view {text-transform: uppercase;}

#footer {text-align: center; font-weight: bold; clear: both; text-transform: lowercase;}
ul.navfooter {padding: 0; margin: 0;}
ul.navfooter li {display: inline; margin: 0 10px;}
ul.year {text-align: center; padding-bottom: 40px;}
ul.year li {display: inline;}

.clearfoot {clear: both;}
table.yeartable {margin: 0 auto;}
table.yeartable td.yeardate, table.yeartable td.yearday {border: 1px solid #F8F8F8;}
table.yeartable td.yearday {background: #F8F8F8; text-align: center;}
td.yearmonth {border: 0;}

input, textarea, select, option, button {font-family: arial, sans-serif; background: #FDFDFD; border: 1px solid #F8F8F8; font-size: 8pt; color:#676767;}
#postform img {display: none;}
textarea.textbox {width: 95% !important;}
.datesubjectcomment {background: #F8F8F8; padding: 5px; margin-top: 20px;}
.userpiccomment {position: relative; top:-30px; left: 0; border: 5px solid #FDFDFD; background: #FDFDFD; padding: 5px;
margin: 10px 10px -20px 10px; float: left; border: 1px solid #F8F8F8;}
.box {border: 0p; padding: 10px; clear: none !important;}
.reply {position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: justify; background: #FDFDFD; color: #676767;}
.replytosubject {font-weight: bold;}
.commentreply {position: relative; margin: 10px; font-size: 8pt; font-family: arial, sans-serif; color: #676767;}
.commentbox {border: 1px solid #F8F8F8; margin: 10px; background: #FDFDFD;}
.datesubjectcomment a:link {color: #676767;}
.commentboxpartial {border: 1px solid #F8F8F8; margin: 10px; background: #FDFDFD;}
.commentinfo {background: #FDFDFD; margin-top: 10px; width: 100%;} 
.skiplinks {text-align: center;}

/*--------------------------------------------------------
 Tiny Icons by http://famfamfam.com
-----------------------------------------------------------*/
.entry img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important;
background: url(http://img410.imageshack.us/img410/5689/locksp5.png);}
.entry img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important;
background: url(http://img99.imageshack.us/img99/7119/keyyi6.png);}
.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important;
background: url(http://img410.imageshack.us/img410/5689/locksp5.png);}
.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important;
background: url(http://img99.imageshack.us/img99/7119/keyyi6.png);}
#sidebar_summary img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important;
background: url(http://img410.imageshack.us/img410/5689/locksp5.png);}
#sidebar_summary img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important;
background: url(http://img99.imageshack.us/img99/7119/keyyi6.png);}
.ljuser img {width: 0; height: 0; background-repeat: no-repeat; background-color: transparent;
background-image: url(http://img294.imageshack.us/img294/9362/userei1.png); padding: 16px 16px 0 0 !important;}
.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {background-color: transparent;
background-image: url(http://img294.imageshack.us/img294/9362/userei1.png); padding: 16px 16px 0 0 !important;}
.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {background-color:transparent;
background-image: url(http://img401.imageshack.us/img401/5836/groupcw8.png); padding: 16px 16px 0 0 !important;}

/*----------------------------------------------------------------------------------------
 Add Your Own Header	-	edit your width, height and header url
-----------------------------------------------------------------------------------------*/
.headerimage {position: relative;  margin: 0 auto; width: 880px; height: 595px;
background: url('http://i40.photobucket.com/albums/e227/Darknesshanyou/Blogskin%20stuff/aibaangelsdoexistCOMPRESSED-1.gif') no-repeat;}/

[LAYOUT TUTORIALS]

PLEASE CREDIT AND COMMENT WHEN TAKING.
A simple "LJ Layout by

berniechan " in the sidebar will suffice.

A version with a NON-GIF header will be available soon.

Current Mood: artistic
Current Music: Arashi - Oh Yeah!

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!

Current Mood: bouncy
Current Music: Matsumoto Jun - Naked

You heard me, that's right, The Great LJ Layout Challenge will begin today.

What is it? I'm going to make 100 LJ Layouts. Crazy, I know. But I'm striving to get it done.

COMPLETED: 2/100

#1 - Matsumoto Jun, "Naked"
#2 - Aiba Masaki, "Because Angels Do Exist"

In Progress: 5/98

Changing Layout Tutorial

Current Mood: anxious
Current Music: Akanishi Jin- LOVEJUICE