Elegance beyond simplicity - Miyavi layout
Band/theme : Miyavi - solo / s.k.i.n
Theme: Flexible Squares
Type : s2
Account: free/plus/paid
Since I rarely do a Flexible Squares layout, I did this one, just to remember the FS codes ;P
It's a pretty simple Layout. XD
REMEMBER :
If you're taking this, comment here with your ljusername and put where this layout will be used. Don't forget to credit this livejournal on your links. PLEASE.
This Lj layout as made by valuexofxpain
Click on the image for a live version:
This Lj is a live test for this current layout made by valuexofxpain.
Codes and Intructions :
Images you'll need:
Header
BODY_BG
Code :
/* For this layout to work you must set you journal on Flexible squares default layout and activate the customized
css, pasting this code there */
/* ctrl+f to localize the IMAGE_HEADER and BODY_BG and change for the link were you put your image */
body{
background-color: #ffffff;
text-align: center;
color: #ffffff;
line-height: 15px;
font-family: Tahoma;
font-size: 10px;
margin-top: 0;
margin-left: 0px;
background-image: url(BODY_BG);
background-repeat: repeat-y;
background-position: top left;
}
p, td {
font-size: 10px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/* main links */
a, a:link, a:visited, a:active {
color: #fb839d;
font-weight: normal;
text-decoration: none;
}
a:hover {
color: #a1133a;
background:#ffffff;
font-weight: normal;
text-decoration: none;
}
/* quotation */
blockquote {
margin: 10px 10px;
padding: 10px;
color: #fb839d;
line-height: 15px;
font-size: 11px;
font-family: Trebuchet MS;
border: 1px solid #a1133a;
background-color: #ff356d;
text-align: justify;
}
/* all content */
#content {
width: 780px;
margin-top: 0;
margin-bottom: 0;
margin-left: 0px;
margin-right: auto;
background-color: transparent;
padding: 0;
border:0px;
}
#maincontent {
left: 350px;
width: 388px;
border:0px;
top:170px;
position:absolute;
z-index:200;
}
#sidebar {
padding-top: 5px;
margin-top: 5px;
background-color: transparent;
border-width: 0px;
border-style: solid;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #ffffff;
width: 265px;
float:left;
text-align: left;
margin-left:18px;
}
.sbartitle
{
list-style: none;
border-style: solid;
border-width: 0px;
border-color: #999999;
background-color: transparent;
margin-bottom: 10px;
margin-top: 10px;
text-align:center;
font-size:14px;
font-face:arial;
border-bottom:1px solid #ffffff;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #fb839d;
}
div#sidebar a:hover {
color: #4c0716;
text-decoration: none;
}
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
}
#sidebar_summary li.sbaritem {
margin: 0 10px;
padding: 3px 0;
border-bottom: 0px #999999 solid;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border:1px solid #ffffff;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border-color: #000000;
border-width: 0px;
border-style: solid;
background-color: transparent;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem, .tagcloud
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
list-style: none;
}
#header {
display:none;
width: auto;
margin: 0;
padding: 5px;
text-align: center;
font-family: Tahoma;
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
color: #ffffff;
line-height: 20px;
letter-spacing: 2px;
background-color: #ff356d;
border:0px solid;
}
#footer {
width: auto;
height: 20px;
z-index: 100;
clear: both;
margin: 0;
padding: 10px 0px 10px 0px;
text-align: center;
font-family: Tahoma;
font-size: 10px;
color: #ffffff;
background-color: transparent;
background-image: url();
background-repeat: no-repeat;
background-position: center bottom;
border: 0px;
}
/* header - links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:active, div#header a:visited {
color: #FFFFFF;
padding: 5px;
font-weight: normal;
text-decoration; none;
}
div#header a:hover {
background: #ff356d;
color: #000000;
padding: 5px;
font-weight: normal;
text-decoration; none;
}
div#footer a, div#footer a:link, div#footer a:active, div#footer a:visited {
color: #a1133a;
font-weight: bold;
padding: 5px;
font-weight: normal;
text-decoration; none;
}
div#footer a:hover {
background-color: #ff356d;
color: #ffffff;
padding: 5px;
font-weight: normal;
text-decoration; none;
}
ul.navheader {
padding: 5px;
margin: 0;
}
ul.navheader li {
display: inline;
padding: 5px;
}
.title{
display: none;
}
.subtitle {
display: none;
}
/* maincontent */
.subcontent {
}
.entry{
padding-top: 0px;
background-color: transparent;
color: #ffffff;
line-height: 15px;
font-family: Tahoma;
font-size: 11px;
text-align: justify;
border: 0px;
margin: 0;
}
.entry a, .entry a:link, .entry a:visited, .entry a:active {
color: #fb839d;
font-weight: normal;
text-decoration: none;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
/* user icons on recent and friends page */
.userpic {
display:visible;
position: relative;
float: left;
}
.userpicfriends {
display: visible;
position: relative;
float: right;
padding: 5px;
margin: 10px;
text-align: center;
background-color: transparent !important;
border-width: 0px;
font-family: Tahoma;
font-size: 10px;
z-index: 15;
}
.userpicfriends a font{
font-family: Tahoma;
font-size: 10px;
z-index: 15;
color: #a1133a;
}
userpicfriends a:hover font{
font-family: Tahoma;
font-size: 10px;
z-index: 15;
color: #ffffff;
background: #a1133a;
}
/* date and entry title */
.date {
top: 0;
padding: 0;
padding-bottom: 5px;
text-align: center;
color: #c2778c;
font-family: Tahoma;
font-size: 7pt;
letter-spacing: 5px;
text-transform: uppercase;
}
.subject {
text-align: left;
font-weight: normal;
padding: 0;
padding-bottom: 10px;
font-family:Tahoma;
font-size: 12pt;
color: #ffffff;
letter-spacing:5px;
text-transform: uppercase;
border-bottom:1px solid #a1133a;
}
.subject a, .subject a:link, .subject a:active, .subject a:visited {
color: #fb839d;
font-weight: bold;
text-decoration: none;
}
.subject a:hover {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.datesubject {
background-color: transparent;
}
/* replaces default locked and ljuser images, ljuser link color */
.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 0px 0px 0;
background: url();
}
.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 0px 0px 0;
background: url();
}
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(LJIMAGE);
padding: 12px 11px 0 0;
}
.ljuser a:link, a:visited, a:active {
color: #fb839d;
font-weight: normal;
text-decoration: none;
}
.ljuser A:hover {
background: #ffffff;
color: #a1133a;
font-weight: normal;
text-decoration: none;
}
/* current mood, music, and location; tags */
.currents, .currentmood, .currentmusic, .currentlocation {
color: #ffffff;
font-size: 8pt
text-decoration:none;
font-weight:normal;
}
.currents strong{
font-weight:normal;
}
.ljtags {
margin-top: 10px;
color: #a1133a;
font-weight: bold;
}
.ljtags a, .ljtags a:link, .ljtags a:visited {
color: #fb839d;
text-decoration: none;
font-weight: normal;
}
.ljtags a:hover {
color: #ffffff;
text-decoration: none;
font-weight: normal;
}
/* comments and comment links */
.comments {
padding-left:5px;
margin-left: 60px;
width: 350px;
position: relative;
padding-bottom: 10px;
font-family: Trebuchet MS;
font-size: 11px;
font-weight: bold;
text-align: center;
color: #ffffff;
top: 15px;
background-color: transparent;
}
#commenttext{
width:300px;
color: #a1133a;
}
div.comments a, div.comments a:link, div.comments a:visited {
color: #a1133a;
font-size: 11px ;
font-weight: none;
text-decoration: none;
}
div.comments a:hover {
background-color: #ffffff;
color: #a1133a;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
/* maincontent - tags page */
h2 {
display: block;
text-align: left;
font-weight: bold;
padding: 0;
color: #a1133a;
font-family: Trebuchet MS;
font-size: 20px;
}
.ljtaglist {
text-align: left;
font-family: Tahoma;
font-size: 10px;
color: #a1133a;
}
/* maincontent - calendar page */
ul.year{
font-size: 10px;
color: #a1133a;
font-family: Tahoma;
text-align: center;
padding: 0;
padding-bottom: 10px;
border: 0px ;
background-color: transparent;
}
ul.year li {
color: #a1133a;
display: inline;
}
ul.active li {
border: 0px solid #a1133a;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
padding: 10px;
border: 0px solid #a1133a;
background-color: transparent;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
font-size: 10px;
color: #a1133a;
font-family: Tahoma;
border: 1px solid #a1133a;
}
table.yeartable td.yearday {
background-color: transparent;
text-align: center;
}
td.yearmonth {
font-size: 10px;
color: #a1133a;
font-family: Tahoma;
border-style: none;
}
/* footer */
ul.navfooter {
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}
.clearfoot {
display: none;
clear: both;
}
/* misc */
.headerimage {
position: relative;
width: 780px;
height: 542px;
margin-left: 0px;
margin-right: auto;
margin-bottom: 0 ;
background-image: url("IMAGE_HEADER");
background-repeat: no-repeat;
border:0px;
}
.clear {
height: 10px;
}
.skiplinks {
text-align: center;
border: 0px;
background-color: transparent;
}
.separator {
background-color:transparent;
background-image: url();
background-repeat: no-repeat;
background-position: bottom center;
height: 40px;
}
How to install :
1. go to Journal>Customize Journal
2. choose one of the Flexible Squares Theme
3.On page setup ( on the bottom of the same screen) fix it (accord with the layout specifications) to sidebar on left, right or none.
4. click on customize selected theme
5. on display: uncheck navigation strip
6. On the layout code you got from here, press ctrl+f to localize the HEADER_IMAGE and BODY_BG and change it for the link were you put your images.
7. on custom css : put all to 'no' and them past the code on the Custom stylesheet text area.
8. save and it's done
Any problems with the layouts can be
related here
For you journal stay pretty, go onto the display option and put YES onto the option : wrap text under userinfo. Otherwise your texts will strech the body of the layout ^.^
PS.2 - if you're using a plus account, you need to set your advertsiment to show up between your entries.
ps3. All the mistakes now fixed XD~~~
sorry for releasing it with so many bugs ;P
Theme: Flexible Squares
Type : s2
Account: free/plus/paid
Since I rarely do a Flexible Squares layout, I did this one, just to remember the FS codes ;P
It's a pretty simple Layout. XD
REMEMBER :
If you're taking this, comment here with your ljusername and put where this layout will be used. Don't forget to credit this livejournal on your links. PLEASE.
This Lj layout as made by valuexofxpain
Click on the image for a live version:
This Lj is a live test for this current layout made by valuexofxpain.
Codes and Intructions :
Images you'll need:
Header
BODY_BG
Code :
/* For this layout to work you must set you journal on Flexible squares default layout and activate the customized
css, pasting this code there */
/* ctrl+f to localize the IMAGE_HEADER and BODY_BG and change for the link were you put your image */
body{
background-color: #ffffff;
text-align: center;
color: #ffffff;
line-height: 15px;
font-family: Tahoma;
font-size: 10px;
margin-top: 0;
margin-left: 0px;
background-image: url(BODY_BG);
background-repeat: repeat-y;
background-position: top left;
}
p, td {
font-size: 10px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/* main links */
a, a:link, a:visited, a:active {
color: #fb839d;
font-weight: normal;
text-decoration: none;
}
a:hover {
color: #a1133a;
background:#ffffff;
font-weight: normal;
text-decoration: none;
}
/* quotation */
blockquote {
margin: 10px 10px;
padding: 10px;
color: #fb839d;
line-height: 15px;
font-size: 11px;
font-family: Trebuchet MS;
border: 1px solid #a1133a;
background-color: #ff356d;
text-align: justify;
}
/* all content */
#content {
width: 780px;
margin-top: 0;
margin-bottom: 0;
margin-left: 0px;
margin-right: auto;
background-color: transparent;
padding: 0;
border:0px;
}
#maincontent {
left: 350px;
width: 388px;
border:0px;
top:170px;
position:absolute;
z-index:200;
}
#sidebar {
padding-top: 5px;
margin-top: 5px;
background-color: transparent;
border-width: 0px;
border-style: solid;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #ffffff;
width: 265px;
float:left;
text-align: left;
margin-left:18px;
}
.sbartitle
{
list-style: none;
border-style: solid;
border-width: 0px;
border-color: #999999;
background-color: transparent;
margin-bottom: 10px;
margin-top: 10px;
text-align:center;
font-size:14px;
font-face:arial;
border-bottom:1px solid #ffffff;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #fb839d;
}
div#sidebar a:hover {
color: #4c0716;
text-decoration: none;
}
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
}
#sidebar_summary li.sbaritem {
margin: 0 10px;
padding: 3px 0;
border-bottom: 0px #999999 solid;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border:1px solid #ffffff;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border-color: #000000;
border-width: 0px;
border-style: solid;
background-color: transparent;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem, .tagcloud
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
list-style: none;
}
#header {
display:none;
width: auto;
margin: 0;
padding: 5px;
text-align: center;
font-family: Tahoma;
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
color: #ffffff;
line-height: 20px;
letter-spacing: 2px;
background-color: #ff356d;
border:0px solid;
}
#footer {
width: auto;
height: 20px;
z-index: 100;
clear: both;
margin: 0;
padding: 10px 0px 10px 0px;
text-align: center;
font-family: Tahoma;
font-size: 10px;
color: #ffffff;
background-color: transparent;
background-image: url();
background-repeat: no-repeat;
background-position: center bottom;
border: 0px;
}
/* header - links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:active, div#header a:visited {
color: #FFFFFF;
padding: 5px;
font-weight: normal;
text-decoration; none;
}
div#header a:hover {
background: #ff356d;
color: #000000;
padding: 5px;
font-weight: normal;
text-decoration; none;
}
div#footer a, div#footer a:link, div#footer a:active, div#footer a:visited {
color: #a1133a;
font-weight: bold;
padding: 5px;
font-weight: normal;
text-decoration; none;
}
div#footer a:hover {
background-color: #ff356d;
color: #ffffff;
padding: 5px;
font-weight: normal;
text-decoration; none;
}
ul.navheader {
padding: 5px;
margin: 0;
}
ul.navheader li {
display: inline;
padding: 5px;
}
.title{
display: none;
}
.subtitle {
display: none;
}
/* maincontent */
.subcontent {
}
.entry{
padding-top: 0px;
background-color: transparent;
color: #ffffff;
line-height: 15px;
font-family: Tahoma;
font-size: 11px;
text-align: justify;
border: 0px;
margin: 0;
}
.entry a, .entry a:link, .entry a:visited, .entry a:active {
color: #fb839d;
font-weight: normal;
text-decoration: none;
}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
/* user icons on recent and friends page */
.userpic {
display:visible;
position: relative;
float: left;
}
.userpicfriends {
display: visible;
position: relative;
float: right;
padding: 5px;
margin: 10px;
text-align: center;
background-color: transparent !important;
border-width: 0px;
font-family: Tahoma;
font-size: 10px;
z-index: 15;
}
.userpicfriends a font{
font-family: Tahoma;
font-size: 10px;
z-index: 15;
color: #a1133a;
}
userpicfriends a:hover font{
font-family: Tahoma;
font-size: 10px;
z-index: 15;
color: #ffffff;
background: #a1133a;
}
/* date and entry title */
.date {
top: 0;
padding: 0;
padding-bottom: 5px;
text-align: center;
color: #c2778c;
font-family: Tahoma;
font-size: 7pt;
letter-spacing: 5px;
text-transform: uppercase;
}
.subject {
text-align: left;
font-weight: normal;
padding: 0;
padding-bottom: 10px;
font-family:Tahoma;
font-size: 12pt;
color: #ffffff;
letter-spacing:5px;
text-transform: uppercase;
border-bottom:1px solid #a1133a;
}
.subject a, .subject a:link, .subject a:active, .subject a:visited {
color: #fb839d;
font-weight: bold;
text-decoration: none;
}
.subject a:hover {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.datesubject {
background-color: transparent;
}
/* replaces default locked and ljuser images, ljuser link color */
.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 0px 0px 0;
background: url();
}
.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 0px 0px 0;
background: url();
}
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(LJIMAGE);
padding: 12px 11px 0 0;
}
.ljuser a:link, a:visited, a:active {
color: #fb839d;
font-weight: normal;
text-decoration: none;
}
.ljuser A:hover {
background: #ffffff;
color: #a1133a;
font-weight: normal;
text-decoration: none;
}
/* current mood, music, and location; tags */
.currents, .currentmood, .currentmusic, .currentlocation {
color: #ffffff;
font-size: 8pt
text-decoration:none;
font-weight:normal;
}
.currents strong{
font-weight:normal;
}
.ljtags {
margin-top: 10px;
color: #a1133a;
font-weight: bold;
}
.ljtags a, .ljtags a:link, .ljtags a:visited {
color: #fb839d;
text-decoration: none;
font-weight: normal;
}
.ljtags a:hover {
color: #ffffff;
text-decoration: none;
font-weight: normal;
}
/* comments and comment links */
.comments {
padding-left:5px;
margin-left: 60px;
width: 350px;
position: relative;
padding-bottom: 10px;
font-family: Trebuchet MS;
font-size: 11px;
font-weight: bold;
text-align: center;
color: #ffffff;
top: 15px;
background-color: transparent;
}
#commenttext{
width:300px;
color: #a1133a;
}
div.comments a, div.comments a:link, div.comments a:visited {
color: #a1133a;
font-size: 11px ;
font-weight: none;
text-decoration: none;
}
div.comments a:hover {
background-color: #ffffff;
color: #a1133a;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
/* maincontent - tags page */
h2 {
display: block;
text-align: left;
font-weight: bold;
padding: 0;
color: #a1133a;
font-family: Trebuchet MS;
font-size: 20px;
}
.ljtaglist {
text-align: left;
font-family: Tahoma;
font-size: 10px;
color: #a1133a;
}
/* maincontent - calendar page */
ul.year{
font-size: 10px;
color: #a1133a;
font-family: Tahoma;
text-align: center;
padding: 0;
padding-bottom: 10px;
border: 0px ;
background-color: transparent;
}
ul.year li {
color: #a1133a;
display: inline;
}
ul.active li {
border: 0px solid #a1133a;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
padding: 10px;
border: 0px solid #a1133a;
background-color: transparent;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
font-size: 10px;
color: #a1133a;
font-family: Tahoma;
border: 1px solid #a1133a;
}
table.yeartable td.yearday {
background-color: transparent;
text-align: center;
}
td.yearmonth {
font-size: 10px;
color: #a1133a;
font-family: Tahoma;
border-style: none;
}
/* footer */
ul.navfooter {
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}
.clearfoot {
display: none;
clear: both;
}
/* misc */
.headerimage {
position: relative;
width: 780px;
height: 542px;
margin-left: 0px;
margin-right: auto;
margin-bottom: 0 ;
background-image: url("IMAGE_HEADER");
background-repeat: no-repeat;
border:0px;
}
.clear {
height: 10px;
}
.skiplinks {
text-align: center;
border: 0px;
background-color: transparent;
}
.separator {
background-color:transparent;
background-image: url();
background-repeat: no-repeat;
background-position: bottom center;
height: 40px;
}
How to install :
1. go to Journal>Customize Journal
2. choose one of the Flexible Squares Theme
3.On page setup ( on the bottom of the same screen) fix it (accord with the layout specifications) to sidebar on left, right or none.
4. click on customize selected theme
5. on display: uncheck navigation strip
6. On the layout code you got from here, press ctrl+f to localize the HEADER_IMAGE and BODY_BG and change it for the link were you put your images.
7. on custom css : put all to 'no' and them past the code on the Custom stylesheet text area.
8. save and it's done
Any problems with the layouts can be
related here
For you journal stay pretty, go onto the display option and put YES onto the option : wrap text under userinfo. Otherwise your texts will strech the body of the layout ^.^
PS.2 - if you're using a plus account, you need to set your advertsiment to show up between your entries.
ps3. All the mistakes now fixed XD~~~
sorry for releasing it with so many bugs ;P