S2 Flexible Squares // Cherry Pie.
These last two weeks have been very busy. I recently started a new job and spent little time on the computer but I did manage to come up with this stylesheet. It may have a few bugs on IE and maybe on Opera too (Specially the links on the header, for some reason I couldn't position them correctly on those browsers) but it works perfectly great on Firefox and I think it looks really cute ^.^ My first time including red on a stylesheet, I hope you guys like it.
Comments = Love and if you happen to take this, don't forget to credit in your info or somewhere in your journal.
Style: S2 Flexible Squares
Website: Disabled.
Default Icon: Yes.
Best view: 1024x768 and up
Browser(s) Compatible: IE (Doesn't look exactly like the preview, but works correctly) // Firefox // Opera (Doesn't look exactly like the preview, but works correctly)
Nav Bar?: Yes
Custom Comment Page?: No
Work best with: Free & Paid account (Was not tested with ads.)
/*---------------------------------------------------
Stylesheet By: Resplandor@livejournal.com
Style: S2 Flexible Squares
Works best with: Free & Paid accounts
Browsers: Firefox // IE // Opera.
-----------------------------------------------------*/
body {
background-color: #fafafa;
text-align: center;
color: #666666;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
margin: 20px 0 20px 0;
background-image: url();
background-position: top center;
background-repeat: no repeat;
}
a, a:link, a:visited {
color: #F23E41;
text-decoration: none;
}
a:hover {
color: #FF7274;
text-decoration: none!important;
}
.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://img507.imageshack.us/img507/2978/userly5.gif);
padding: 12px 7px 2px 2px;
}
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image:
url(http://img507.imageshack.us/img507/2978/userly5.gif);
padding: 12px 7px 2px 2px;
}
.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image:
url(http://img373.imageshack.us/img373/5595/0090checkuw3.png);
padding: 12px 12px 2px 0px;
}
p, td {
font-size: 7pt;
}
blockquote {
font-size:7pt;
padding: 10px;
margin: 6px;
border: 1px solid #efefef;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 610px;
margin-left: auto; margin-right: auto;
background-color: transparent;
padding: 0px;
}
#maincontent {
margin-top: 15px;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
background-color: transparent;
color: #666666;
margin-right: 0px;
text-align: justify;
}
#sidebar {
padding: 5px 0px 0px 10px;
margin: 0px;
background-color: #ffffff;
border-color: #efefef;
border-width: 1px;
border-style: solid;
width: 600px;
height: 140px;
float: top;
text-align: left;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
display: none;
}
/*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: #F23E41;
}
div#header a:hover, div#footer a:hover {
color: #FF7274;
text-decoration: none!important;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
width: 610px;
background-color: #ffffff;
border: 1px solid #efefef;
}
.entry {
margin: 0px 10px 10px 10px;
padding: 0px;
background-color: #ffffff;
color: #333333;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
text-align: justify;
}
.userpic {
display: none;
position: relative;
float: left;
background-color: #d4dce8;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 1px;
border-color: #919bad;
border-style: solid;
}
.date {
line-height: 200%;
top: 5px;
color: #000000;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
text-align: right;
}
.subject {
padding: 0px;
color: #F23E41;
font-family: "trebuchet ms", sans-serif;
font-size: 9pt;
text-align: right;
}
.subject a, .subject a:link, .subject a:visited {
color: #F23E41;
}
.subject a:hover {
color: #FF7274;
text-decoration: none!important;
}
.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: "trebuchet ms", sans-serif;
font-size: 7pt;
}
.ljtags {padding-top: 10px;}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
text-align: right;
background-color: #ffffff;
padding: 0px 5px 0px 5px;
position: relative;
top: 5px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #F23E41;
}
div.comments a:hover {
color: #FF7274;
text-decoration: none!important;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 15px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin: 10px 10px 0px 10px;
text-align: center;
background-color: #ffffff!important;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
z-index: 15;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
margin: 10px 15px 0px 15px;
padding: 5px;
border: 1px solid #f5f5f5;
float: right;
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 5px 5px 0px 0px;
}
.sbarbody2 {
padding: 3px 5px 5px 7px;
margin: 0px 130px 0px 7px;
text-align: justify;
font-family: "trebuchet MS", sans-serif;
color: #333333;
size: 7px;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #F23E41;
}
div#sidebar a:hover {
color: #FF7274;
text-decoration: none!important;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
display:none;
margin-right: auto;
margin-left: auto;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
display: inline;
padding-left: 0px;
margin: 5px 145px 0px 0px;
list-style: none;
}
li.sbaritem
{
display: inline;
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
color: #F23E41;
padding: 2px 0px 0px 0px;
margin: 8px 0px 0px 0px
font-family: "trebuchet ms", sans-serif;
font-size: 9pt;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
padding: 15px 0px 15px 0px;
text-align: center;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
background-color: #ffffff;
color: #333333;
border-color: #efefef;
border-width: 1px;
border-style: solid;
z-index: 100;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
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 {
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: 0px;
Instructions:
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. Customize > Link List If you have a paid account, do not add more than 15 links. Also, try to keep the links name short.
4. Choose Flexible Squares from the drop-down-menu. Save Changes.
5.Choose Custom Options and go to Sidebar: !important: Please follow these specifications correctly or the layout won't work correctly
-Show the sidebar? Yes
-Set sidebar position: Right
-Show the default user picture on the sidebar? Yes.
-Show the blurb/free text in the sidebar? Yes.
-Show Calendar in the sidebar? No.
-Show Link list in the sidebar? Yes. Please leave the link list title blank.
-Show Summary list in the sidebar? No.
-Save Changes.
6. 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.
LJ user icons
User:
by damnicons.
Community:
. If you upload this to your own server and replace my url with yours, I would appreciate it because hotlinking is bad.
Note: Since the header section of this layout is disabled, the only way to put a header image is through the body section of the codes. Check the FAQ for further explanation in how to put an image through "body".
If you have any question concerning this layout make sure to check the FAQ section before asking anything.
Comments = Love and if you happen to take this, don't forget to credit in your info or somewhere in your journal.
Style: S2 Flexible Squares
Website: Disabled.
Default Icon: Yes.
Best view: 1024x768 and up
Browser(s) Compatible: IE (Doesn't look exactly like the preview, but works correctly) // Firefox // Opera (Doesn't look exactly like the preview, but works correctly)
Nav Bar?: Yes
Custom Comment Page?: No
Work best with: Free & Paid account (Was not tested with ads.)
/*---------------------------------------------------
Stylesheet By: Resplandor@livejournal.com
Style: S2 Flexible Squares
Works best with: Free & Paid accounts
Browsers: Firefox // IE // Opera.
-----------------------------------------------------*/
body {
background-color: #fafafa;
text-align: center;
color: #666666;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
margin: 20px 0 20px 0;
background-image: url();
background-position: top center;
background-repeat: no repeat;
}
a, a:link, a:visited {
color: #F23E41;
text-decoration: none;
}
a:hover {
color: #FF7274;
text-decoration: none!important;
}
.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://img507.imageshack.us/img507/2978/userly5.gif);
;){kind=link}
padding: 12px 7px 2px 2px;
}
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image:
url(http://img507.imageshack.us/img507/2978/userly5.gif);
padding: 12px 7px 2px 2px;
}
.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image:
url(http://img373.imageshack.us/img373/5595/0090checkuw3.png);
;){kind=link}
padding: 12px 12px 2px 0px;
}
p, td {
font-size: 7pt;
}
blockquote {
font-size:7pt;
padding: 10px;
margin: 6px;
border: 1px solid #efefef;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 610px;
margin-left: auto; margin-right: auto;
background-color: transparent;
padding: 0px;
}
#maincontent {
margin-top: 15px;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
background-color: transparent;
color: #666666;
margin-right: 0px;
text-align: justify;
}
#sidebar {
padding: 5px 0px 0px 10px;
margin: 0px;
background-color: #ffffff;
border-color: #efefef;
border-width: 1px;
border-style: solid;
width: 600px;
height: 140px;
float: top;
text-align: left;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
display: none;
}
/*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: #F23E41;
}
div#header a:hover, div#footer a:hover {
color: #FF7274;
text-decoration: none!important;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
width: 610px;
background-color: #ffffff;
border: 1px solid #efefef;
}
.entry {
margin: 0px 10px 10px 10px;
padding: 0px;
background-color: #ffffff;
color: #333333;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
text-align: justify;
}
.userpic {
display: none;
position: relative;
float: left;
background-color: #d4dce8;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 1px;
border-color: #919bad;
border-style: solid;
}
.date {
line-height: 200%;
top: 5px;
color: #000000;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
text-align: right;
}
.subject {
padding: 0px;
color: #F23E41;
font-family: "trebuchet ms", sans-serif;
font-size: 9pt;
text-align: right;
}
.subject a, .subject a:link, .subject a:visited {
color: #F23E41;
}
.subject a:hover {
color: #FF7274;
text-decoration: none!important;
}
.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: "trebuchet ms", sans-serif;
font-size: 7pt;
}
.ljtags {padding-top: 10px;}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
text-align: right;
background-color: #ffffff;
padding: 0px 5px 0px 5px;
position: relative;
top: 5px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #F23E41;
}
div.comments a:hover {
color: #FF7274;
text-decoration: none!important;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 15px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin: 10px 10px 0px 10px;
text-align: center;
background-color: #ffffff!important;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
z-index: 15;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
margin: 10px 15px 0px 15px;
padding: 5px;
border: 1px solid #f5f5f5;
float: right;
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 5px 5px 0px 0px;
}
.sbarbody2 {
padding: 3px 5px 5px 7px;
margin: 0px 130px 0px 7px;
text-align: justify;
font-family: "trebuchet MS", sans-serif;
color: #333333;
size: 7px;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #F23E41;
}
div#sidebar a:hover {
color: #FF7274;
text-decoration: none!important;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
display:none;
margin-right: auto;
margin-left: auto;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
display: inline;
padding-left: 0px;
margin: 5px 145px 0px 0px;
list-style: none;
}
li.sbaritem
{
display: inline;
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
color: #F23E41;
padding: 2px 0px 0px 0px;
margin: 8px 0px 0px 0px
font-family: "trebuchet ms", sans-serif;
font-size: 9pt;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
padding: 15px 0px 15px 0px;
text-align: center;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
background-color: #ffffff;
color: #333333;
border-color: #efefef;
border-width: 1px;
border-style: solid;
z-index: 100;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
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 {
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: 0px;
Instructions:
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. Customize > Link List If you have a paid account, do not add more than 15 links. Also, try to keep the links name short.
4. Choose Flexible Squares from the drop-down-menu. Save Changes.
5.Choose Custom Options and go to Sidebar: !important: Please follow these specifications correctly or the layout won't work correctly
-Show the sidebar? Yes
-Set sidebar position: Right
-Show the default user picture on the sidebar? Yes.
-Show the blurb/free text in the sidebar? Yes.
-Show Calendar in the sidebar? No.
-Show Link list in the sidebar? Yes. Please leave the link list title blank.
-Show Summary list in the sidebar? No.
-Save Changes.
6. 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.
LJ user icons
User:
by damnicons.
Community:
. If you upload this to your own server and replace my url with yours, I would appreciate it because hotlinking is bad.
Note: Since the header section of this layout is disabled, the only way to put a header image is through the body section of the codes. Check the FAQ for further explanation in how to put an image through "body".
If you have any question concerning this layout make sure to check the FAQ section before asking anything.