I've been working on quite a few layouts, but I didn't like any of them enough to post until now. I like my layouts simple, so this one is right up my alley. Very basic colors and concepts, but I really like how the composition turned out. Anyway, without further ado, I give you Black, White & Red All Over.
Style: S2 Flexible Squares
Looks best in: All Browsers (tested in Firefox, Opera & IE)
Works with: Basic, Paid & Sponsored (looks odd with ads, though)
Live Preview:
s2blackwhitered Code & Instructions
Instructions to Use
Don't forget to please credit
tomorrow_brings in your userinfo if using this layout.
The following descriptions are for the new customize journal page. I tried to make it as easy to follow as possible, but I'm not quite used to it yet.
1) Go to the
CUSTOMIZE page.
2) Make sure you have "S2" selected.
3) In the Search bar on the first page, type "Flexible Squares". Find "Blue Gray" (should be third one) and select "Apply".
4) On the very bottom of the page, under "Choose a Page Setup", select "2 Column (sidebar on left)".
5) In top right, under "Name's Current Theme" click "Customize Your Theme".
6) Next go to "Custom CSS". Make sure that all drop-down options are set to "No".
7) Copy the codes from the textarea below and paste them into the box. Hit save and voila!
Stylesheet Code
/*---------------------------------------------------
Layout: Black, White & Red All Over
Stylesheet Created By: Amy of Tomorrow Brings (
http://community.livejournal.com/tomorrow_brings)
Style: S2 Flexible Squares
Works best with: Free & Paid accounts
Browsers: Firefox, Opera and IE
-----------------------------------------------------*/
body {
background-color: #000000;
background-image: url();
background-repeat: repeat;
text-align: center;
color: #000000;
font-family: "Trebuchet MS", sans-serif;
font-size: 7.5pt;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #CC1100;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
p, td, blockquote {
font-size: 7.5pt;
}
code, kbd, pre, tt {
font-family: monospace;
}
blockquote {
margin: 10px 20px;
padding: 10px;
color: #000000;
line-height: 16px;
font-size: 7.5pt;
font-family: Trebuchet MS;
border: 1px dotted #000000;
background-color: #f1f1f1;
text-align: left;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 799px;
margin-left: auto; margin-right: auto;
background-color: #000000;
border-width: 0px;
border-style: solid;
border-color:#ffffff;
padding: 0px;
}
#maincontent {
margin-top: 0px;
padding-left: 10px;
font-family: "Trebuchet MS", sans-serif;
font-size: 7.5pt;
background-color: #ffffff;
color: #000000;
border-style: solid;
border-color:#ffffff;
border-width: 1px;
margin-left: 215px;
text-align: justify;
}
#sidebar {
padding-right: 10px;
padding-top: 10px;
margin-top: 0px;
background-color: #000000;
border-color:#000000;
border-width: 1px;
border-style: solid;
font-size: 7.5pt;
font-family: "Trebuchet MS", sans-serif;
color: #FFFFFF;
width: 200px;
float: left;
text-align: justify;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 798px;
padding: 10px 0px 40px 0px;
margin: 0px;
text-align: center;
text-transform: uppercase;
font-family: "Trebuchet MS", sans-serif;
font-size: 11px;
letter-spacing: 2px;
border-style: solid;
border-color:#ffffff;
border-width: 0px;
background-color: #000000;
color: #c4c4c4;
}
.headerimage {
position: relative;
width: 800px;
height: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("");
background-repeat: no-repeat;
}
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer
a:visited {
color: #CC1100;
}
div#header a:hover, div#footer a:hover {
color: #FF0000;
text-decoration: none;
}
.title, .subtitle {
display: none;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 0px 0 0px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent { min-height: 130px; }
.entry {
margin: 0px 10px 10px 10px;
padding: 10px;
background-color: #ffffff;
color: #000000;
font-family: "Trebuchet MS", sans-serif;
font-size: 7.5pt;
text-align: justify;
border-width: 1px;
border-color: #ffffff;
border-style: solid;
}
.userpic {
position: relative;
float: right;
background-color: #ffffff;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 5px;
border-color: #000000;
border-style: solid;
}
.subject {
border-bottom: 0px solid #f4f4f4;
padding: 0px;
color: #000000;
font-family: "times new roman", sans-serif;
font-size: 14pt;
}
.subject a, .subject a:link, .subject a:visited {
color: #ffffff;
}
.subject a:hover {
color: #b0b9c8;
}
.date {
line-height: 150%;
text-transform: uppercase;
top: 5px;
color: #c4c4c4;
font-family: "Trebuchet MS", sans-serif;
font-size: 10px;
}
.datesubject {
background-color: #ffffff;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.ljtags {
margin: 15px 0px 0px 0px;
background-color: #ffffff;
width: 530px;
padding: 10px;
color: #CC1100;
font-size: 7.5pt;
border: 0px;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents, .currentmood, .currentmusic {
font-family: "Trebuchet MS", sans-serif;
font-size: 7.5pt;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "Trebuchet MS", sans-serif;
text-transform: uppercase;
font-size: 7.5pt;
text-align: left;
background-color: #ffffff;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #CC1100;
}
div.comments a:hover {
color: #FF0000;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 20px;
width: 470px;
border-bottom: 1px dashed #f4f4f4;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-top: 10px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
float: right;
background-color: #ffffff;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 5px;
border-color: #000000;
border-style: solid;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #CC1100;
}
div#sidebar a:hover {
color: #FF0000;
text-decoration: none;
}
#sidebar_tags span a {font-size: 7.5pt}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #ffffff;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Trebuchet MS", sans-serif;
font-size: 7.5pt;
}
.sbarcalendarposts {
border-color: #ffffff;
border-width: 1px;
border-style: solid;
background-color: #ffffff;
text-align: center;
font-family: "Trebuchet MS", sans-serif;
font-size: 7.5pt;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
padding-left: 0px;
list-style: none;
border-width: 0px;
border-color: #ffffff;
background-color: #000000;
margin-bottom: 10px;
margin-top: 10px;
border-bottom: 1px dotted #FFFFFF;
color: #FFFFFF;
font-family: "times new roman", sans-serif;
font-size: 14pt;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "Trebuchet MS", sans-serif;
font-size: 7.5pt;
font-weight: bold;
letter-spacing: 1px;
background-color: #000000;
color: #FFFFFF;
border-color:#000000;
border-width: 0px;
border-style: solid;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color:#ffffff;
}
table.yeartable td.yearday {
background-color: #ffffff;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #ffffff;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #ffffff;
background-color: #ffffff;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 1px;
border-color: #ffffff;
border-style: solid;
}
.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color:#CC1100;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #ffffff;
color: #c4c4c4;
}
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: 7.5pt;
line-height: 125%;
background-color: #ffffff;
color: #c4c4c4;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 7.5pt;
font-family: "Trebuchet MS", sans-serif;
color: #c4c4c4;
}
.commentbox {
border-color:#CC1100;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #CC1100;
}
.datesubjectcomment a:hover {
color: #b0b9c8;
}
.commentboxpartial {
border-color: #ffffff;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.commentinfo {
background-color: #ffffff;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(
http://img259.imageshack.us/img259/7518/stopsy8.gif); padding: 10px 0px 1px 10px;
}
.ljuser A:link, A:visited, A:active {
color: #CC1100;
text-decoration: none;
font-weight: bold;
}
.ljuser A:hover {
color: #FF0000;
text-decoration: none;
font-weight: bold;
}
Images Used
X Lj-User Icon (created by
damnicons).
And that should be all! I hope everyone loves the layout, PLEASE comment and let me know. Thanks!