[LAYOUT] No. 3 | Flexible Squares - Melon Love
Shush about the name.
Hehe, this is a much more ~Bright~ and ~happy~ layout than the last.
{Click to enlarge screencap | Here for a temporary live preview}
Type: S2 Flexible Squares
+INSTRUCTIONS+
Go to Select Journal Style. Choose any Flexible Squares layout. (Just type Flexible Squares into the search box, it's quicker than just going through the categories).
Once you've done that, choose your ad placement to go between entries and choose 1 Column (no sidebar).
Then go to Customise Journal Style, scroll down and click on Custom CSS.
Click "No" for all drop lists. Copy and paste the code into the blank, white box and click Save Changes.
Then voila! You can change anything you want after that. :D
+CODE+
/* ~Melon Love~
Type: S2 Flexible Squares
Credit: http://community.livejournal.com/saranghaeng */
body {
background-color: #BCE954;
text-align: center;
color: #000000;
font-family: "Tahoma", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #F660AB;
text-decoration: none;
}
a:hover {
color: #F660AB;
text-decoration: underline;
font-weight: bold;
font-variant: small-caps;
}
p, td, {
font-size: 11px;
}
code, kbd, pre, tt {
font-family: monospace;
}
b {
font-weight: bolder;
color: #F6358A;
}
i {
font-style: italic;
color: #F6358A;
}
u {
color: #F6358A;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 500px;
margin-left: auto; margin-right: auto; margin-top: 50px;
background-color: #F6358A;
border-width: 5px;
border-style: dashed;
border-color: #F660AB;
padding: 15px;
}
#maincontent {
margin-top: 15px; margin-left: auto; margin-right: auto;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: #ffffff;
color: #000000;
border-style: none;
border-color: #999999;
border-width: 0px;
margin-right: auto;
text-align: left;
}
#sidebar {
display:none;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 100%;
padding: 10px 0px 20px 0px;
margin: 0px;
text-align: center;
font-family: "Helvetica", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 2px;
border-style: solid;
border-color: #999999;
border-width: 0px;
background-color: #F6358A;
color: #ffffff;
}
.headerimage {
/* for formatting header image */
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #CCFB5D;
font-weight: bolder;
}
div#header a:hover, div#footer a:hover {
color: #BCE954;
font-weight: bolder;
text-decoration: none;
}
/*title and subtitle*/
.title {
display:none;
}
.subtitle{
display:none;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
}
.entry {
margin-left: 20px; margin-right: 20px;
padding: 10px;
background-color: #CCFB5D;
color: #000000;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: left;
border-width: 3px;
border-color: #CCFB5D;
border-style: dashed;
}
.userpic {
position: relative;
float: left;
padding: 10px;
margin-left: -160px;
text-align: center;
background-color: #ffffff;
border-style: solid;
border-width: 5px;
border-color: #F660AB;
font-family: "Tahoma", sans-serif;
font-size: 11px;
z-index: 15;
}
.date {
line-height: 200%;
top: 5px;
color: #F665AB;
font-family: "Helvetica", sans-serif;
font-size: 13px;
text-align: right;
}
.subject {
font-weight: bold;
padding: 10px;
color: #FAAFBE;
font-variant: small-caps;
font-family: "Helvetica", sans-serif;
font-size: 17px;
}
.subject a, .subject a:link, .subject a:visited {
color: #FAAFBE;
}
.subject a:hover {
color: #F660AB;
}
.datesubject {
background-color: #ffffff;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents, .currentmood, .currentmusic {
font-family: "Verdana", sans-serif;
font-size: 11px;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "Verdana", sans-serif;
font-size: 13px;
text-align: center;
background-color: transparent;
padding: 0px 5px 0px 5px;
position: relative;
top: 0px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #FAAFBA;
}
div.comments a:hover {
color: #7FE817;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 35px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
background-color: #ffffff;
float: left;
padding: 10px;
margin-left: -160px;
text-align: center;
border-style: solid;
border-width: 5px;
border-color: #F660AB;
font-family: "Tahoma", sans-serif;
font-size: 11px;
z-index: 15;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
text-align: center;
}
.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: #5674b9;
}
div#sidebar a:hover {
color: #7aa1f8;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #000000;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border-color: #000000;
border-width: 1px;
border-style: solid;
background-color: #d4dce8;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 1px;
border-color: #999999;
background-color: #919bad;
margin-bottom: 10px;
margin-top: 10px;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
background-color: transparent;
color: #BCE954;
border-color: #999999;
border-width: 0px;
border-style: solid;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
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 {
border-width: 2px;
border-style: solid;
border-color: #CCFB5D;
}
table.yeartable td.yearday {
background-color: #BCE954;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #8AFB17;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
background-color: transparent;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}
.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #999999;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #d4dce8;
color: #000000;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #BCE954;
color: #000000;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #000000;
}
.commentbox {
border-color: #8AFB17;
border-width: 3px;
border-style: dashed;
padding: 10px;
margin-top: 50px; margin-right: auto; margin-left: auto;
background-color: #CCFB5D;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ffffff;
}
.datesubjectcomment a:hover {
color: #b0b9c8;
}
.commentboxpartial {
border-color: #999999;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.commentinfo {
background-color: #d4dce8;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
blockquote {
font-family: "COURIER NEW", sans-serif;
font-size: 10px;
padding: 5px;
}
Oh, one more thing. If you would like to put in a header, go to this part of the code:
.headerimage {
background-image: url(YOUR URL HERE);
no-repeat top center; width: _px; height: _px; margin: 0 auto;
}
Just change enter the width, height where the underscores ( _ ) are and obviously, paste in your url.
Remember to credit this community, and please, DO ENJOY!
Please comment if you liked it, are taking it, have a problem or would like to provide constructive criticism.
Thank you and have a nice day. ;D
Hehe, this is a much more ~Bright~ and ~happy~ layout than the last.
{Click to enlarge screencap | Here for a temporary live preview}
Type: S2 Flexible Squares
+INSTRUCTIONS+
Go to Select Journal Style. Choose any Flexible Squares layout. (Just type Flexible Squares into the search box, it's quicker than just going through the categories).
Once you've done that, choose your ad placement to go between entries and choose 1 Column (no sidebar).
Then go to Customise Journal Style, scroll down and click on Custom CSS.
Click "No" for all drop lists. Copy and paste the code into the blank, white box and click Save Changes.
Then voila! You can change anything you want after that. :D
+CODE+
/* ~Melon Love~
Type: S2 Flexible Squares
Credit: http://community.livejournal.com/saranghaeng */
body {
background-color: #BCE954;
text-align: center;
color: #000000;
font-family: "Tahoma", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #F660AB;
text-decoration: none;
}
a:hover {
color: #F660AB;
text-decoration: underline;
font-weight: bold;
font-variant: small-caps;
}
p, td, {
font-size: 11px;
}
code, kbd, pre, tt {
font-family: monospace;
}
b {
font-weight: bolder;
color: #F6358A;
}
i {
font-style: italic;
color: #F6358A;
}
u {
color: #F6358A;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 500px;
margin-left: auto; margin-right: auto; margin-top: 50px;
background-color: #F6358A;
border-width: 5px;
border-style: dashed;
border-color: #F660AB;
padding: 15px;
}
#maincontent {
margin-top: 15px; margin-left: auto; margin-right: auto;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: #ffffff;
color: #000000;
border-style: none;
border-color: #999999;
border-width: 0px;
margin-right: auto;
text-align: left;
}
#sidebar {
display:none;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 100%;
padding: 10px 0px 20px 0px;
margin: 0px;
text-align: center;
font-family: "Helvetica", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 2px;
border-style: solid;
border-color: #999999;
border-width: 0px;
background-color: #F6358A;
color: #ffffff;
}
.headerimage {
/* for formatting header image */
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #CCFB5D;
font-weight: bolder;
}
div#header a:hover, div#footer a:hover {
color: #BCE954;
font-weight: bolder;
text-decoration: none;
}
/*title and subtitle*/
.title {
display:none;
}
.subtitle{
display:none;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
}
.entry {
margin-left: 20px; margin-right: 20px;
padding: 10px;
background-color: #CCFB5D;
color: #000000;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: left;
border-width: 3px;
border-color: #CCFB5D;
border-style: dashed;
}
.userpic {
position: relative;
float: left;
padding: 10px;
margin-left: -160px;
text-align: center;
background-color: #ffffff;
border-style: solid;
border-width: 5px;
border-color: #F660AB;
font-family: "Tahoma", sans-serif;
font-size: 11px;
z-index: 15;
}
.date {
line-height: 200%;
top: 5px;
color: #F665AB;
font-family: "Helvetica", sans-serif;
font-size: 13px;
text-align: right;
}
.subject {
font-weight: bold;
padding: 10px;
color: #FAAFBE;
font-variant: small-caps;
font-family: "Helvetica", sans-serif;
font-size: 17px;
}
.subject a, .subject a:link, .subject a:visited {
color: #FAAFBE;
}
.subject a:hover {
color: #F660AB;
}
.datesubject {
background-color: #ffffff;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents, .currentmood, .currentmusic {
font-family: "Verdana", sans-serif;
font-size: 11px;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "Verdana", sans-serif;
font-size: 13px;
text-align: center;
background-color: transparent;
padding: 0px 5px 0px 5px;
position: relative;
top: 0px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #FAAFBA;
}
div.comments a:hover {
color: #7FE817;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 35px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
background-color: #ffffff;
float: left;
padding: 10px;
margin-left: -160px;
text-align: center;
border-style: solid;
border-width: 5px;
border-color: #F660AB;
font-family: "Tahoma", sans-serif;
font-size: 11px;
z-index: 15;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
text-align: center;
}
.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: #5674b9;
}
div#sidebar a:hover {
color: #7aa1f8;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #000000;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border-color: #000000;
border-width: 1px;
border-style: solid;
background-color: #d4dce8;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 1px;
border-color: #999999;
background-color: #919bad;
margin-bottom: 10px;
margin-top: 10px;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
background-color: transparent;
color: #BCE954;
border-color: #999999;
border-width: 0px;
border-style: solid;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
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 {
border-width: 2px;
border-style: solid;
border-color: #CCFB5D;
}
table.yeartable td.yearday {
background-color: #BCE954;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #8AFB17;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
background-color: transparent;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}
.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #999999;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #d4dce8;
color: #000000;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #BCE954;
color: #000000;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #000000;
}
.commentbox {
border-color: #8AFB17;
border-width: 3px;
border-style: dashed;
padding: 10px;
margin-top: 50px; margin-right: auto; margin-left: auto;
background-color: #CCFB5D;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ffffff;
}
.datesubjectcomment a:hover {
color: #b0b9c8;
}
.commentboxpartial {
border-color: #999999;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.commentinfo {
background-color: #d4dce8;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
blockquote {
font-family: "COURIER NEW", sans-serif;
font-size: 10px;
padding: 5px;
}
Oh, one more thing. If you would like to put in a header, go to this part of the code:
.headerimage {
background-image: url(YOUR URL HERE);
no-repeat top center; width: _px; height: _px; margin: 0 auto;
}
Just change enter the width, height where the underscores ( _ ) are and obviously, paste in your url.
Remember to credit this community, and please, DO ENJOY!
Please comment if you liked it, are taking it, have a problem or would like to provide constructive criticism.
Thank you and have a nice day. ;D