Well. So. I basically had a party with gray-scale and black/white color schemes. I don't really see the point of posting them all separately when they are all the same flexible sheets style essentially; just with different backgrounds, and organizations. I think I'm going to try for darker color schemes following this post. Also, eh, I've been lackadaisical when it comes to icons, I know, but I'm kind of taking a break from them for right now. Paint.NET is not cooperating currently, and GIMP isn't in a much better position. Oh how I long for Photoshop CS5 right about now. Or at least CS4. But that is another story, I suppose. Finally, I changed the community layout! It looks more professional, or something like that. Or maybe I just like more graaaaaay. XD
FLEXIBLE SQUARES HODGEPODGE.
3 GRAY GREY LAYOUTS:
01 Cross Reverberation ((
live |
image ))
02 Vintage Sprawl ((
live |
image ))
03 Shadows Cast on Sand ((
live |
image ))
COMPATIBLE BROWSERS*:
Firefox, Google Chrome, Safari, IE
*with minimal appearance differences
Ironically enough, thunderstorms and tornadoes are moving into my area, again, just in time for my exciting gray-scaled designs. Happy Easter (Resurrection Day!!), and enjoy this ridiculously packed post of flexible squares codes.
( basic settings )
Account Types: All (Paid, Basic, Plus)
Ad Placement: Vertical/Between Entries
Comment Pages: Eh, I just don't like them
Sidebar Positioning: Left
( how to install )
Go to
Customize Your Journal Style. Make sure you have a Flexible Squares stylesheet selected, such as "Blue Gray." If not, type Flexible Squares into the search bar and select one.
Page setup -> 2 Column (sidebar on left) option selected.
Display tab -> Presentation -> Additional options -> user picture position should be set to right.
Custom CSS tab -> All dropdown menus should be set to NO.
Input the corresponding CSS:
CROSS REVERBERATION //
header by
sunlitdays. thanks~
/* entitled: cross reverberation */
/* maker: silentevocation @ fleeting_days */
/* for use at livejournal.com */
/* BODY ---------------- */
body {
background-color: white;
background-image: url("
http://i54.tinypic.com/212y92r.png");
background-attachment:fixed;
margin: 10px 0 0px 0;
}
body, td, th {
font: normal 11px "Trebuchet MS", sans-serif;
color: #404040;
line-height: 1.5em;
text-align:justify;
}
/* PARENT LINKS, BLOCK QUOTE ---------------- */
a, a:link, a:visited, a:active {
color: #545454;
text-decoration: none;
}
b, strong {
color: #898989;
}
a:hover {
color: #B7A8B5;
text-decoration: none;
}
blockquote {
border: 1px solid #DBDBDB;
padding: 15px;
background-color: #f4f4f4;
}
input, textarea, select {
background-color: #ffffff;
font: normal 11px "Courier New", monospace;
border:1px dotted #EFEFEF;
}
/* CONTENT FORMATTING ---------------- */
#content {
margin:auto;
}
#maincontent {
margin:auto;
color: #999999;
font: 12px "Sans", sans-serif;
line-height: 1.5em;
}
.subcontent, .yeartable {
background-color:#f2f2f2;
margin:auto;
width:600px;
z-index: 12; }
/* HEADER AND FOOTER ---------------- */
.headerimage {
height: 400px;
width: 600px;
background-image: url("
http://i51.tinypic.com/esuwef.png") !important;
background-repeat: no-repeat !important;
background-attachment: scroll !important;
background-position: center !important;
background-color: #000000;
margin: auto;
}
#header {
width: 600px;
margin:auto;
padding: 10px 0px 10px 0px;
text-align: center;
font: normal 17px "Tunga", sans-serif;
letter-spacing: 0px;
background-color: #000000;
}
#footer {
font: normal 17px "Trebuchet MS", sans-serif;
text-transform: lowercase;
width: auto;
text-align: center;
letter-spacing: 0px;
color: #DBDBDB;
}
#footer a, #footer a:link, #footer a:visited, #footer a:active {
padding: 10px;
color: #999999;
}
#footer a:hover {
color: #AAAAAA;
}
div#header a, div#header a:link, div#header a:visited, div#header a:active {
color: #ffffff;
text-transform: lowercase;
padding-left: 14px;
padding-right: 14px;
text-decoration: none;
margin:0px;
}
div#header a:hover {
background-color: #000000;
text-decoration: none;
color: #DBDBDB;
margin:0px;
}
ul.navheader {
padding: 0px 0px 0px 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
ul.navheader li.view {
padding: 10px;
text-decoration: bold;
color: white;
text-transform: lowercase;
}
.title, .subtitle
{
display: none;
}
/* ENTRY, ENTRY-LISTS ---------------- */
.entry {
padding: 5px;
color: #999999;
font: normal 11px "Trebuchet MS", sans-serif;
line-height: 1.5em;
text-align: justify;
}
.lj-view-recent .entry_text {
min-height:105px; }
.entry_text {
background: white;
padding:5px 5px 5px 5px;
width: 580px;
}
.entry_text a:link, a:visited, a:active {
color:e3e3e3; }
.entry_text a:hover {
color:e3e3e3; }
.entry_text img {
border: 1px dotted #CCCCCC;
padding:5px;
}
.entry ul li {
padding-left: 5px;
margin-left: 5px;
}
.entry ol li {
padding-left: 5px;
margin-left: 5px;
}
/* USER PIC CRAP ---------------- */
.userpic, .userpicfriends {
position: relative;
float: right;
background-color: transparent !important;
padding: 5px;
margin: 65px -142px 0px 0px;
z-index: 15;
text-align: center;
color: #ffffff;
}
.userpic img, .userpicfriends img, .defaultuserpic img {
padding: 15px;
width: 90px;
height: 90px;
background-image: url("
http://i53.tinypic.com/bilzjp.png");
border-top: 15px solid #000000;
border-bottom: 1px solid #000000;
background-color: #ffffff;
}
.userpic a font, .userpicfriends a font {
color: #B5B5B5;
}
.userpic a, .userpicfriends a, .userpic font, .userpicfriends font{
color: #B5B5B5; }
/* DATE AND SUBJECT ---------------- */
.date {
text-transform:uppercase;
font: normal 9px "Courier New", sans-serif;
color: #000000;
letter-spacing: 1px;
text-align: left;
margin-bottom: 5px;
padding: 4px 4px 2px 10px;
background: white;
}
.subject {
text-align: left;
text-transform: lowercase;
background-color:#000000;
padding: 6px 6px 6px 10px;
font: bold italic 22px "Times", sans-serif;
letter-spacing: 0px;
}
.subject a, subject a:link {
color: #ffffff;
}
.subject a:hover {
color: #ffffff;
}
.datesubject {
width: 590px;
background-image: url("
http://i53.tinypic.com/bilzjp.png");
text-align: center;
margin: 0px 0px 0 0px;
padding: 5px;
}
/* FORMAT THE SIDEBAR ------------------ */
#sidebar {
width:570px;
background-image: url("
http://i53.tinypic.com/bilzjp.png");
font: normal 11px "Courier New", serif;
color: #404040;
text-align: justify;
padding: 15px;
margin-top: 10px;
margin-bottom: 35px;
margin-left:auto;
margin-right:auto; }
div#sidebar a, div#sidebar a:link, div#sidebar a:visited, li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active{
font: normal 11px "Courier New", sans-serif; color: #EFAB51; text-
align: left; text-transform: lowercase; padding: 2px; }
div#sidebar a:hover, li.sbaritem a:hover{ color: #AAAAAA; text-
decoration: none; text-align: center; }
.sbarbody{text-align: center;}
.sbarbody2{position: relative; overflow:auto; max-height: 250px; background: white;
padding: 5px; color: #404040; width: 215; line-height: 1.5em;}
ul.sbarlist{
background: #white;
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
display:none;
}
li.sbaritem:hover{display:none; }
#sidebar_linklist {
display:none;}
.sidebar-links {
display:none; }
li.sbaritem a{ text-align: center; font-size: 10px; color: #FFC851;
letter-spacing: 1px; list-style-type: none;}
.sbarcalendar, .sbarbody#sidebar_tags, .sbarbody#sidebar_summary, .sbarbody#sidebar_calendar, .defaultuserpic,
.sbarheader, li.sbartitle { display: none; }
/* TAGS ------------------ */
.ljtags {
border-top: 1px dotted #DBDBDB;
border-bottom: 1px dotted #DBDBDB;
background: white;
margin-top: 15px;
padding:5px;
width: 570px;
font: italic 12px "Georgia", sans-serif;
text-transform: lowercase; }
.ljtags a {
color: #3F3F3F;
}
.ljtags a:hover {
color: #111111; }
ul.ljtaglist {
width: 575px;
background-color:#white;
padding: 5px;
padding-top:20px;
list-style:none;
margin:0;}
/* CURRENTS INFO ---------------- */
.currents {
background: white;
padding:5px;
width: 580px;
margin-top:-10px;
font: normal 9px "Courier New", sans-serif;
text-transform: uppercase;
color: #3F3F3F;
}
.currents strong {
font-weight: normal;
}
/* COMMENT LINKS ---------------- */
.comments {
background-color:#f2f2f2;
padding:5px;
width: 570px;
text-transform:uppercase;
color: #3F3F3F;
}
div.comments a, div.comments a:link, div.comments a:visited {
color: #414141;
width:570px;
background-color: #ffffff;
font: normal 13px "Trebuchet MS", sans-serif;
padding-bottom:15px;
letter-spacing: 1px;
text-transform:lowercase;
padding: 3px 8px 3px 8px;
}
div.comments a:hover {
color: #b5b5b5;
background-color: white;
text-decoration: none;
}
/* COMMENT-PAGE ---------------- */
.datesubjectcomment {
width:600px;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border: 1px solid #e3e3e3;
padding: 10px;
width: 70px;
height: 70px;
background-image: url("
http://i53.tinypic.com/bilzjp.png");
top: -30px;
left: 0px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}
.box {
clear: left;
}
input, textarea {
background-color: #ffffff;
border: 1px solid #e3e3e3;
padding: 3px;
font-family: arial;
color: #b5b5b5;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Arial", sans-serif;
font-size: 11px;
line-height: 125%;
color: #b5b5b5;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Arial", sans-serif;
color: #b5b5b5;
}
.commentbox {
background-color: #ffffff;
padding: 10px;
margin: 10px;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
border: 1px solid #e3e3e3;
}
.commentinfo {
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
color: #ffffff;
text-align: left;
text-transform: uppercase;
padding-bottom: 20px;
}
/* ARCHIVE PAGE ---------------- */
ul.year {
text-align: center;
padding-bottom: 20px;
}
ul.year li {
display: inline;
}
table.yeartable {
width: 625px;
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #ffffff;
padding:10px;
}
table.yeartable td.yearday {
background-color: #ffffff;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/* FOOTER ---------------- */
ul.navfooter{
padding: 5px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
height:0;
}
/* MISC, SPACE SEPARATOR ----------------*/
.clear {
height: 5px;
}
.skiplinks {
text-align: center;
text-transform:uppercase;
}
.separator{
height: 5px;
}
form#qrform table {
border-width: 0px !important;
}
/* LJ USER IMG ICONS ---------------- */
.ljuser img[src*="userinfo.gif"], .ljuser img[src*="/userhead/"], img
[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img
[src*="openid-profile.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat !important;
background-image: url(
http://i52.tinypic.com/2mpe6bn.jpg) !important;
padding: 15px 11px 0 0 !important;
text-decoration: none;
}
.ljuser img[src*="community.gif"], img[src*="partnercomm.gif"] {
background-repeat: no-repeat !important;
background-image: url(
http://i55.tinypic.com/mwt8id.jpg) !important;
padding: 14px 12px 0 0 !important;
width:0;
height: 0;
text-decoration: none;
}
img[src*="icon_protected.gif"] {
display: none;
}
img[src*="icon_private.gif"] {
display: none;
}
img[src*="newsinfo.gif"] {
background-image:url("
http://i52.tinypic.com/2vi07bq.png");
background-repeat:no-repeat !important;
height:0;
padding:14px 14px 0 0 !important;
width:0;
}
img[src*="syndicated.gif"] {
background-image:url("
http://i52.tinypic.com/f0c6t5.png");
background-repeat:no-repeat !important;
height:0;
padding:14px 14px 0 0 !important;
width:0;
}
/* CONTEXTUAL POP-UP ---------------- */
div.ContextualPopup div.Inner {
padding: 10px 10px 8px 10px !important;
font-family: "Trebuchet MS", serif;
color: #999999 !important;
font-size: 10px;
text-transform:lowercase;
width:210px;
border:1px dotted #CCCCCC;
}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link,
div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner
a:active {
color: #888888 !important;
font-weight: normal;
text-decoration: none !important;
}
div.ContextualPopup div.Inner a:hover {
color: #B7A8B5 !important;
font-weight: normal;
text-decoration: none !important;
}
div.ContextualPopup .Relation {
color: #B5B5B5;
font-weight: normal !important;
}
div.ContextualPopup .Userpic { padding: 8px; background-color: #f2f2f2;}
VINTAGE SPRAWL //
/* entitled: vintage sprawl */
/* maker: silentevocation @ fleeting_days */
/* for use at livejournal.com */
/* BODY ---------------- */
body {
background-color: white;
background-attachment:fixed;
background-image: url("");
margin: auto;
}
body, td, th {
font: normal 10px "Georgia", serif;
color: #B5B5B5;
line-height:13px;
text-align:justify;
}
/* PARENT LINKS, BLOCK QUOTE ---------------- */
a, a:link, a:visited, a:active {
color: #969696;
text-decoration: none;
}
b, strong {
color: #898989;
}
a:hover {
color: #BCCED8;
text-decoration: none;
}
blockquote {
border: 1px dotted #CCCCCC;
padding: 15px;
background-color: #F7F7F7;
}
input, textarea, select {
background-color: #ffffff;
font: normal 11px "Courier New", monospace;
border:1px dotted #EFEFEF;
}
/* CONTENT FORMATTING ---------------- */
#content {
width: 670px;
margin:auto;
}
#maincontent {
margin-top: 5px;
text-align: auto;
color: #999999;
font: 11px "Arial", sans-serif;
line-height: 1.5em;
}
.subcontent, .yeartable {
background-color:#ffffff;
padding: 4px;
padding-top:9px; }
/* HEADER AND FOOTER ---------------- */
#header {
width: 650px;
padding: 10px 10px 45px 0px;
text-align: center;
font: normal 26px "Arial", sans-serif;
text-transform: lowercase;
letter-spacing: -1px;
color: #ffffff;
}
#footer {
font: normal 22px "Arial", sans-serif;
text-transform: lowercase;
width: auto;
text-align: center;
letter-spacing: 0px;
color: #DBDBDB;
}
#footer a, #footer a:link, #footer a:visited, #footer a:active {
padding: 10px;
color: #999999;
}
#footer a:hover {
color: #AAAAAA;
}
div#header a, div#header a:link, div#header a:visited, div#header a:active {
color: #DBDBDB;
background-color: #ffffff;
padding: 10px;
text-decoration: none;
margin:0px;
}
div#header a:hover {
background-color: #ffffff;
text-decoration: none;
color: #AAAAAA;
margin:0px;
}
ul.navheader {
padding: 0px 0px 0px 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
ul.navheader li.view {
padding: 10px;
color: #AFAFAF;}
.title
{
margin-top:50px;
margin-bottom:-5px;
text-align: right;
color: #919191;
font: italic 32px "Georgia", sans-serif;
letter-spacing: -2px;
}
.subtitle
{
text-align: right;
color: #B7B7B7;
font: bold italic 18px "Georgia", sans-serif;
letter-spacing: -1px;
margin-bottom:-30px;
}
/* ENTRY, ENTRY-LISTS ---------------- */
.entry {
background-image: url("
http://img233.imageshack.us/img233/1719/th20a7e6622.png");
padding: 15px;
position: relative;
color: #999999;
margin-left:5px;
font: normal 11px "Arial", sans-serif;
line-height: 1.5em;
text-align: justify;
}
.lj-view-recent .entry_text {
min-height:125px; }
.entry_text {
background: white;
padding:10px;
width: 610px;
margin-left:-2px;
margin-bottom:-2px;
}
.entry_text a:link, a:visited, a:active {
color:e3e3e3; }
.entry_text a:hover {
color:e3e3e3; }
.entry_text img {
border: 1px dotted #CCCCCC;
padding:5px;
}
.entry ul li {
padding-left: 5px;
margin-left: 5px;
}
.entry ol li {
padding-left: 5px;
margin-left: 5px;
}
/* USER PIC CRAP ---------------- */
.userpic, .userpicfriends {
position:absolute;
float: left;
background-color: transparent !important;
padding: 5px;
margin: 67px 0px 0px -150px;
text-align: center;
color: #ffffff;
z-index: 5;
}
.userpic img, .userpicfriends img, .defaultuserpic img {
border: 1px solid #CCCCCC;
padding: 18px;
width: 100px;
height: 100px;
background-color: #e8e8e8;
}
.userpic a font, .userpicfriends a font {
color: #B5B5B5;
}
.userpic a, .userpicfriends a, .userpic font, .userpicfriends font{
color: #B5B5B5; }
/* DATE AND SUBJECT ---------------- */
.date {
text-transform:uppercase;
font-size: 8px;
color: #B7B7B7;
letter-spacing: 1px;
text-align: center;
padding: 0px;
}
.subject, subject a, subject a:link {
font-weight: normal;
text-transform: lowercase;
color: #686868;
line-height: 20px;
padding-bottom:5px;
font: italic 26px "Georgia", sans-serif;
letter-spacing: -2px;
z-index: 25;
}
.subject a:hover {
color: #CCCCCC;
}
.datesubject {
width: 650px;
background-image: url("
http://img233.imageshack.us/img233/1719/th20a7e6622.png");
text-align: center;
margin: 0px 0px -10px 5px;
padding: 5px;
}
/* FORMAT THE SIDEBAR ------------------ */
#sidebar {
width:630px;
background: white;
background-image: url("
http://img233.imageshack.us/img233/1719/th20a7e6622.png");
height:auto;
font: normal 10px "Arial", serif;
color: #A5A5A5;
text-align: justify;
left:2%;
padding: 15px;
margin-left: 10px; }
div#sidebar a, div#sidebar a:link, div#sidebar a:visited, li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active{
font: normal 11px "Courier New", sans-serif; color: #EFAB51; text-
align: left; text-transform: lowercase; padding: 2px; }
div#sidebar a:hover, li.sbaritem a:hover{ color: #AAAAAA; text-
decoration: none; text-align: center; }
.sbarbody{text-align: center;}
.sbarbody2{position: relative; overflow:auto; max-height: 250px; background: white;
padding: 5px; color: #999999; width: 215; line-height: 1.5em;}
ul.sbarlist{
background: #white;
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
display:none;
}
li.sbaritem:hover{display:none; }
#sidebar_linklist {
display:none;}
.sidebar-links {
display:none; }
li.sbaritem a{ text-align: center; font-size: 10px; color: #FFC851;
letter-spacing: 1px; list-style-type: none;}
.sbarcalendar, .sbarbody#sidebar_tags, .sbarbody#sidebar_summary, .sbarbody#sidebar_calendar, .defaultuserpic,
.sbarheader, li.sbartitle { display: none; }
/* TAGS ------------------ */
.ljtags {
background: white;
padding:5px;
margin-top: 10px;
width: 610px;
margin-bottom: -10px;
font: italic 12px "Georgia", sans-serif;
text-transform: lowercase;
background: transparent url() no-repeat scroll 100% 50%; }
.ljtags a {
color: #CCCCCC;
}
.ljtags a:hover {
font-style: italic;
color: #BCCED8; }
ul.ljtaglist {
width: 610px;
background-color:#ffffff;
padding: 10px;
padding-top:30px;
list-style:none;
margin:0;}
/* CURRENTS INFO ---------------- */
.currents {
background: white;
padding:15px;
width: 600px;
margin-top:-20px;
font: italic 12px "Georgia", sans-serif;
text-transform: lowercase;
}
.currents strong {
font-weight: normal;
}
/* COMMENT LINKS ---------------- */
.comments {
background: white;
padding:5px 5px 15px 5px;
width: 625px;
text-align: center;
padding: 8px 4px 4px 4px;
position: relative;
margin: -15px 0 0 0px;
}
div.comments a, div.comments a:link, div.comments a:visited {
color: #CCCCCC;
font: normal 15px "Arial", sans-serif;
padding-bottom:15px;
letter-spacing: 1px;
text-transform:lowercase;
padding: 3px;
}
div.comments a:hover {
color: #b5b5b5;
text-decoration: none;
}
/* COMMENT-PAGE ---------------- */
.datesubjectcomment {
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border: 1px solid #e3e3e3;
padding: 10px;
width: 70px;
height: 70px;
background-image: url("
http://i51.tinypic.com/dyr7g0.jpg");
top: -30px;
left: 0px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}
.box {
clear: left;
}
input, textarea {
background-color: #ffffff;
border: 1px solid #e3e3e3;
padding: 3px;
font-family: arial;
color: #b5b5b5;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Arial", sans-serif;
font-size: 11px;
line-height: 125%;
color: #b5b5b5;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Arial", sans-serif;
color: #b5b5b5;
}
.commentbox {
background-color: #ffffff;
padding: 10px;
margin: 10px;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
border: 1px solid #e3e3e3;
}
.commentinfo {
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
color: #ffffff;
text-align: left;
text-transform: uppercase;
padding-bottom: 20px;
}
/* ARCHIVE PAGE ---------------- */
ul.year {
text-align: center;
padding-bottom: 20px;
}
ul.year li {
display: inline;
}
table.yeartable {
width: 625px;
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #ffffff;
padding:10px;
}
table.yeartable td.yearday {
background-color: #ffffff;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/* FOOTER ---------------- */
ul.navfooter{
padding: 5px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
height:0;
}
/* MISC, SPACE SEPARATOR ----------------*/
.clear {
height: 6px;
}
.skiplinks {
text-align: center;
text-transform:uppercase;
}
.separator{
height: 10px;
}
form#qrform table {
border-width: 0px !important;
}
/* LJ USER IMG ICONS ---------------- */
.ljuser img[src*="userinfo.gif"], .ljuser img[src*="/userhead/"], img
[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img
[src*="openid-profile.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat !important;
background-image: url(
http://i52.tinypic.com/2mpe6bn.jpg) !important;
padding: 15px 11px 0 0 !important;
text-decoration: none;
}
.ljuser img[src*="community.gif"], img[src*="partnercomm.gif"] {
background-repeat: no-repeat !important;
background-image: url(
http://i55.tinypic.com/mwt8id.jpg) !important;
padding: 14px 12px 0 0 !important;
width:0;
height: 0;
text-decoration: none;
}
img[src*="icon_protected.gif"] {
display: none;
}
img[src*="icon_private.gif"] {
display: none;
}
img[src*="newsinfo.gif"] {
background-image:url("
http://i52.tinypic.com/2vi07bq.png");
background-repeat:no-repeat !important;
height:0;
padding:14px 14px 0 0 !important;
width:0;
}
img[src*="syndicated.gif"] {
background-image:url("
http://i52.tinypic.com/f0c6t5.png");
background-repeat:no-repeat !important;
height:0;
padding:14px 14px 0 0 !important;
width:0;
}
/* CONTEXTUAL POP-UP ---------------- */
div.ContextualPopup div.Inner {
padding: 10px 10px 8px 10px !important;
background-color: #ffffff;
font-family: "Arial", serif;
color: #999999 !important;
font-size: 8px;
text-transform:uppercase;
width:210px;
border:1px solid #CCCCCC;
}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link,
div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner
a:active {
color: #888888 !important;
font-weight: normal;
text-decoration: none !important;
}
div.ContextualPopup div.Inner a:hover {
color: #BCCED8 !important;
font-weight: normal;
text-decoration: none !important;
}
div.ContextualPopup .Relation {
color: #B5B5B5;
font-weight: normal !important;
}
SHADOWS CAST ON SAND //
/* entitled: shadows cast on sand */
/* maker: silentevocation @ fleeting_days */
/* for use at livejournal.com */
/* BODY ---------------- */
body {
background-attachment:fixed;
background-image: url("
http://i53.tinypic.com/9ljtxw.png"); }
body, td, th {
font: normal 11px "Verdana", sans-serif;
color: #A3A3A3;
line-height:15px;
text-align:justify;
}
/* PARENT LINKS, BLOCK QUOTE ---------------- */
a, a:link, a:visited, a:active {
color: #777777;
font: "Trebuchet MS", sans-serif;
padding: 1px;
text-decoration: none;
}
a:hover {
color: #404040;
text-decoration: none;
}
blockquote {
border: 1px dotted #CCCCCC;
background-color: #F4F4F4;
color: #484848;
font: italic 12px "Georgia";
padding: 17px;
}
input, textarea, select {
background-color: #ffffff;
font: normal 11px "Courier New", monospace;
color: #888888;
}
/* CONTENT FORMATTING ---------------- */
#content {
width: 500px;
background-color:#transparent;
margin: auto;
}
#maincontent {
margin-top: 0px;
text-align: auto;
}
.subcontent, .yeartable {
background-color:#ffffff;
width: 640px;
padding:10px;
margin:auto;
border-top: 10px solid #DFE0DE;
padding-top: 10px; }
/* HEADER AND FOOTER ---------------- */
#header {
position: fixed;
float:left;
margin: 11px 0 0 -260px;
text-align: center;
padding-bottom: 10px;
color: #555555;
text-transform:uppercase;
font: normal 15px "Courier New", sans-serif;
letter-spacing: -1px;
list-style:none;
}
.title {
display: none;
}
.subtitle {
display: none; }
#footer {
width: 640px;
text-align: center;
z-index: 100;
background-color: #ffffff;
clear: both;
font: normal 13px "Courier New", sans-serif;
text-transform:uppercase;
padding: 10px;
margin-top: 12px;
color: #BABABA;
}
#footer a {
color:#888888;
background-color: #transparent;
font: normal 13px "Courier New", sans-serif;
padding: 10px;
text-transform:uppercase;
letter-spacing:-1px;}
div#header a, div#header a:link, div#header a:visited {
color: #484848;
background: #F4F4F4;
padding: 7px;
text-decoration: none;
margin:4px;
display:block;
width: 188px;
list-style:none;
}
div#header a:hover {
color: #ffffff;
font: normal 15px "Courier New", sans-serif;
letter-spacing: -1px;
background: #B0B0B0;
text-decoration: none;
margin:4px;
list-style:none;
}
ul.navheader {
margin: 0 0 0 0px;
}
ul.navheader li {
display: block;
margin:4px 0 0 0px;
background: #F4F4F4;
color: #484848;
border-bottom: 5px solid #D8D8D8;
border-top: 5px solid #ffffff;
padding:0;
list-style:none;
}
ul.navheader li.view {
padding: 10px;
background: #F4F4F4;
border-top: 5px solid #ffffff;
color: #484848;
list-style:none;}
/* ENTRY, ENTRY-LISTS ---------------- */
.entry {
margin: 0;
background-color: #ffffff;
padding: 15px 15px 0px 15px;
}
.lj-view-recent .entry_text {
min-height:180px; }
.entry_text {
padding: 0 0 0 0px;
}
.entry_text a:link, a:visited, a:active {color:68D9FF; }
.entry_text a:hover {font-color:000;}
.entry_text img {
border-top: 1px dotted #eee;
padding:5px;
}
.entry ul li {
padding-left: 5px;
margin-left: 5px;
}
.entry ol li {
padding-left: 5px;
margin-left: 5px;
}
/* USER PIC CRAP ---------------- */
.userpic, .userpicfriends {
float: right;
background-color: transparent!important;
z-index: 15;
margin: -10px -10px 0px 0px;
text-align:right;
}
.userpic img, .userpicfriends img{
width:100px;
height:100px;
padding:15px;
background-color: #F8E865;
background-image: url("
http://i53.tinypic.com/15d3m14.png");
border:12px solid #EAEAEA;
margin: 0 0 15px 15px ;
}
.userpic a, .userpicfriends a, .userpic font, .userpicfriends font{
color: #888888; }
/* DATE AND SUBJECT ---------------- */
.date {
text-transform:uppercase;
font-size: 9px;
font-family: Courier New;
color: #CCCCCC;
letter-spacing: 3px;
text-align: left;
padding: 0px;
}
.subject, subject a, subject a:link {font: bold 23px "Arial", sans-
serif; color: #515151; padding-top: 3px; letter-spacing:-2px;text-
transform:lowercase;}
.subject a:hover {color: #BFBFBF;}
.datesubject {
padding: 10px 17px 0px 10px;
background-color: #ffffff;
text-align:left;
}
/* FORMAT THE SIDEBAR ------------------ */
#sidebar {
float:left;
position:fixed;
padding-top: 5px;
font-family: "Courier New", sans-serif;
color: #A3A3A3;
width: 210px;
text-align: justify;
margin: 215px 0 0 -220px;
line-height: 15px; }
.sbarbody {background: #ffffff;}
.sbarbody2{background: #ffffff; font-family: "Verdana", sans-serif;
padding: 5px; margin-top: 5px; margin-bottom: 5px; border-top: 10px
solid #DFE0DE; width: 200; line-height: 15px; text-align: center;}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{color:
#555555;}
div#sidebar a:hover {
color: #A3A3A3;
text-decoration: none;
}
li.sbartitle, table.calendar, .sbarcalendar, .sbarcalendarposts,
.sbarheader, #sidebar_calendar, .sbarbody#sidebar_tags
{ display:none; }
.sbarbody#sidebar_summary{border-top: 10px solid #DFE0DE; margin-top:
5px; margin-bottom: 5px; padding: 5px;}
ul.sbarlist{
background-color: #ffffff;
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
padding: 5px 0 2px 5px;
list-style: none;
border: 1px solid #efefef;
margin: 4px;
}
li.sbaritem:hover{background-color: #F7F7F7; }
#sidebar_linklist {background: #ffffff; padding: 5px; margin-top: 10px;
border-top: 10px solid #DFE0DE;}
/* TAGS ------------------ */
.ljtags {
font-size:8px;
color: #888888;
text-transform:uppercase;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
margin: 0;
height: 10px;
position:relative;
text-align:left; }
.ljtags a {color: #888888;}
.ljtags a:hover {border-bottom: 1px dotted #CCCCCC;}
ul.ljtaglist {
width: 575px;
border-top: 10px solid #DFE0DE;
background-color:#ffffff;
padding: 10px;
padding-top:30px;
list-style:none;
margin:0;}
/* CURRENTS INFO ---------------- */
.currents {
font-size: 11px;
text-transform:lowercase;
margin:0px 0px 0 0;
background: #f9f9f9;
border-left:10px solid #efefef;
padding:8px;
font: normal 11px "Verdana", sans-serif;
color: #A3A3A3;
}
.currents strong, .currents span, .currents a {
font-weight:normal;
color: #A3A3A3; }
.currentlocation { display: none; }
/* COMMENT LINKS ---------------- */
.comments {
text-align: center;
height:19px;
width:100%;
background-image: url("
http://i53.tinypic.com/15d3m14.jpg");
position: relative;
margin: 0;
border-bottom: 12px solid #ffffff;
}
.comments a{
font: normal 12px "arial", sans-serif;
text-transform:lowercase;
background-image:url("
http://i56.tinypic.com/2zfiyci.png");
padding: 8px;
color:#ffffff;
background-color: #484848;
margin: 0;
}
.comments a:hover {
text-transform:lowercase;
color:#efefef;
padding: 8px;
margin: 0;
}
/* COMMENT-PAGE ---------------- */
.datesubjectcomment {
padding: 5px;
width: 625px;
margin-top: 10px;
}
.userpiccomment {
position: relative;
border: 1px solid #e3e3e3;
padding: 10px;
width: 80px;
height: 80px;
background-image: url("
http://i53.tinypic.com/15d3m14.png");
top: -30px;
left: 0px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}
.box {
clear: left;
width: 625px;
}
input, textarea {
background-color: #ffffff;
border: 1px solid #e3e3e3;
padding: 3px;
font-family: arial;
color: #b5b5b5;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Arial", sans-serif;
font-size: 11px;
line-height: 125%;
width: 625px;
color: #b5b5b5;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Arial", sans-serif;
color: #b5b5b5;
}
.commentbox {
background-color: #ffffff;
padding: 10px;
margin: 10px;
width: 625px;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
border: 1px solid #e3e3e3;
}
.commentinfo {
margin-top: 10px;
width: 625px;
}
.skiplinks {
text-align: center;
color: #ffffff;
text-align: left;
text-transform: uppercase;
padding-bottom: 20px;
}
/* FOOTER ---------------- */
ul.navfooter{
text-align: center;
padding: 5px;
margin: 0px;
}
ul.navfooter li {
text-align: center;
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
height:0;
}
/* MISC, SPACE SEPARATOR ----------------*/
.clear {
height: 5px;
}
.skiplinks {
text-align: center;
text-transform:uppercase;
}
.separator{
height: 5px;
}
form#qrform table {
border-width: 0px !important;
}
/* LJ USER IMG ICONS ---------------- */
.ljuser img[src*="userinfo.gif"], .ljuser img[src*="/userhead/"], img
[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img
[src*="openid-profile.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat !important;
background-image: url(
http://i47.tinypic.com/wi7k3m.png) !important;
padding: 13px 10px 0 0 !important;
text-decoration: none;
}
.ljuser img[src*="community.gif"], img[src*="partnercomm.gif"] {
background-repeat: no-repeat !important;
background-image: url(
http://i50.tinypic.com/25tun2a.jpg) !important;
padding: 17px 14px 0 0 !important;
width:0;
height: 0;
text-decoration: none;
}
img[src*="icon_protected.gif"] {
background-repeat: no-repeat;
background-image: url(
http://i48.tinypic.com/2a9nwwl.gif);padding: 17px 18px 0 0 !important;
width:0;
height: 0;
text-decoration: none;
}
img[src*="icon_private.gif"] {
background-repeat: no-repeat;
background-image: url(
http://i47.tinypic.com/2i6gvac.gif);padding: 17px 21px 0 0 !important;
text-decoration: none;
width:0;
height: 0;
}
img[src*="newsinfo.gif"] {
background-image:url("
http://i47.tinypic.com/2rh8cwm.gif");
background-repeat:no-repeat !important;
height:0;
padding:18px 18px 0 0 !important;
width:0;
}
img[src*="syndicated.gif"] {
background-image:url("
http://i45.tinypic.com/2zpic05.jpg");
background-repeat:no-repeat !important;
height:0;
padding:18px 18px 0 0 !important;
width:0;
}
/* CONTEXTUAL POP-UP ---------------- */
div.ContextualPopup div.Inner {
padding: 10px 10px 8px 10px !important;
background-color: #ffffff;
font-family: "Verdana", serif;
color: #A3A3A3 !important;
font-size: 8px;
text-transform:uppercase;
width:210px;
border:1px solid #CCCCCC;
}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link,
div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner
a:active {
color: #A9C3C6 !important;
font-weight: normal;
text-decoration: none !important;
}
div.ContextualPopup div.Inner a:hover {
color: #888888 !important;
font-weight: normal;
text-decoration: none !important;
}
div.ContextualPopup .Relation {
color: #333333;
font-weight: normal !important;
}
LAYOUT DETAILS:
The sidebar and visible elements for each of the above layouts differ between each other:
1) Cross Reverb -> Only visible 'sideber' element is Text/Blurb box. The text should be centered and simple. The shorter it is, the better it looks, imo. -> Userpic position should be set to RIGHT. -> There is a header on this layout, obviously. The dimensions of the image are 600 x 400 pixels. I don't recommend changing the image, but if you want to replace it CTRL+F .headerimage { and replace the background image url with the desired image.
2) Vintage Sprawl -> Only visible 'sidebar' element is Text/Blurb box. The text should be centered. -> Userpic position should be set to LEFT. -> The title and subtitle of your journal will appear at the top of the page.
3) Shadows Cast on Sand -> Userpic position should be set to RIGHT. -> In the preview, the links list and page summary are visible, however the blurb box can be enabled. -> The calendar element in the 'sidebar' is disabled.
additional:
Saving/Hosting: All tiny icons should be SAVED SAVED SAVED to your own hardrive and reuploaded onto an image hosting site, in case mine go out. This is not required, obviously, just suggested.
Editing: Feel free to change/edit the backgrounds, color scheme, etc.
Just don't change the framework CSS and be sure to have a link back to this community or my journal as credit somewhere, anywhere on your livejournal.
Questions: Check out the
FAQ and see if your question is answered. If not, leave a comment, and I'll do my best to help with any problems.
WATCH //
AFFILIATION