From
seasonal_spuffy{01-01} Spuffy Layout
{02-03} Spuffy Headers
{04-04} Spuffy Friends Only Banner
{05-05} Spuffy User Info Banner
{06-53} Spuffy Icons
Credit betweenthewoods or effulgent_girl
Blanks are not bases
No hotlinking
Comments are loved
Teaser:
Style: Flexible Squares
Works with: Free and sponsored accounts (not tested in paid)
Best viewed with: Firefox or IE 7
Rules:
01. Upload images to your image server and replace the URL's within the CSS.
02. In the customize page select Flexible Squares as your theme.
03. Go to custom options and then to Custom CSS.
04. Select NO in all the drop down boxes. Copy and paste the CSS into the Custom stylesheet box and save changes.
/* Cleaned CSS: */
/*------------------------------------------------------
Spuffy Layout | Blue
Layout by 17laura |
http://17laura.livejournal.com/ |
Header by effulgent_girl |
http://effulgent_girl.livejournal.com/ |
2008 | style -- Flexible Squares / s2
------------------------------------------------------*/
/*------------------------------------------------------
BASIC
------------------------------------------------------*/
body {
text-align: left;
color: #adadad;
font-family: trebuchet ms;
font-size: 10px;
margin: 0px 0;
background-color: #ffffff;
}
a, a:link, a:visited {
color: #717171;
text-decoration: none;
}
a:hover {
color: #4e4fe7;
}
p, td, blockquote {
font-size: 7pt;
}
strong, b {
color: #4e4fe7;
font-weight: bold;
}
blockquote {
margin: 10px 30px 10px 30px;
padding: 10px 10px 10px 10px;
border: #dddfdc 1px dotted;
background: #ffffff;
color: #adadad;
}
code, kbd, pre, tt {
font-family: trebuchet ms;
}
#content
{
width: 710px;
margin-left: auto; margin-right: auto;
background-color: #ffffff;
border-top: 4px solid #ffffff;
margin-bottom: 0px;
}
#maincontent {
margin: 20px 0px 0px 190px;
padding: 0px 10px 0px 10px;
font-family: trebuchet ms;
font-size: 9pt;
color: #adadad;
text-align: left;
border-left: #dddfdc 1px dotted;
background-color: #ffffff;
}
#sidebar {
padding: 20px 10px 0px 10px;
margin: 0px;
font-size: 9px;
font-family: trebuchet ms;
color: #adadad;
width: 165px;
float: left;
text-align: justify;
background-color: #ffffff;
}
#header {
padding: 0px 0px 0px 0px;
margin: 0px;
padding-top: 05px;
padding-bottom: 05px;
height: 40px;
font-size: 12px;
text-align: center;
font-family: arial, verdana, tahoma;
text-transform: lowercase;
font-weight: bold;
line-height: 9px;
letter-spacing: 2px;
color: #000000;
background-color: #dddfdc;
}
#footer {
margin: 0px 0px 0px 0px;
text-align: center;
font-family: arial, verdana, tahoma;
text-transform: lowercase;
font-size: 9px;
font-weight: bold;
letter-spacing: 2px;
color: #000000;
clear: both;
}
/*------------------------------------------------------
HEADER
links to views; title of journal; subtitle of journal
------------------------------------------------------*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #ffffff;
font-weight: lighter;
font-family: arial, verdana, tahoma;
text-transform: lowercase;
font-style: none;
background-color: #dddfdc;
font-size: 15px;
padding: 2px;
}
div#header a:hover, div#footer a:hover {
color: #4e4fe7;
font-weight: normal;
font-family: arial, verdana, tahoma;
text-transform: lowercase;
font-style: none;
background-color: #ffffff;
font-size: 10px;
padding: 5px;
}
ul.navheader {
padding: 25px;
background-color: #ffffff;
margin: 0px;
}
ul.navheader li {
display: inline;
padding-left: 20px;
}
.title {
font-family: arial, verdana, tahoma;
font-size: 11px;
font-weight: bold;
visibility: hidden;
top: 10px;
}
.subtitle{
font-family: "lucida grande", sans-serif;
font-size: 7pt;
font-weight: normal;
visibility: hidden;
top: 10px;
}
/*------------------------------------------------------
SIDEBAR
calendar; text; link
------------------------------------------------------*/
div.sbarbody a, div.sbarbody a:link, div.sbarbody a:visited {
margin: 0px 0px;
color: #717171;
}
div.sbarbody a:hover {
margin: 0px 0px;
text-decoration: none;
color: #4e4fe7;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #717171;
}
div#sidebar a:hover {
color: #4e4fe7;
text-decoration: none;
}
.defaultuserpic {
text-align: center;
background-color: #ffffff;
padding: 5px;
}
.sbarheader {
padding: 0px 5px 0px 5px;
color: #adadad;
text-align: center;
}
.sbarbody {
padding: 0px 0px 0px 0px;
}
.sbarbody2 {
padding: 0 0px 0 0px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
width:100%;
}
.sbarcalendar {
border-color: #adadad;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "trebuchet ms", sans-serif;
font-size: 9px;
color: #adadad;
}
.sbarcalendarposts {
border-color: #dddfdc;
border-width: 1px;
border-style: solid;
background-color: #dddfdc;
text-align: center;
color: #ffffff;
font-family: trebuchet ms, sans-serif;
font-size: 9px;
}
.sbarcalendarposts a, .sbarcalendarposts a:link, .sbarcalendarposts a:visited {
color: #717171; font-weight:normal;
}
#sidebar_summary li.sbaritem {
margin: 0 10px;
padding: 3 0 0 0;
}
li.sbaritem {
border-width: 0px;
padding-left: 0px;
color: #666666;
}
li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {
font-family: "Lucida Sans Unicode", tahoma, verdana, sans-serif;
font-size: 10px;
color: #6699ff;
line-height: 14px;
text-transform: lowercase;
border-bottom: 1px dotted #e5e5e5;
display: block;
padding-left: 5px;
}
li.sbaritem a:hover {
color: #b40e02;
text-decoration: none;
background-color: #ffffff;
border-bottom: 1px #e5e5e5 solid;
padding-left: 5px;
}
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbartitle {
padding: 10px;
color: #4e4fe7;
font-weight: bold;
font-family: arial, "verdana", sans-serif;
text-transform: lowercase;
font-size: 13px;
background-color: #ffffff;
border-bottom: 1px #dddfdc dotted;
letter-spacing: 1px;
}
/*-----------------------
| HEADER IMAGE |
-------------------------*/
.headerimage {
position: relative;
width: 700px;
height: 350px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px; /* Space between bottom of image and outer box of style */
background-image: url(YOUR URL/ssf08ban02.jpg);/* paste the url of the header */
background-repeat: no-repeat;
}
/*------------------------------------------------------
MAINCONTENT
------------------------------------------------------*/
/*-----------------------
| entry |
-------------------------*/
.subcontent {
}
.entry {
margin: 0px 6px 6px 6px;
padding: 6px;
background-color: #ffffff;
color: #adadad;
font-family: trebuchet ms;
font-size: 9px;
text-align: justify;
border-width: 0px;
border-color: #adadad;
border-style: solid;
}
.entry ul li
{
padding-left: 0px;
margin-left: 0px;
}
.entry ol li
{
padding-left: 0px;
margin-left: 0px;
}
.userpic {
position: relative;
float: right;
background-color: #ffffff;
padding: 5px;
margin: 5px;
z-index: 15;
border-width: 0px;
border-color: #adadad;
border-style: solid;
}
.userpicfriends {
position: relative;
float: right;
background-color: #ffffff;
padding: 5px;
margin: 5px;
z-index: 15;
border-width: 0px;
border-color: #adadad;
border-style: solid;
}
.date {
line-height: 150%;
top: 5px;
font-family: trebuchet ms, arial, sans-serif;
font-size: 9px;
color: #adadad;
font-weight: normal;
text-transform:lowercase;
letter-spacing: 0px;
padding-left: 10px;
background-color: #ffffff;
}
.subject {
padding: 10px;
color: #4e4fe7;
font-weight: bold;
font-family: arial, "verdana", sans-serif;
text-transform: lowercase;
font-size: 13px;
background-color: #ffffff;
border-bottom: 1px #dddfdc dotted;
letter-spacing: 1px;
}
.subject a, .subject a:link, .subject a:visited {
color: #717171;
}
.subject a:hover {
color: #4e4fe7;
}
.datesubject {
}
.currents, .currentmood, .currentmusic {
font-family: trebuchet ms, sans-serif;
font-size: 9px;
color: #717171;
}
.comments {
font-family: trebuchet ms, sans-serif;
font-size: 9px;
text-align: right;
background-color: #ffffff;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #717171;
font-size: 11px;
text-transform: lowercase;
}
div.comments a:hover {
color: #4e4fe7;
text-decoration: none;
}
/*-----------------------
| ljuser and community |
-------------------------*/
.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(YOUR URL/user.jpg); /* paste the url of the USER IMMAGE */
padding: 17px 3px 0 17px;
}
.ljuser img[src="
http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(YOUR URL/user.jpg); /* paste the url of the USER IMMAGE */
padding: 17px 3px 0 17px;
}
.ljuser img[src="
http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(YOUR URL/comm.jpg); /* paste the url of the COMM IMAGE */
padding: 17px 3px 0 17px;
}
/*-----------------------
| reply pages |
-------------------------*/
.datesubjectcomment {
background-color: #ffffff;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
float: right;
background-color: #ffffff;
padding: 5px;
margin: 5px;
z-index: 15;
border-width: 0px;
border-color: #adadad;
border-style: solid;
}
.box {
border-style: dotted;
border-width: 1px 1px 1px 1px;
border-color: #dddfdc;
padding: 10px;
}
input, textarea {
background-color: #ffffff;
color: #adadad;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: trebuchet ms, sans-serif;
font-size: 9pt;
line-height: 125%;
background-color: #ffffff;
color: #adadad;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 9px;
font-family: trebuchet ms, sans-serif;
color: #adadad;
}
.commentbox {
border-color: #dddfdc;
border-width: 1px;
border-style: dotted;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #717171 ;
}
.datesubjectcomment a:hover {
color: #4e4fe7;
}
.commentboxpartial {
border-color: #adadad;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.commentinfo {
background-color: #ffffff;
margin-top: 10px;
width: 100%;
}
/*-----------------------
| achive 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: #dddfdc;
}
table.yeartable td.yearday {
background-color: #ffffff;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*-----------------------
FOOTER
-------------------------*/
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/* misc */
.clear {
height: 15px;
}
.skiplinks {
text-align: center;
}
.separator{
/* for formatting separators between entries */
height: 35px;
}
/*-----------------------
POPUP
-------------------------*/
/*general positioning*/
div.ContextualPopup {
margin: 5px 0 0 10px;
font: normal 10px "Verdana", sans-serif, arial !important;
}
/* attaches border to user icon*/
div.ContextualPopup img {
border: 0;
}
/*defines general look, font color/size/background color*/
div.ContextualPopup div.Inner {
background:transparent!important;
color: #adadad!important;
border:none;
padding:7px;
width: 250px;
font-family:trebuchet ms;
}
/*defines left side of popup without the user icon*/
div.ContextualPopup .Content {
padding:7px 7px 7px 7px;
margin-right:0px;
line-height: 1.4;
background: #ffffff;
border:1px solid #adadad;
}
/*defines the text that shows the relation to the user (XYZ is your mutual friend) */
div.ContextualPopup .Relation {
letter-spacing:1px;
border-bottom: 1px solid #adadad;
margin-bottom:4px;
padding-bottom:4px;
}
/* look of words LJ Talk */
div.ContextualPopup .Content .OnlineStatus {
font-weight: bold;
}
/*element that contains the user icon*/
div.ContextualPopup .Userpic {
padding: 5px;
background:#ffffff;
margin:5px;
border:0px solid #adadad;
}
/* defines the look of the links*/
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #4e4fe7 !important;
}
Image Links:
Header |
User |
Community
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.