(LAYOUT 015/016 →) Black Smog and White Smog.
So. This is the end of my black and white flexible squares series. I swear, unless you want more...? But the next layout coming up is definitely colorful, trust me. :)
BLACK SMOG: → static preview
WHITE SMOG: → static preview
COMPATIBLE BROWSERS*:
Firefox, Google Chrome, Safari, IE
*with minimal appearance differences
( basic settings )
Account Types: Basic, Paid RECOMMENDED... Plus works too
Ad Placement: Vertical/Between Entries
Comment Pages: Yes. But I would still disable them
Sidebar Positioning: NONE
( 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:
BLACK SMOG //
/* entitled: black smog */
/* maker: silentevocation @ fleeting_days */
/* for use at livejournal.com */
/* BODY ---------------- */
body {
background-color:#white;
background-image: url("http://i51.tinypic.com/6zo3nm.gif");
background-attachment:fixed;
margin: 10px 0 0px 0;
}
body, td, th {
font: normal 11px "Arial", 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: #87D3D3;
text-decoration: none;
}
blockquote {
border: 1px dotted #000000;
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;
width:680px;
color: #999999;
background-color:#ffffff;
border-right:15px solid #000000;
font: normal 11px "Arial", sans-serif;
line-height: 1.5em;
}
.subcontent, .yeartable {
background-color:#white;
background-image:url("");
margin:auto;
width:650px;
z-index: 12; }
/* HEADER AND FOOTER ---------------- */
#header {
width: 677px;
background-color:#ffffff;
margin:auto;
padding: 10px 10px 10px 10px;
text-align: center;
font: normal 18px "Courier New", sans-serif;
color:#545454;
letter-spacing: -1px;
margin-bottom:10px;
}
#footer {
font: normal 16px "Courier New", sans-serif;
text-transform: Uppercase;
width: auto;
text-align: center;
letter-spacing: 0px;
color: #545454;
}
#footer a, #footer a:link, #footer a:visited, #footer a:active {
padding: 10px;
color: #000000;
}
#footer a:hover {
color: #999999;
}
div#header a, div#header a:link, div#header a:visited, div#header a:active {
color: #000000;
text-transform:uppercase;
padding-left: 14px;
padding-right: 14px;
text-decoration: none;
margin:0px;
}
div#header a:hover {
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:545454;
background-color:#ffffff;
text-transform:uppercase;
}
.title, .subtitle
{
display: none;
}
/* ENTRY, ENTRY-LISTS ---------------- */
.entry {
border-top: 1px dotted #DBDBDB;
border-bottom: 1px dotted #DBDBDB;
padding: 5px;
color: #808080;
font: normal 11px "Arial", sans-serif;
line-height: 1.5em;
text-align: justify;
margin-bottom:12px;
}
.lj-view-recent .entry_text {
min-height:105px; }
.entry_text {
background: white;
padding:5px 5px 5px 5px;
width: 630px;
}
.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 -112px 0px 0px;
z-index: 15;
text-align: center;
color: #ffffff;
}
.userpic img, .userpicfriends img, .defaultuserpic img {
padding: 15px;
width: 75px;
height: 75px;
background-image: url("");
background-color: #5b5b5b;
}
.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: #545454;
letter-spacing: 1px;
text-align: center;
margin-bottom: 5px;
padding: 4px 4px 2px 10px;
}
.subject {
text-align: center;
text-transform: lowercase;
background-image:url("");
padding: 3px;
margin-bottom: 5px;
font: italic 22px "Lucida Sans", sans-serif;
letter-spacing: 0px;
}
.subject a, subject a:link {
color: #5B5B5B;
}
.subject a:hover {
color: #5B5B5B;
}
.datesubject {
width: 640px;
background-image: url("");
text-align: center;
margin: 0px 0px 0 0px;
padding: 5px;
}
/* FORMAT THE SIDEBAR ------------------ */
#sidebar { display: none; }
/* TAGS ------------------ */
.ljtags {
background: white;
margin-top: 15px;
padding:5px;
width: 630px;
font: normal 9px "Verdana", sans-serif;
text-transform: lowercase; }
.ljtags a {
color: #606060;
}
.ljtags a:hover {
color: #AAAAAA; }
ul.ljtaglist {
width: 575px;
background-color:#white;
padding: 5px;
padding-top:20px;
list-style:none;
margin:0;}
/* CURRENTS INFO ---------------- */
.currents {
display:none;
}
.currents strong {
font-weight: normal;
}
/* COMMENT LINKS ---------------- */
.comments {
background-image:url("");
padding:0px;
width: 640px;
text-align:right;
text-transform:uppercase;
color: #white;
}
div.comments a, div.comments a:link, div.comments a:visited {
width:570px;
text-align:center;
font: normal 11px "Courier New", sans-serif;
color: #545454;
padding-bottom:5px;
letter-spacing: 1px;
text-transform:uppercase;
padding:0;
}
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("");
background-color: #545454;
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;}
WHITE SMOG //
/* entitled: white smog */
/* maker: silentevocation @ fleeting_days */
/* for use at livejournal.com */
/* BODY ---------------- */
body {
background-color:#white;
background-image: url("");
background-attachment:fixed;
margin: 10px 0 0px 0;
}
body, td, th {
font: normal 11px "Arial", 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: #87D3D3;
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;
width:650px;
color: #999999;
background-color: white;
font: normal 11px "Arial", sans-serif;
line-height: 1.5em;
}
.subcontent, .yeartable {
background-color:#white;
background-image:url("http://i55.tinypic.com/2dcao36.gif");
margin:auto;
width:650px;
margin-top:35px;
z-index: 12; }
/* HEADER AND FOOTER ---------------- */
#header {
width: 650px;
margin:auto;
padding: 10px 10px 10px 10px;
text-align: center;
font: normal 16px "Courier New", sans-serif;
color:#DBDBDB;
letter-spacing: 0px;
}
#footer {
font: normal 16px "Courier New", sans-serif;
text-transform: Uppercase;
width: auto;
text-align: center;
letter-spacing: 0px;
color: #DBDBDB;
}
#footer a, #footer a:link, #footer a:visited, #footer a:active {
padding: 10px;
color: #AAAAAA;
}
#footer a:hover {
color: #999999;
}
div#header a, div#header a:link, div#header a:visited, div#header a:active {
color: #999999;
text-transform:uppercase;
padding-left: 14px;
padding-right: 14px;
text-decoration: none;
margin:0px;
}
div#header a:hover {
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;
text-decoration: bold;
color:808080;
text-transform:uppercase;
}
.title, .subtitle
{
display: none;
}
/* ENTRY, ENTRY-LISTS ---------------- */
.entry {
border-top: 1px dotted #DBDBDB;
border-bottom: 1px dotted #DBDBDB;
padding: 5px;
color: #808080;
font: normal 11px "Arial", sans-serif;
line-height: 1.5em;
text-align: justify;
margin-bottom:12px;
}
.lj-view-recent .entry_text {
min-height:105px; }
.entry_text {
background: white;
padding:5px 5px 5px 5px;
width: 630px;
}
.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 -122px 0px 0px;
z-index: 15;
text-align: center;
color: #ffffff;
}
.userpic img, .userpicfriends img, .defaultuserpic img {
padding: 15px;
width: 75px;
height: 75px;
background-image: url("");
border: 0px solid #eaeaea;
background-color: #efefef;
}
.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: #545454;
letter-spacing: 1px;
text-align: center;
margin-bottom: 5px;
padding: 4px 4px 2px 10px;
}
.subject {
text-align: center;
text-transform: lowercase;
background-image:url("");
padding: 3px;
margin-bottom: 5px;
font: 22px "Lucida Sans", sans-serif;
letter-spacing: 0px;
}
.subject a, subject a:link {
color: #D3D3D3;
}
.subject a:hover {
color: #D3D3D3;
}
.datesubject {
width: 640px;
background-image: url("");
text-align: center;
margin: 0px 0px 0 0px;
padding: 5px;
}
/* FORMAT THE SIDEBAR ------------------ */
#sidebar { display: none; }
/* TAGS ------------------ */
.ljtags {
background: white;
margin-top: 15px;
padding:5px;
width: 630px;
font: normal 9px "Verdana", sans-serif;
text-transform: lowercase; }
.ljtags a {
color: #CECECE;
}
.ljtags a:hover {
color: #E0E0E0; }
ul.ljtaglist {
width: 575px;
background-color:#white;
padding: 5px;
padding-top:20px;
list-style:none;
margin:0;}
/* CURRENTS INFO ---------------- */
.currents {
display:none;
}
.currents strong {
font-weight: normal;
}
/* COMMENT LINKS ---------------- */
.comments {
background-image:url("");
padding:0px;
width: 640px;
text-align:right;
text-transform:uppercase;
color: #white;
}
div.comments a, div.comments a:link, div.comments a:visited {
width:570px;
text-align:center;
font: normal 11px "Courier New", sans-serif;
color: #545454;
padding-bottom:5px;
letter-spacing: 1px;
text-transform:uppercase;
padding:0;
}
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("");
background-color: #efefef;
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;}
LAYOUT DETAILS:
All sidebar content is disabled: sidebar links, calendar, page summary, free blurb, tags list, and sidebar userpic. Both layouts have userpics aligned to the left, at 50% size. Both are similar style-wise, and both should be easy to use/install.
( 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
BLACK SMOG: → static preview
WHITE SMOG: → static preview
COMPATIBLE BROWSERS*:
Firefox, Google Chrome, Safari, IE
*with minimal appearance differences
( basic settings )
Account Types: Basic, Paid RECOMMENDED... Plus works too
Ad Placement: Vertical/Between Entries
Comment Pages: Yes. But I would still disable them
Sidebar Positioning: NONE
( 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:
BLACK SMOG //
/* entitled: black smog */
/* maker: silentevocation @ fleeting_days */
/* for use at livejournal.com */
/* BODY ---------------- */
body {
background-color:#white;
background-image: url("http://i51.tinypic.com/6zo3nm.gif");
background-attachment:fixed;
margin: 10px 0 0px 0;
}
body, td, th {
font: normal 11px "Arial", 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: #87D3D3;
text-decoration: none;
}
blockquote {
border: 1px dotted #000000;
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;
width:680px;
color: #999999;
background-color:#ffffff;
border-right:15px solid #000000;
font: normal 11px "Arial", sans-serif;
line-height: 1.5em;
}
.subcontent, .yeartable {
background-color:#white;
background-image:url("");
margin:auto;
width:650px;
z-index: 12; }
/* HEADER AND FOOTER ---------------- */
#header {
width: 677px;
background-color:#ffffff;
margin:auto;
padding: 10px 10px 10px 10px;
text-align: center;
font: normal 18px "Courier New", sans-serif;
color:#545454;
letter-spacing: -1px;
margin-bottom:10px;
}
#footer {
font: normal 16px "Courier New", sans-serif;
text-transform: Uppercase;
width: auto;
text-align: center;
letter-spacing: 0px;
color: #545454;
}
#footer a, #footer a:link, #footer a:visited, #footer a:active {
padding: 10px;
color: #000000;
}
#footer a:hover {
color: #999999;
}
div#header a, div#header a:link, div#header a:visited, div#header a:active {
color: #000000;
text-transform:uppercase;
padding-left: 14px;
padding-right: 14px;
text-decoration: none;
margin:0px;
}
div#header a:hover {
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:545454;
background-color:#ffffff;
text-transform:uppercase;
}
.title, .subtitle
{
display: none;
}
/* ENTRY, ENTRY-LISTS ---------------- */
.entry {
border-top: 1px dotted #DBDBDB;
border-bottom: 1px dotted #DBDBDB;
padding: 5px;
color: #808080;
font: normal 11px "Arial", sans-serif;
line-height: 1.5em;
text-align: justify;
margin-bottom:12px;
}
.lj-view-recent .entry_text {
min-height:105px; }
.entry_text {
background: white;
padding:5px 5px 5px 5px;
width: 630px;
}
.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 -112px 0px 0px;
z-index: 15;
text-align: center;
color: #ffffff;
}
.userpic img, .userpicfriends img, .defaultuserpic img {
padding: 15px;
width: 75px;
height: 75px;
background-image: url("");
background-color: #5b5b5b;
}
.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: #545454;
letter-spacing: 1px;
text-align: center;
margin-bottom: 5px;
padding: 4px 4px 2px 10px;
}
.subject {
text-align: center;
text-transform: lowercase;
background-image:url("");
padding: 3px;
margin-bottom: 5px;
font: italic 22px "Lucida Sans", sans-serif;
letter-spacing: 0px;
}
.subject a, subject a:link {
color: #5B5B5B;
}
.subject a:hover {
color: #5B5B5B;
}
.datesubject {
width: 640px;
background-image: url("");
text-align: center;
margin: 0px 0px 0 0px;
padding: 5px;
}
/* FORMAT THE SIDEBAR ------------------ */
#sidebar { display: none; }
/* TAGS ------------------ */
.ljtags {
background: white;
margin-top: 15px;
padding:5px;
width: 630px;
font: normal 9px "Verdana", sans-serif;
text-transform: lowercase; }
.ljtags a {
color: #606060;
}
.ljtags a:hover {
color: #AAAAAA; }
ul.ljtaglist {
width: 575px;
background-color:#white;
padding: 5px;
padding-top:20px;
list-style:none;
margin:0;}
/* CURRENTS INFO ---------------- */
.currents {
display:none;
}
.currents strong {
font-weight: normal;
}
/* COMMENT LINKS ---------------- */
.comments {
background-image:url("");
padding:0px;
width: 640px;
text-align:right;
text-transform:uppercase;
color: #white;
}
div.comments a, div.comments a:link, div.comments a:visited {
width:570px;
text-align:center;
font: normal 11px "Courier New", sans-serif;
color: #545454;
padding-bottom:5px;
letter-spacing: 1px;
text-transform:uppercase;
padding:0;
}
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("");
background-color: #545454;
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;}
WHITE SMOG //
/* entitled: white smog */
/* maker: silentevocation @ fleeting_days */
/* for use at livejournal.com */
/* BODY ---------------- */
body {
background-color:#white;
background-image: url("");
background-attachment:fixed;
margin: 10px 0 0px 0;
}
body, td, th {
font: normal 11px "Arial", 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: #87D3D3;
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;
width:650px;
color: #999999;
background-color: white;
font: normal 11px "Arial", sans-serif;
line-height: 1.5em;
}
.subcontent, .yeartable {
background-color:#white;
background-image:url("http://i55.tinypic.com/2dcao36.gif");
margin:auto;
width:650px;
margin-top:35px;
z-index: 12; }
/* HEADER AND FOOTER ---------------- */
#header {
width: 650px;
margin:auto;
padding: 10px 10px 10px 10px;
text-align: center;
font: normal 16px "Courier New", sans-serif;
color:#DBDBDB;
letter-spacing: 0px;
}
#footer {
font: normal 16px "Courier New", sans-serif;
text-transform: Uppercase;
width: auto;
text-align: center;
letter-spacing: 0px;
color: #DBDBDB;
}
#footer a, #footer a:link, #footer a:visited, #footer a:active {
padding: 10px;
color: #AAAAAA;
}
#footer a:hover {
color: #999999;
}
div#header a, div#header a:link, div#header a:visited, div#header a:active {
color: #999999;
text-transform:uppercase;
padding-left: 14px;
padding-right: 14px;
text-decoration: none;
margin:0px;
}
div#header a:hover {
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;
text-decoration: bold;
color:808080;
text-transform:uppercase;
}
.title, .subtitle
{
display: none;
}
/* ENTRY, ENTRY-LISTS ---------------- */
.entry {
border-top: 1px dotted #DBDBDB;
border-bottom: 1px dotted #DBDBDB;
padding: 5px;
color: #808080;
font: normal 11px "Arial", sans-serif;
line-height: 1.5em;
text-align: justify;
margin-bottom:12px;
}
.lj-view-recent .entry_text {
min-height:105px; }
.entry_text {
background: white;
padding:5px 5px 5px 5px;
width: 630px;
}
.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 -122px 0px 0px;
z-index: 15;
text-align: center;
color: #ffffff;
}
.userpic img, .userpicfriends img, .defaultuserpic img {
padding: 15px;
width: 75px;
height: 75px;
background-image: url("");
border: 0px solid #eaeaea;
background-color: #efefef;
}
.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: #545454;
letter-spacing: 1px;
text-align: center;
margin-bottom: 5px;
padding: 4px 4px 2px 10px;
}
.subject {
text-align: center;
text-transform: lowercase;
background-image:url("");
padding: 3px;
margin-bottom: 5px;
font: 22px "Lucida Sans", sans-serif;
letter-spacing: 0px;
}
.subject a, subject a:link {
color: #D3D3D3;
}
.subject a:hover {
color: #D3D3D3;
}
.datesubject {
width: 640px;
background-image: url("");
text-align: center;
margin: 0px 0px 0 0px;
padding: 5px;
}
/* FORMAT THE SIDEBAR ------------------ */
#sidebar { display: none; }
/* TAGS ------------------ */
.ljtags {
background: white;
margin-top: 15px;
padding:5px;
width: 630px;
font: normal 9px "Verdana", sans-serif;
text-transform: lowercase; }
.ljtags a {
color: #CECECE;
}
.ljtags a:hover {
color: #E0E0E0; }
ul.ljtaglist {
width: 575px;
background-color:#white;
padding: 5px;
padding-top:20px;
list-style:none;
margin:0;}
/* CURRENTS INFO ---------------- */
.currents {
display:none;
}
.currents strong {
font-weight: normal;
}
/* COMMENT LINKS ---------------- */
.comments {
background-image:url("");
padding:0px;
width: 640px;
text-align:right;
text-transform:uppercase;
color: #white;
}
div.comments a, div.comments a:link, div.comments a:visited {
width:570px;
text-align:center;
font: normal 11px "Courier New", sans-serif;
color: #545454;
padding-bottom:5px;
letter-spacing: 1px;
text-transform:uppercase;
padding:0;
}
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("");
background-color: #efefef;
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;}
LAYOUT DETAILS:
All sidebar content is disabled: sidebar links, calendar, page summary, free blurb, tags list, and sidebar userpic. Both layouts have userpics aligned to the left, at 50% size. Both are similar style-wise, and both should be easy to use/install.
( 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