Style: S2 Flexible Squares
Resolution: 800 x 600 and higher
Browser: Best in Firefox, passable in IE
Nav bar: Yes
Ads: Not tested
Custom comment page: No
Website: If you want
live preview |
image preview Rules:
- Credit
exitclosed (for the stylesheet) with a clear link in your userinfo.
- Change anything you like, but please still link back to me!
- Don't redistribute the codes, edited or not.
Codes
/*-------------------------------------------------------------------
S2 Flexible Squares Stylesheet
by exitclosed.livejournal.com
Change anything you like, but you MUST credit me with a LINK BACK.
Please do not remove this section
------------------------------------------------------------------*/
/*-------------------------------------------------------------------
Basics
-------------------------------------------------------------------*/
body {
background-color: #C8D7DA;
text-align: justify;
color: #C8D7DA;
font-family: Courier New;
font-size: 10px;
margin: 10px 0px 10px 0px;
}
a, a:link, a:visited {
cursor: default;
color: #FFFFFF;
text-decoration: none;
}
a:hover {
cursor: default;
color: #C8D7DA;
text-decoration: none;
}
p, blockquote {
font-size: 9px;
padding: 20px;
}
code, kbd, pre, tt {
font-size: 9px;
padding: 20px;
}
/*-------------------------------------------------------------------
General page alignment and width
-------------------------------------------------------------------*/
#content {
width: 520px;
margin-left: auto;
margin-right: auto;
background-color: transparent;
border: 0px;
padding: 0px;
}
#maincontent {
float: right;
width: 100%;
margin-top: -10px;
background-color: #FFFFFF;
color: #A1A1A1;
text-align: justify;
}
#sidebar {
display: none;
}
/*-------------------------------------------------------------------
Header and header image
-------------------------------------------------------------------*/
#header {
width: 520px;
margin: -10px 0px 0px 0px;
background-color: #C8D7DA;
text-align: center;
font-family: Courier New;
font-size: 16px;
font-weight: none;
letter-spacing: -1px;
color: #FFFFFF;
text-transform: lowercase;
}
div#header a, div#header a:link, div#header a:visited{
cursor: default;
color: #FFFFFF;
letter-spacing: -1px;
text-transform: lowercase;
text-decoration: none;
}
div#header a:hover{
cursor: default;
color: #ABABAB;
letter-spacing: -1px;
text-transform: lowercase;
text-decoration: none;
}
.title {
visibility: hidden
}
.subtitle{
visibility: hidden
}
.headerimage {
position: relative;
width: 500px;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
background-image: url('
http://i33.tinypic.com/2r62qop.png');
background-repeat: no-repeat;
border: 10px #FFFFFF solid;
}
/*-------------------------------------------------------------------
Header links section
-------------------------------------------------------------------*/
ul.navheader {
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-------------------------------------------------------------------
Entry stuff
-------------------------------------------------------------------*/
.entry {
margin: 0px 0px 0px 0px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 20px;
padding-top: 20px;
background-color: #FFFFFF;
font-weight: none;
text-align: justify;
font-size: 11px;
font-family: Arial;
font-color: #C0C0C0;
}
.userpic {
position: relative;
float: left;
text-align: center;
margin: 10px 10px 10px 10px;
padding: 0px;
background-color: transparent !important;
color: #C8D7DA !important;
}
.userpic img {
background-color: #FFFFFF;
border: 0px solid #C8D7DA;
padding: 5px;
}
.date {
text-align: left;
line-height: 100%;
text-decoration: italic;
color: #C8D7DA;
font-family: Courier New;
font-size: 10px;
margin-top: 5px;
}
.subject {
padding: 0px;
text-align: left;
color: #ABABAB;
font-family: Courier New;
font-size: 20px;
text-transform: lowercase;
line-height: 18px;
}
a, a:link, a:visited {
cursor: default;
color: #C8D7DA;
text-decoration: none;
}
.subject a:hover {
cursor: default;
color: #C8D7DA;
text-decoration: none;
}
.datesubject {
background-color: #FFFFFF;
padding: 5px;
border-bottom: 1px solid #E2E2E2;
}
.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 {
color: #ABABAB;
font-family: Courier New;
font-size: 9px;
}
/*-------------------------------------------------------------------
Entry Stuff - Comments
-------------------------------------------------------------------*/
.comments {
font-family: Courier New;
font-size: 10px;
text-align: right;
padding: 10px 10px 10px 10px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
cursor: default;
color: #C8D7DA;
text-decoration: none;
}
div.comments a:hover {
cursor: default;
color: #C8D7DA;
text-decoration: none;
}
/*-------------------------------------------------------------------
Entry Stuff - Separator
-------------------------------------------------------------------*/
/* for formatting separators between entries */
.separator{
height: 20px;
background-color: #C8D7DA !important;
border: 0px !important;
}
/*-------------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------*/
.userpicfriends {
position: relative;
float: left;
text-align: center;
margin: 10px 10px 10px 10px;
padding: 0px;
background-color: transparent !important;
color: #C8D7DA !important;
}
.userpicfriends img {
background-color: #FFFFFF;
border: 0px solid #C8D7DA;
padding: 5px;
}
/*-------------------------------------------------------------------
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: 1px solid #ABABAB;
}
table.yeartable td.yearday {
background-color: #FFFFFF;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*-------------------------------------------------------------------
Misc
-------------------------------------------------------------------*/
.clear {height: 0px;}
.entry ul li {
padding-left: 5px;
margin-left: 15px;
}
.entry ol li {
padding-left: 5px;
margin-left: 15px;
}
/*-------------------------------------------------------------------
Footer
-------------------------------------------------------------------*/
#footer {
width: 100%;
color: #FFFFFF;
font-family: Courier New;
font-size: 15px;
background-color: #C8D7DA;
clear: none;
text-align: center;
}
div#footer a, div#footer a:link, div#footer a:visited {
cursor: default;
color: #FFFFFF;
text-decoration: none;
}
div#footer a:hover {
cursor: default;
color: #ABABAB;
text-decoration: none;
}
ul.navfooter{
padding: 5px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0px;
padding: 0px 5px 0px 5px;
background: transparent;
text-align: center;
font-size: 15px;
text-transform: lowercase;
}
.clearfoot {
display: none;
}
/*-------------------------------------------------------------------
Misc
-------------------------------------------------------------------*/
.clear {height: 0px;}
Note:
You might want to upload the
header to your own imagehost, as this is on tinypic.
If you want to change the header, just add in any banner that's 500x200 pixels. You don't need a white border, it's already in the CSS.
Instructions:
1. Go to Journal >> Customize Journal
2. To get S2 Flexible Squares, type 'Flexible Squares' into the Search box.
3. Choose any one of them, and Apply it.
4. Now click 'Customize Theme'
5. Press 'Custom CSS' on the left
6. Choose 'No' for all the drop down boxes.
7. Paste the codes in.
8. Save.
Check out the layout
FAQ before asking any questions, please :)
You can
watch exitclosed if you like what you see :)