Layout Post #5!

Jun 12, 2008 12:42

Yes, one more Ayumi Layout, then a BLACK DIAMOND one, hopefully!
This time you can also pick between with and without layout!

And this layout coding is now packed with a sidebar where you can have tags etc!





&


TITLE : AYUMI HAMASAKI - MIRRORCLE WORLD
STYLE : S2
TYPE : FLEXIBLE SQUARES
WORKS ON : FREE, PAID, SPONSORED


Click here to see a screenshot of the layout WITH BACKGROUND!
Click here to see a screenshot of the layout WITHOUT BACKGROUND!

USE THIS CODE IF YOU WANT THE ONE WITH THE BACKGROUND
BODY {
margin-top: 0px;
background-color:#fffffd;
background-image: url('http://i29.tinypic.com/15qadn6.png');
background-repeat: repeat;
background-position: top-left;
background-attachment: fixed;
text-align: center;
font-size: 11px;
color: #38434e;
font-family: "Trebuchet MS", sans-serif;
}

a, a:link, a:visited {
text-decoration: none;
color: #095794;
padding: 0px;
}

a:hover {
text-decoration: line-through;
color: #6d93b1;
background:;
padding: 0px;
}

code, kbd, pre, tt {
font-family: ariel;
}

p, td, blockquote {
font-size: 11px;
background-color: #38434e;
}

#content {
width: 750px;
margin-left: auto;
margin-right: auto;
border-top: solid 40px #fffffe;
background-color: #fffffe;
background-repeat: repeat;
padding: 0px;
text-align: justify;
}

#maincontent {
padding: 5px;
margin-top: 10px;
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 15px;
background-color: #fffffe;
background-repeat: repeat;
color:#38434e;
border-style: dashed;
border-color:#dddddd;
border-width: 0px;
margin-right: 0px;
margin-left: 200px;
text-align: justify;
}

#header {
width: auto;
padding-top: 3px;
padding-bottom: 3px;
line-height: 30px;
background-color: # fffffe;
background-repeat: no-repeat;
width: 750px; height: 30px
background-position: center;
font-family: "Trebuchet Ms", sans-serif;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #888888;
text-align: center;
letter-spacing: 1px;
border-width: 0px;
}

#footer {
width: auto;
padding-top: 0px;
padding-bottom: 0px;
line-height: 60px;
background-color: ;
background-repeat: no-repeat;
width: 750px; height: 30px
background-position: center;
font-family: "Trebuchet Ms", sans-serif;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #888888;
text-align: center;
letter-spacing: 1px;
border-width: 0px;
}

#sidebar {
padding: 10px;
margin-top: 10px;
background-color: #fffffe;
background-repeat: repeat;
border-width: 0px;
font-size: 10px;
line-height: 11pt;
font-family: "arial", sans-serif;
color: #6d93b1;
width: 150px;
float: left;
text-align: justify;
}

/* header -- links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:visited, div#header a:active {
padding: 3px;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #6d93b1;
text-align: center;
letter-spacing: 1px;
background-color: ;
}

div#header a:hover {
padding:3px;
color: #777777;
background-color: ;
border-bottom: 0px dashed;
}

div#footer a, div#footer a:link, div#footer a:visited, div#footer a:active {
padding: 3px;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #095794;
text-align: center;
letter-spacing: 1px;
background-color: ;
}

div#footer a:hover {
padding:3px;
color: #777777;
background-color: ;
border-bottom: 0px dashed;
}

ul.navheader {
padding: 5px;
margin: 5px;
}

ul.navheader li {
display: inline;
padding: 5 3px 5 3px;
}

.title {
display: none;
text-align: center;
color: #fffffe;
font-family: "Trebuchet MS", sans-serif;
font-size: 0px;
letter-spacing: 0pt;
text-transform: uppercase;
}

.subtitle {
display: none;
text-align: center;
color: #FEFEFE;
font-family: "Trebuchet MS", sans-serif;
font-size: 0px;
letter-spacing: 0pt;
line-height: 0pt;
text-transform: lowercase;
}

/* footer */

ul.navfooter {
padding: 10px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}
.clearfoot {
display: none;
clear: both;
}

/* sidebar */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #095794;
text-decoration: none;
background-repeat: repeat;
background-color:;
}

div#sidebar a:hover {
color:#6d93b1;
text-decoration: line-through;
background-repeat: repeat;
background-color:;
}

.defaultuserpic {
text-align: left;
padding: 6px;
z-index: 0;
background-color: #fffffe;
background-repeat: no-repeat;
border-width: 0px;
border-color: #fffffd;
border-style: dashed;
}

.sbarheader {
padding: 0px 5px 0px 5px;
color: #fffffe;
text-align: center;
}

.sbarbody {
padding: 0 0px 0 0px;
}

.sbarbody2 {
padding: 0 0px 0 0px;
}

table.calendar {
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
border-width: 0px;
border-style: dashed;
border-color: #dddddd;
font-family: "arial", sans-serif;
font-size: 10px;
text-align: center;
}

.sbarcalendarposts {
background-color:#fffffd;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 10px;
border-width: 1px;
border-color: #bbbbbb;
}

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

li.sbaritem {
margin: 5px 2px 2px 2px;
padding: 2px 2px 2px 7px;
list-style: none;
background-color: #fffffe;
background-repeat: repeat;
border-bottom: 1px dashed #dddddd;
}

li.sbaritem:hover {
background-color: #fffffe;
background-image: url(' ');
background-repeat: repeat;
}

li.sbartitle {
padding-left: 0px;
padding-right: 0px;
text-align:left;
padding: 5px;
list-style: none;
margin-bottom: 1px;
margin-top: 0px;
color:#6d93b1;
border-bottom: dashed 1px #DFDFDF;
font-weight: none;
font-family: "arial", sans-serif;
text-transform: uppercase;
font-size: 12px;
background-color: #fffffe;
background-repeat: repeat;
letter-spacing: 2pt;
}

/* maincontent -- entry, reply pages */
.subcontent {
background-color: #fffffe;
background-repeat: repeat;
}

.entry {
margin: 10px 150px 10px 10px;
padding: 5px 10px 10px 10px;
background-color: #fffffe;
background-repeat: repeat;
color: #888888;
font-weight: lighter;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 11px;
text-align: justify;
border-width: 0px;
border-color: #fffffd;
border-style: solid;
}

.entry ul li {
padding-left: 5px;
margin-left: 15px;
}

.entry ol li {
padding-left: 5px;
margin-left: 15px;
}

.userpic {
position: relative;
float: right;
padding: 6px;
margin-right: 5px;
margin-left: 5px;
z-index: 15;
background-repeat: no-repeat;
border-width: 0px;
border-color: #fffffd;
border-style: dashed;
}

.userpicfriends {
position: relative;
float: right;
margin: 5px;
padding: 6px;
text-align: center;
font-family: "arial", sans-serif;
font-size: 9px;
z-index: 15;
border-style: dashed;
border-width: 0px;
border-color: #fffffd;
background-color: #fffffd !important;
background-repeat: no-repeat;
}

.date {
line-height: 200%;
top: 3px;
font-family: "arial", sans-serif;
font-size: 9px;
color: #fffffd;
text-align: left;
letter-spacing: 1px;
font-weight: none;
text-transform:lowercase;
background-color: #fffffe;
}

.subject {
padding: 2px;
font-weight: light;
font-size: 11px;
color:#095794;
font-family: "arial", sans-serif;
text-align: left;
border-bottom: 1px #aaaaaa dashed;
text-transform:uppercase;
background-color: #fffffe;
background-repeat: repeat;
letter-spacing: 1pt;
}

.subject a, .subject a:link, .subject a:visited {
color: #fffffd;
}

.subject a:hover {
color: #38434e;
}

::-moz-selection {
background: #ED757E;
color: #fffffd;
}

blockquote {
margin: 15px 15px 15px 15px;
text-align: justify;
color: #888888;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 10px;
border: 1px #aaaaaa dashed;
padding: 10px;
}

textarea {
margin: 15px 15px 15px 15px;
text-align: justify;
color: #888888;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 10px;
border: 1px #aaaaaa dashed;
padding: 10px;
}

.datesubject {
background-color: #fffffe;
background-repeat: repeat;
padding: 2px;
}

.currents, .currentmood, .currentmusic {
font-family: "arial", sans-serif;
font-size: 10px;
color: #6d93b1;
}

.comments {
font-family: "arial", sans-serif;
font-size: 14px;
text-align: right;
font-weight: none;
padding: 10px;
position: relative;
top: 10px;
border-top: dashed 1px #DFDFDF;
background-color: #fffffe;
background-repeat: repeat;
text-transform:uppercase;
letter-spacing: 2pt;
}

/* for formatting separators between entries */
.separator {
background: #fffffe;
height: 25px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #095794;
font-size: 14px;
padding: 2px;
font-weight: lighter;
}

div.comments a:hover {
font-size: 14px;
font-weight: lighter;
color: #666666;
background: ;
padding: 2px;
}

.ljtags {
font-family: "arial", sans-serif;
font-size: 10px;
color: #666666;
margin-top: 15px;
font-weight: none;
text-transform: lowercase;
position: left;
}

.headerimage {
position: relative;
width: 750px; height: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url('http://i26.tinypic.com/2lwd3p.png');
background-repeat: no-repeat;
}

.datesubjectcomment {
background-color: #fffffe;
background-image: url(' ');
background-repeat: repeat;
padding: 5px;
margin-top: 20px;
}

.userpiccomment {
position: relative;
border-width: 1px;
border-style: solid;
border-color: #BED870;
background-color: #BED870;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 1px;
border-color: #919bad;
border-style: solid;
}

.box {
border-style: dotted;
border-width: 1px 0px 0px 0px;
border-color: #6d93b1;
padding: 8px;
clear: left;
}

input, textarea {
background-color: 6d93b1;
color: #38434e;
}

textarea.textbox {
width: 100% !important;
}

.reply {
position: relative;
margin: 10px 5px 5px 30px;
padding: 15px 5px 5px 5px;
text-align: left;
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 100%;
background-color: #fffffe;
background-repeat: repeat;
color: #38434e;
}

.replytosubject {
font-weight: none;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "arial", sans-serif;
color: #6d93b1;
}

.commentbox {

border-color: #BED870;
border-width: 1px;
border-style: dotted;
padding: 10px;
margin: 10px;
background-color: #fffffe;
background-image: url(' ');
background-repeat: repeat;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: ##58b1ec;
}

.datesubjectcomment a:hover {
color: #888888;
}

.commentboxpartial {
border-color: #6d93b1;
border-width: 1px;
border-style: solid;
padding: 9px;
margin: 9px;
background-color: #BED870;
}

.commentinfo {
background-color: #fffffe;
background-repeat: repeat;
margin-top: 12px;
width: 100%;
}

/*
MAKER : KOMOREBII @ LJ
*/

USE THIS CODE IF YOU WANT THE ONE WITHOUT THE BACKGROUND
BODY {
margin-top: 0px;
background-color:#fffffd;
background-image: url('BACKGROUND IMAGE URL HERE');
background-repeat: repeat;
background-position: top-left;
background-attachment: fixed;
text-align: center;
font-size: 11px;
color: #38434e;
font-family: "Trebuchet MS", sans-serif;
}

a, a:link, a:visited {
text-decoration: none;
color: #095794;
padding: 0px;
}

a:hover {
text-decoration: line-through;
color: #6d93b1;
background:;
padding: 0px;
}

code, kbd, pre, tt {
font-family: ariel;
}

p, td, blockquote {
font-size: 11px;
background-color: #38434e;
}

#content {
width: 750px;
margin-left: auto;
margin-right: auto;
border-top: solid 40px #fffffe;
background-color: #fffffe;
background-repeat: repeat;
padding: 0px;
text-align: justify;
}

#maincontent {
padding: 5px;
margin-top: 10px;
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 15px;
background-color: #fffffe;
background-repeat: repeat;
color:#38434e;
border-style: dashed;
border-color:#dddddd;
border-width: 0px;
margin-right: 0px;
margin-left: 200px;
text-align: justify;
}

#header {
width: auto;
padding-top: 3px;
padding-bottom: 3px;
line-height: 30px;
background-color: # fffffe;
background-repeat: no-repeat;
width: 750px; height: 30px
background-position: center;
font-family: "Trebuchet Ms", sans-serif;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #888888;
text-align: center;
letter-spacing: 1px;
border-width: 0px;
}

#footer {
width: auto;
padding-top: 0px;
padding-bottom: 0px;
line-height: 60px;
background-color: ;
background-repeat: no-repeat;
width: 750px; height: 30px
background-position: center;
font-family: "Trebuchet Ms", sans-serif;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #888888;
text-align: center;
letter-spacing: 1px;
border-width: 0px;
}

#sidebar {
padding: 10px;
margin-top: 10px;
background-color: #fffffe;
background-repeat: repeat;
border-width: 0px;
font-size: 10px;
line-height: 11pt;
font-family: "arial", sans-serif;
color: #6d93b1;
width: 150px;
float: left;
text-align: justify;
}

/* header -- links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:visited, div#header a:active {
padding: 3px;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #6d93b1;
text-align: center;
letter-spacing: 1px;
background-color: ;
}

div#header a:hover {
padding:3px;
color: #777777;
background-color: ;
border-bottom: 0px dashed;
}

div#footer a, div#footer a:link, div#footer a:visited, div#footer a:active {
padding: 3px;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #095794;
text-align: center;
letter-spacing: 1px;
background-color: ;
}

div#footer a:hover {
padding:3px;
color: #777777;
background-color: ;
border-bottom: 0px dashed;
}

ul.navheader {
padding: 5px;
margin: 5px;
}

ul.navheader li {
display: inline;
padding: 5 3px 5 3px;
}

.title {
display: none;
text-align: center;
color: #fffffe;
font-family: "Trebuchet MS", sans-serif;
font-size: 0px;
letter-spacing: 0pt;
text-transform: uppercase;
}

.subtitle {
display: none;
text-align: center;
color: #FEFEFE;
font-family: "Trebuchet MS", sans-serif;
font-size: 0px;
letter-spacing: 0pt;
line-height: 0pt;
text-transform: lowercase;
}

/* footer */

ul.navfooter {
padding: 10px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}
.clearfoot {
display: none;
clear: both;
}

/* sidebar */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #095794;
text-decoration: none;
background-repeat: repeat;
background-color:;
}

div#sidebar a:hover {
color:#6d93b1;
text-decoration: line-through;
background-repeat: repeat;
background-color:;
}

.defaultuserpic {
text-align: left;
padding: 6px;
z-index: 0;
background-color: #fffffe;
background-repeat: no-repeat;
border-width: 0px;
border-color: #fffffd;
border-style: dashed;
}

.sbarheader {
padding: 0px 5px 0px 5px;
color: #fffffe;
text-align: center;
}

.sbarbody {
padding: 0 0px 0 0px;
}

.sbarbody2 {
padding: 0 0px 0 0px;
}

table.calendar {
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
border-width: 0px;
border-style: dashed;
border-color: #dddddd;
font-family: "arial", sans-serif;
font-size: 10px;
text-align: center;
}

.sbarcalendarposts {
background-color:#fffffd;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 10px;
border-width: 1px;
border-color: #bbbbbb;
}

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

li.sbaritem {
margin: 5px 2px 2px 2px;
padding: 2px 2px 2px 7px;
list-style: none;
background-color: #fffffe;
background-repeat: repeat;
border-bottom: 1px dashed #dddddd;
}

li.sbaritem:hover {
background-color: #fffffe;
background-image: url(' ');
background-repeat: repeat;
}

li.sbartitle {
padding-left: 0px;
padding-right: 0px;
text-align:left;
padding: 5px;
list-style: none;
margin-bottom: 1px;
margin-top: 0px;
color:#6d93b1;
border-bottom: dashed 1px #DFDFDF;
font-weight: none;
font-family: "arial", sans-serif;
text-transform: uppercase;
font-size: 12px;
background-color: #fffffe;
background-repeat: repeat;
letter-spacing: 2pt;
}

/* maincontent -- entry, reply pages */
.subcontent {
background-color: #fffffe;
background-repeat: repeat;
}

.entry {
margin: 10px 150px 10px 10px;
padding: 5px 10px 10px 10px;
background-color: #fffffe;
background-repeat: repeat;
color: #888888;
font-weight: lighter;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 11px;
text-align: justify;
border-width: 0px;
border-color: #fffffd;
border-style: solid;
}

.entry ul li {
padding-left: 5px;
margin-left: 15px;
}

.entry ol li {
padding-left: 5px;
margin-left: 15px;
}

.userpic {
position: relative;
float: right;
padding: 6px;
margin-right: 5px;
margin-left: 5px;
z-index: 15;
background-repeat: no-repeat;
border-width: 0px;
border-color: #fffffd;
border-style: dashed;
}

.userpicfriends {
position: relative;
float: right;
margin: 5px;
padding: 6px;
text-align: center;
font-family: "arial", sans-serif;
font-size: 9px;
z-index: 15;
border-style: dashed;
border-width: 0px;
border-color: #fffffd;
background-color: #fffffd !important;
background-repeat: no-repeat;
}

.date {
line-height: 200%;
top: 3px;
font-family: "arial", sans-serif;
font-size: 9px;
color: #fffffd;
text-align: left;
letter-spacing: 1px;
font-weight: none;
text-transform:lowercase;
background-color: #fffffe;
}

.subject {
padding: 2px;
font-weight: light;
font-size: 11px;
color:#095794;
font-family: "arial", sans-serif;
text-align: left;
border-bottom: 1px #aaaaaa dashed;
text-transform:uppercase;
background-color: #fffffe;
background-repeat: repeat;
letter-spacing: 1pt;
}

.subject a, .subject a:link, .subject a:visited {
color: #fffffd;
}

.subject a:hover {
color: #38434e;
}

::-moz-selection {
background: #ED757E;
color: #fffffd;
}

blockquote {
margin: 15px 15px 15px 15px;
text-align: justify;
color: #888888;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 10px;
border: 1px #aaaaaa dashed;
padding: 10px;
}

textarea {
margin: 15px 15px 15px 15px;
text-align: justify;
color: #888888;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 10px;
border: 1px #aaaaaa dashed;
padding: 10px;
}

.datesubject {
background-color: #fffffe;
background-repeat: repeat;
padding: 2px;
}

.currents, .currentmood, .currentmusic {
font-family: "arial", sans-serif;
font-size: 10px;
color: #6d93b1;
}

.comments {
font-family: "arial", sans-serif;
font-size: 14px;
text-align: right;
font-weight: none;
padding: 10px;
position: relative;
top: 10px;
border-top: dashed 1px #DFDFDF;
background-color: #fffffe;
background-repeat: repeat;
text-transform:uppercase;
letter-spacing: 2pt;
}

/* for formatting separators between entries */
.separator {
background: #fffffe;
height: 25px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #095794;
font-size: 14px;
padding: 2px;
font-weight: lighter;
}

div.comments a:hover {
font-size: 14px;
font-weight: lighter;
color: #666666;
background: ;
padding: 2px;
}

.ljtags {
font-family: "arial", sans-serif;
font-size: 10px;
color: #666666;
margin-top: 15px;
font-weight: none;
text-transform: lowercase;
position: left;
}

.headerimage {
position: relative;
width: 750px; height: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url('http://i26.tinypic.com/2lwd3p.png');
background-repeat: no-repeat;
}

.datesubjectcomment {
background-color: #fffffe;
background-image: url(' ');
background-repeat: repeat;
padding: 5px;
margin-top: 20px;
}

.userpiccomment {
position: relative;
border-width: 1px;
border-style: solid;
border-color: #BED870;
background-color: #BED870;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 1px;
border-color: #919bad;
border-style: solid;
}

.box {
border-style: dotted;
border-width: 1px 0px 0px 0px;
border-color: #6d93b1;
padding: 8px;
clear: left;
}

input, textarea {
background-color: 6d93b1;
color: #38434e;
}

textarea.textbox {
width: 100% !important;
}

.reply {
position: relative;
margin: 10px 5px 5px 30px;
padding: 15px 5px 5px 5px;
text-align: left;
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 100%;
background-color: #fffffe;
background-repeat: repeat;
color: #38434e;
}

.replytosubject {
font-weight: none;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "arial", sans-serif;
color: #6d93b1;
}

.commentbox {

border-color: #BED870;
border-width: 1px;
border-style: dotted;
padding: 10px;
margin: 10px;
background-color: #fffffe;
background-image: url(' ');
background-repeat: repeat;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: ##58b1ec;
}

.datesubjectcomment a:hover {
color: #888888;
}

.commentboxpartial {
border-color: #6d93b1;
border-width: 1px;
border-style: solid;
padding: 9px;
margin: 9px;
background-color: #BED870;
}

.commentinfo {
background-color: #fffffe;
background-repeat: repeat;
margin-top: 12px;
width: 100%;
}

/*
MAKER : KOMOREBII @ LJ
*/

The images are already hosted up on tinypic.com, but I recommend you to save them on your own server instead.

Link to the header
Link to the background

1. Please do credit (:! Making layouts and coding takes a lot of work!
There is no watermark on the headers or anywhere else in the layout. Please add credit on your profile ♥

2. Please do comments! I love suggestions and honest critique, what could have been better?'

3. Please do not redistribute on other pages or communities!

4. You're of course allowed to change the colors of links etc & layout header, but I'd still like credit :D

Got any questions or need help? Feel free to ask :] !

Like what you see? Please do watch Komorebii~~ ♥

* user: arwenchan, other: layout, music artist: ayumi hamasaki

Previous post Next post
Up