S2 Flexible Squares // Pink__

[resplandor]

I finished my second layout, comment if you like it and if you're taking don't forget to credit :D

Style: S2 Flexible Squares
Website: Not required but it will look nicer if you add one.
Default Icon: I think it looks better without the icon.
Best view: 1024x768 and up
Browser(s) Compatible: IE, Firefox (let me know if it works in any other)
Nav Bar?: Not this time.
Custom Comment Page?: Not this time.
Work best with: Free & Paid account.
Looks okay in: Plus account.
**A short title and a subtitle on your info are required



Full-Size Preview



Overrides:

/*---------------------------------------------------
By: Resplandor@livejournal.com
Style: S2 Flexible Squares
Works best with: Free, Plus & Paid accounts
Browser: Firefox and IE.
-----------------------------------------------------*/

body {
background-color: #EA3497;
text-align: justify;
color: #000000;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
margin: 20px 0 20px 0;
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(http://img509.imageshack.us/img509/7716/squares21gk8.gif);
padding: 14px 14px 0 2px;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://img509.imageshack.us/img509/7716/squares21gk8.gif);
padding: 14px 14px 0 2px;
}

a, a:link, a:visited {
color: #F47590;
text-decoration: none;
}

a:hover {
color: #999999;
text-decoration: underline;
}

p, td, {
font-size: 7pt;
}

blockquote {
margin-left: 15px;
margin-right: 10px;
padding: 1px;
color: #666666;
line-height: 16px;
letter-spacing: 0px;
font-size: 7pt;
font-family: "tahoma", "verdana", sans-serif;
border-width: 1px;
border-style: dashed;
border-color: #EA3497;
text-align: justify;
background-color: #ffffff;
}

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

/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/

#content{
width: 600px;
margin-left: auto; margin-right: auto;
background-color: #ffffff;
border-width: 0px;
border-style: solid;
border-color: #cccccc;
padding: 15px;
padding-top:0px!important;
}

#maincontent {
margin-top: 0px;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
background-color: #ffffff;
color: #000000;
border-style: solid;
border-color: #cccccc;
border-width: 0px;
text-align: justify;
}

#sidebar {
display: none;
}

/*-----------------------------------------------------------------------------
Header
--------------------------------------------------------------------------------*/

#header {
width: 100%;
padding: 0px 0px 99px 0px;
margin bottom: 0px;
text-align: right;
font-family: "tahoma", "vedana", sans-serif;
font-size: 8pt;
font-weight: normal;
text-transform: none;
letter-spacing: 3px;
border-style: solid;
border-color: #cccccc;
border-width: 0px;
background-color: #ffffff;
background-image: url("HEADERURLHERE");
backround-position: left;
color: #000000;
}

/*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: #ff1493;
}

div#header a:hover, div#footer a:hover {
color: #000000;
text-decoration: 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;
}

/*title and subtitle*/
.title {
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 8pt;
color:#ffffff;
backround-color: #ffffff!important;
font-weight: normal;
text-align:right;
margin-top: 124px;
}

.subtitle {
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
color:#ffffff;
backround-color: #ffffff!important;
font-weight: normal;
margin-top: 0px;
text-align: right;
}

/*-----------------------------------------------------------------------------
Entry
------------------------------------------------------------------------*/

.subcontent {
}

.entry {
margin: 0px 10px 10px 10px;
padding: 2px;
background-color: #ffffff;
color: #000000;
font-family:"tahoma", "verdana", sans-serif;
font-size: 8pt;
text-align: justify;
border-width: 0px;
border-color: transparent;
border-style: solid;
}

.userpic {
display: none;
position: relative;
float: left;
background-color: transparent;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 0px;
border-color: #cccccc;
border-style: solid;
}

.date {
line-height: 200%;
top: 5px;
color: #666666;
font-family:"tahoma","verdana", sans-serif;
font-size: 8pt;
margin-left: 10px;
}

.subject {
padding: 2px;
font-weight: light;
font-size: 8pt;
color:#000000;
font-family: "tahoma", "verdana", sans-serif;
text-align: left;
text-transform:uppercase;
background-color: transparent;
background-image: url('');
background-repeat: repeat;
letter-spacing: 2pt;
}

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

.subject a:hover {
color: none;
}

.datesubject {
background-color: transparent;
padding: 5px;
}

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

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

/*---------------------------------------------------------------------
Entry - Current Mood, Music and Location
------------------------------------------------------------------------*/

.currents, .currentmood, .currentmusic {
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
}

/*---------------------------------------------------------------------
Entry - Comments
------------------------------------------------------------------------*/

.comments {
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
text-align: right;
background-color: #transparent;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #999999;
}

div.comments a:hover {
color: #000000;
text-decoration: none;
}

/*---------------------------------------------------------------------
Entry - Separator
------------------------------------------------------------------------*/

.separator {
/* for formatting separators between entries */
height: 20px;
border-bottom: 1px dotted #d3d3d3;
}

/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/

.userpicfriends {
position: relative;
float: right;
background-color:transparent!important;
padding: 5px;
margin: 10px;
z-index: 15;
text-align:center;
border-width:1px!important;
border-color: #efefef;
border-style: solid;
}

/*----------------------------------------------------
footer
----------------------------------------------------------------*/

#footer {
padding-top: 5px;
width: 100%;
text-align: center;
font-family:"tahoma", "verdana", sans-serif;
font-size: 8pt;
font-weight: normal;
letter-spacing: 3px;
background-color: #ffffff;
color: #000000;
border-color: #cccccc;
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: 1px;
border-style: solid;
border-color: #999999;
}

table.yeartable td.yearday {
background-color: #ffffff;
text-align: center;
}

td.yearmonth {
border-style: none;
}

/*--------------------------------------------
Misc
-----------------------------------------*/

.clear {
height: 15px;
}
.headerimage {
position: top center;
width: 0px;
height: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0 !important;
background-image: url("");
background-repeat: no-repeat;
}

Instructions:

Before setting the layout in your account, please upload the header to your own server and replace the link on the overrides. This is very important or the header won't show.
**In this specifical layout, the link goes on the #header instead of .headerimage.

1. Manage > Customize
2. Select S2 under the Style System section. (For users who don't know HTML or CSS, or make only minor alterations). Click Save Changes.
3. Choose Flexible Sqares from the drop-down-menu. Save Changes.
4. Go to Custom CSS:
- make sure all of the drop down menus are set to NO
- Paste in the stylesheet into the Custom stylesheet box
Save Changes.

You can change the header on this layout but make sure that is the same size than the original (Unless you want to edit the overrides by yourself) and if the title and subtitle are bothering you, replace the code in the the overrides with this:

.title {
display:none;
}

.subtitle{
display: none;
}

If you have a plus account:
1. Go to customize Ads settings. 2. Fill the general information if you feel like it. (it's not required)
3. On the Ad Layout box be sure to select Vertical Placement. This way you'll only see a hideous blue box at the bottom of the page instead of two big boxes with ads.
4. Pick Ads categories if you want. (Not required)
5. Click Save once you're done with all your changes.

Header:
Can Be Found Here

LJ user icon by _excentric_


EDIT: Please check the FAQ section before asking any question, because if it's been answered before, I will ignore it