Layout Pickup for Yuu
This one is titled A shade of simplicity because it's quite a simple but yet lively layout...Hope you like it ^_^
Style: S2 Flexible Squares
Sidebar: None
Browsers: FF & IE
Ads: Between Entries & Horizontal
Account: Basic, Plus & Paid
Live Preview
1. First thing first is to go to, [http://www.livejournal.com/customize/] and choose the [Flexible Squares by Yati Mansor]
2. Next, choose which AD placement you would like. For this layout, Horizontal or Between Entries is highly recommended.
3. Click on Customize Selected Theme.
4. Go to Custom CSS, choose No to all drop down boxes
5. Copy the CSS below into the section provided then press Save Changes and that's all.
/*---------------------------------------------------
Flexible Squares CSS [A Shade of Simplicity // Yuu] by berserk_reality.livejournal.com
You can edit the CSS but don't forget to credit!!!
-----------------------------------------------------*/
body {
background-color:#ffffe6;
text-align: justify;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 140%;
}
a, a:link, a:visited {
color: #437faf;
}
a:hover {
color: #999bca;}
b, u, strong { color: #ffa63f;}
i, s, em, strike { color: #f3b422;}
blockquote {
padding:8px;
margin: 7px;
color: #000000;
background-color: #edeeee;
text-align: justify;
font-family: "Times New Roman", Times, serif;
font-size: 10px;
}
p, td {
font-size:inherit;
}
code, kbd, pre, tt {
font-family: monospace;
}
h2 {
margin-left:20px;
font-weight:normal;
color: #f3f3f3;
font-size: 10px;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content{
width: 475px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
background-color: #ecf1f5;
}
#maincontent {
width: 475px;
margin-top: 0px;
text-align: justify;
float: right;
background-color: #ffffff;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#sidebar {
display: none;
}
.subcontent {
padding: 5px 0 5px 0;
background-color: transparent;
}
.subcontent:hover {
padding: 5px 0 5px 0;
background-color: transparent;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with .headerimage
Footer
--------------------------------------------------------------------------------*/
#header {
padding: 5px 0px;
margin: 0px 0 0 0px;
font-size: 10pt;
letter-spacing: 4px;
color: #437faf;
text-align: center;
font-family: Arial, Helvetica, sans-serif;s
text-transform: lowercase;
}
#footer {
padding: 5px 0px;
margin: 0px 0 0 0px;
font-size: 10pt;
letter-spacing: 4px;
color: #437faf;
text-align: center;
font-family: Arial, Helvetica, sans-serif;s
text-transform: lowercase;
}
.headerimage {position: relative;
background: url('http://i4.photobucket.com/albums/y135/ghettoplayasmooth/requests/r27.png');
width: 475px;
height: 285px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited{
color: #437faf;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-decoration: none;
text-align: center;
font-size: 8pt;
letter-spacing: 4px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
div#footer a, div#footer a:link, div#footer a:visited {
color: #437faf;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-decoration: none;
text-align: center;
font-size: 8pt;
letter-spacing: 4px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
div#header a:hover, div#footer a:hover {
color: #999bca;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 8pt;
letter-spacing: 4px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
/*title and subtitle*/
.title {
display: none;
}
.subtitle{
display: none;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader{ padding: 5px 5px 5px 5px; margin: 0px; }
ul.navheader li {display: inline;}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.entry {
margin: 0px 10px 10px 20px;
padding: 0px;
background-color: transparent;
text-align: justify;
}
.userpic {
background-color: transparent !important;
position: relative;
float: right;
padding: 5px;
margin: 0px -145px 0 0px;
text-align:center;
border: 2px solid #ffe372;
}
.date {
display:none;
top: 5px;
color: #3e3d3d;
font-size: 10px;
padding-right: 10px;
text-align: left;
}
.subject {
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 2px;
text-transform: lowercase;
font-size: 16px;
color: #437faf;
margin: 0px;
font-style: italic;
text-align: right;
padding: 5px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #ffa664;
}
.datesubject {
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol {
padding-left: 5px;
margin-left: 15px;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location, Tags
Tiny Icons from famfamicons
------------------------------------------------------------------------*/
.currents {
font-family: "Tahoma", sans-serif;
color: #000000;
margin-top: 5px;
}
.currentlocation {
font-size: 10px;
color: #000000;}
.currentmood {
font-size: 10px;
font-size: 10px;
color: #000000;}
.currentmusic {
font-size: 10px;
font-size: 10px;
color: #000000;}
.ljtags {
font-size: 10px;
font-size: 10px;
color: #000000;
margin-top: 5px;}
.currentmood strong, .currentmusic strong, .currentlocation strong, .currentgroups {
font-weight: bold;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
text-align: right;
padding: 0px 6px 0px 6px;
position: relative;
top: 15px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-style: italic;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #437faf;
text-decoration: none;
}
div.comments a:hover {
color: #999bca;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
height: 25px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
background-color: transparent !important;
position: relative;
float: right;
padding: 5px;
margin: 0px -145px 0 0px;
text-align:center;
border: 2px solid #ffe372;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.default
{
display:none;
}
.defaultuserpic img{
display:none;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #773e46;
text-decoration: none;
}
div#sidebar a:hover {
color: #f1c299;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
width: auto;
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
text-align: center;
background-color: #fdfdfd;
font-size: 10px;}
.sbarcalendarposts {
text-align: center;
color: #773e46;
font-size: 10px;
background-color: transparent;}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style:none;
}
li.sbaritem{ padding: 2px 7px 2px 7px;}
li.sbaritem:hover {color: #f1c299;}
li.sbartitle
{
display:none
}
/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
color: #000000;
border: 1px solid #f1c299;
}
table.yeartable td.yearday {
text-align: center;
background-color: #FFFFFF;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 2px;
text-transform: lowercase;
font-size: 8px;
color: #437faf;
margin: 0px;
font-style: italic;
text-align: right;
padding: 5px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #ffa664;
}
.userpiccomment {
background-color: transparent !important;
position: relative;
float: right;
padding: 5px;
margin: 0px -145px 0 0px;
text-align:center;
border: 2px solid #ffe372;
}
input, textarea, select {
border: 1px solid #ECEDE4;
background-color: #F8F8EB;
padding: 2px;
}
textarea.textbox {width: 95% !important;}
.reply {
position: relative;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: justify;
background: #F8F8EB;
color: #fdfdfd; }
.replytosubject {font-weight: bold;}
.commentreply {
position: relative;
margin: 10px;
color: #000000;
}
.commentbox {
background-color: transparent;
color: #000000;
font-size: 10px;
padding: 6px;
margin: 5px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #437faf;
}
.datesubjectcomment a:hover {
color: #999bca;
}
.commentboxpartial {
background-color: #f1c299;
padding: 5px;
margin: 10px;
}
.commentinfo {
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
img[src*="userinfo.gif"] {width: 0; height: 0; padding: 16px 16px 0 0 !important; background-repeat: no-repeat;
background-image: url(http://i4.photobucket.com/albums/y135/ghettoplayasmooth/lj%20layouts/user.gif) !important;}
/*--------------------------------------------
Contextual Pop-Up
-----------------------------------------*/
div.ContextualPopup div.Inner {
background: transparent !important;
color: #072f63 !important;
padding: 6px;
width: 245px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
border: 0;
}
div.ContextualPopup .Content {
padding: 7px 10px 7px 10px;
margin-right: 80px;
line-height: 13px;
background-color: #fdfcfc;
border: 1px solid #072f63;
}
div.ContextualPopup .Userpic {
margin: 0;
padding: 10px;
background-color: transparent;
}
div.ContextualPopup span.OnlineStatus, span {
font-size: 10px;
text-transform: lowercase;
}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #437faf !important;
}
div.ContextualPopup div.Inner a:hover {
text-decoration: none !important;
font-weight: normal;
color: #999bca !important;
}
div.ContextualPopup .Relation {
letter-spacing: 1px;
text-transform: lowercase;
margin-bottom: 4px;
padding-bottom: 4px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #ffa664;
}
That's all to it...Hope you enjoy your layout, credit to berserk_reality, any other problems, don't hesitate to ask! ^_^
Style: S2 Flexible Squares
Sidebar: None
Browsers: FF & IE
Ads: Between Entries & Horizontal
Account: Basic, Plus & Paid
Live Preview
1. First thing first is to go to, [http://www.livejournal.com/customize/] and choose the [Flexible Squares by Yati Mansor]
2. Next, choose which AD placement you would like. For this layout, Horizontal or Between Entries is highly recommended.
3. Click on Customize Selected Theme.
4. Go to Custom CSS, choose No to all drop down boxes
5. Copy the CSS below into the section provided then press Save Changes and that's all.
/*---------------------------------------------------
Flexible Squares CSS [A Shade of Simplicity // Yuu] by berserk_reality.livejournal.com
You can edit the CSS but don't forget to credit!!!
-----------------------------------------------------*/
body {
background-color:#ffffe6;
text-align: justify;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 140%;
}
a, a:link, a:visited {
color: #437faf;
}
a:hover {
color: #999bca;}
b, u, strong { color: #ffa63f;}
i, s, em, strike { color: #f3b422;}
blockquote {
padding:8px;
margin: 7px;
color: #000000;
background-color: #edeeee;
text-align: justify;
font-family: "Times New Roman", Times, serif;
font-size: 10px;
}
p, td {
font-size:inherit;
}
code, kbd, pre, tt {
font-family: monospace;
}
h2 {
margin-left:20px;
font-weight:normal;
color: #f3f3f3;
font-size: 10px;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content{
width: 475px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
background-color: #ecf1f5;
}
#maincontent {
width: 475px;
margin-top: 0px;
text-align: justify;
float: right;
background-color: #ffffff;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#sidebar {
display: none;
}
.subcontent {
padding: 5px 0 5px 0;
background-color: transparent;
}
.subcontent:hover {
padding: 5px 0 5px 0;
background-color: transparent;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with .headerimage
Footer
--------------------------------------------------------------------------------*/
#header {
padding: 5px 0px;
margin: 0px 0 0 0px;
font-size: 10pt;
letter-spacing: 4px;
color: #437faf;
text-align: center;
font-family: Arial, Helvetica, sans-serif;s
text-transform: lowercase;
}
#footer {
padding: 5px 0px;
margin: 0px 0 0 0px;
font-size: 10pt;
letter-spacing: 4px;
color: #437faf;
text-align: center;
font-family: Arial, Helvetica, sans-serif;s
text-transform: lowercase;
}
.headerimage {position: relative;
background: url('http://i4.photobucket.com/albums/y135/ghettoplayasmooth/requests/r27.png');
width: 475px;
height: 285px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited{
color: #437faf;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-decoration: none;
text-align: center;
font-size: 8pt;
letter-spacing: 4px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
div#footer a, div#footer a:link, div#footer a:visited {
color: #437faf;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-decoration: none;
text-align: center;
font-size: 8pt;
letter-spacing: 4px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
div#header a:hover, div#footer a:hover {
color: #999bca;
margin-left: 5px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 8pt;
letter-spacing: 4px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
/*title and subtitle*/
.title {
display: none;
}
.subtitle{
display: none;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader{ padding: 5px 5px 5px 5px; margin: 0px; }
ul.navheader li {display: inline;}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.entry {
margin: 0px 10px 10px 20px;
padding: 0px;
background-color: transparent;
text-align: justify;
}
.userpic {
background-color: transparent !important;
position: relative;
float: right;
padding: 5px;
margin: 0px -145px 0 0px;
text-align:center;
border: 2px solid #ffe372;
}
.date {
display:none;
top: 5px;
color: #3e3d3d;
font-size: 10px;
padding-right: 10px;
text-align: left;
}
.subject {
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 2px;
text-transform: lowercase;
font-size: 16px;
color: #437faf;
margin: 0px;
font-style: italic;
text-align: right;
padding: 5px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #ffa664;
}
.datesubject {
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol {
padding-left: 5px;
margin-left: 15px;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location, Tags
Tiny Icons from famfamicons
------------------------------------------------------------------------*/
.currents {
font-family: "Tahoma", sans-serif;
color: #000000;
margin-top: 5px;
}
.currentlocation {
font-size: 10px;
color: #000000;}
.currentmood {
font-size: 10px;
font-size: 10px;
color: #000000;}
.currentmusic {
font-size: 10px;
font-size: 10px;
color: #000000;}
.ljtags {
font-size: 10px;
font-size: 10px;
color: #000000;
margin-top: 5px;}
.currentmood strong, .currentmusic strong, .currentlocation strong, .currentgroups {
font-weight: bold;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
text-align: right;
padding: 0px 6px 0px 6px;
position: relative;
top: 15px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-style: italic;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #437faf;
text-decoration: none;
}
div.comments a:hover {
color: #999bca;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
height: 25px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
background-color: transparent !important;
position: relative;
float: right;
padding: 5px;
margin: 0px -145px 0 0px;
text-align:center;
border: 2px solid #ffe372;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.default
{
display:none;
}
.defaultuserpic img{
display:none;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #773e46;
text-decoration: none;
}
div#sidebar a:hover {
color: #f1c299;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
width: auto;
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
text-align: center;
background-color: #fdfdfd;
font-size: 10px;}
.sbarcalendarposts {
text-align: center;
color: #773e46;
font-size: 10px;
background-color: transparent;}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style:none;
}
li.sbaritem{ padding: 2px 7px 2px 7px;}
li.sbaritem:hover {color: #f1c299;}
li.sbartitle
{
display:none
}
/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
color: #000000;
border: 1px solid #f1c299;
}
table.yeartable td.yearday {
text-align: center;
background-color: #FFFFFF;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 2px;
text-transform: lowercase;
font-size: 8px;
color: #437faf;
margin: 0px;
font-style: italic;
text-align: right;
padding: 5px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #ffa664;
}
.userpiccomment {
background-color: transparent !important;
position: relative;
float: right;
padding: 5px;
margin: 0px -145px 0 0px;
text-align:center;
border: 2px solid #ffe372;
}
input, textarea, select {
border: 1px solid #ECEDE4;
background-color: #F8F8EB;
padding: 2px;
}
textarea.textbox {width: 95% !important;}
.reply {
position: relative;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: justify;
background: #F8F8EB;
color: #fdfdfd; }
.replytosubject {font-weight: bold;}
.commentreply {
position: relative;
margin: 10px;
color: #000000;
}
.commentbox {
background-color: transparent;
color: #000000;
font-size: 10px;
padding: 6px;
margin: 5px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #437faf;
}
.datesubjectcomment a:hover {
color: #999bca;
}
.commentboxpartial {
background-color: #f1c299;
padding: 5px;
margin: 10px;
}
.commentinfo {
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
img[src*="userinfo.gif"] {width: 0; height: 0; padding: 16px 16px 0 0 !important; background-repeat: no-repeat;
background-image: url(http://i4.photobucket.com/albums/y135/ghettoplayasmooth/lj%20layouts/user.gif) !important;}
/*--------------------------------------------
Contextual Pop-Up
-----------------------------------------*/
div.ContextualPopup div.Inner {
background: transparent !important;
color: #072f63 !important;
padding: 6px;
width: 245px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
border: 0;
}
div.ContextualPopup .Content {
padding: 7px 10px 7px 10px;
margin-right: 80px;
line-height: 13px;
background-color: #fdfcfc;
border: 1px solid #072f63;
}
div.ContextualPopup .Userpic {
margin: 0;
padding: 10px;
background-color: transparent;
}
div.ContextualPopup span.OnlineStatus, span {
font-size: 10px;
text-transform: lowercase;
}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #437faf !important;
}
div.ContextualPopup div.Inner a:hover {
text-decoration: none !important;
font-weight: normal;
color: #999bca !important;
}
div.ContextualPopup .Relation {
letter-spacing: 1px;
text-transform: lowercase;
margin-bottom: 4px;
padding-bottom: 4px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #ffa664;
}
That's all to it...Hope you enjoy your layout, credit to berserk_reality, any other problems, don't hesitate to ask! ^_^