Because I Can Actually Make Decent Layouts Now
1 Garden State layout
5 Garden State icons (matching the layout)
6 graphics in total.
Account Types: Free and paid!
Style: Flexible Squares (S2)
Website: Not necessary
Custom Colors: Included in the stylesheet
Default Icon: Only if you choose to have one
Best view: 800x600 is best, 1024x768 should be fine... on anything higher than that, though, the layout will probably look tiny.
Browser(s) Compatible: Internet Explorer and Firefox, and it should work in others, too.
Preview:
You can also see a live preview of the layout at single_frames for a limited time.
Rules:
+ Credit is always nice, just so people know where to get the layout if they're interested.
+ Please upload the images used in the layout to your own server. I pay for my Photobucket bandwidth. Please upload the stylesheet to your own server as well.
+ Do not imply or state outright that you created the layout.
+ Customization is okay, provided that you don't claim the codes as your own. If you create a new header image or whatever, don't repost this for other people to use without crediting me for the codes.
Set-Up Instructions (Very Beginner-Friendly :P):
1. Upload the layout images (found below) to your own server.
2. Copy the stylesheet (also found below) into a new Notepad - or similar text editing program - document. Use Find (Ctrl + F) and search for "YOUR URL HERE" (without the quotes, obviously). Replace the first "YOUR URL HERE" with the URL of the page background. Replace the second with the sidebar image, and replace the third with the URL of the header.
3. Save the stylesheet and upload it to your server. If you don't have a place to upload .txt files, I recommend Geocities - it's free!
4. Go to the LJ customize page.
a) Under the "Basics" tab, make sure you're using S2.
b) Under the "Look and Feel" tab, select "Flexible Squares" for Layout & Language and hit change.
5. Go to the Custom Options tab.
6. Under Category: Custom CSS, change "Include customizations through external stylesheet" to yes if you haven't already. For "External stylesheet URL", enter the URL where you uploaded the stylesheet.
7. Now click the Category: Sidebar. **IMPORTANT** The navigation of this layout depends entirely on your S2 Links List. At this point, I would recommend opening a new window in your browser. In the new window, go to the Links List page. Enter any links you'd like (Recent Entries, User Info, Friends, etc.) here. Save your Links List. Now go back to your first browser window. Where it says "Title of the links sidebar box", enter what you want the title of your Links List to be ("Navigation", etc.).
8. After you've done that, you can play around with what you want the first, second, third, and fourth boxes in your sidebar to be. Because of the nature of the sidebar in this layout, I'd recommend not having your calendar show at all, but it won't majorly screw up the layout or anything if you have it enabled.
9. Save, save, save.
10. a) Comment here and yell at me if you have any questions, or b) go admire your pretty layout!
Images:
+ Page background
+ Header
+ Sidebar
Stylesheet:
body {
background: url(YOUR URL HERE) #F2F1F2;
text-align: center;
color: #213454;
font-family: "Verdana", sans-serif;
font-size: 7pt;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #CEC4CF;
text-decoration: none;
}
a:hover {
color: #EC4A7B;
text-decoration: none;
background: #CEC4CF;
cursor: help;
}
p, td, blockquote {
font-family: "Courier New", sans-serif;
font-size: 8pt;
}
code, kbd, pre, tt {
font-family: monospace;
}
#content
{
width: 506px;
margin-left: auto; margin-right: auto;
padding: 15px;
background-color: #F2F1F2;
}
#maincontent {
margin-top: 0px;
font-family: "Verdana", sans-serif;
font-size: 7pt;
background: #F2F1F2;
color: #213454;
margin-left: 150px;
text-align: left;
}
#sidebar {
padding-top: 15px;
padding-left: 6px;
padding-right: 18px;
margin-top: 0px;
background-color: #F2F1F2;
font-size: 7pt;
font-family: "Verdana", sans-serif;
color: #213454;
width: 150px;
float: left;
text-align: center;
background: url(YOUR URL HERE) repeat-y #F2F1F2;
}
#header {
width: 506px;
height: 210px;
padding: 0px;
margin: 0px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 7pt;
font-weight: bold;
letter-spacing: 2px;
background-color: #F2F1F2;
color: #213454;
background: url(YOUR URL HERE) top center no-repeat transparent;
}
#footer {
width: 100%;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 7pt;
font-weight: bold;
letter-spacing: 1px;
background-color: #F2F1F2;
color: #213454;
z-index: 100;
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: #CEC4CF;
}
div#header a:hover, div#footer a:hover {
color: #EC4A7B;
background: #CEC4CF;
text-decoration: none;
}
ul.navheader
{
display: none;
padding: 200px 75px 0px 0px;
margin: 0px 75px 0px 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
.title {
display: none;
font-family: "Verdana", sans-serif;
font-size: 10pt;
font-weight: normal;
line-height: 200%;
top: 10px;
}
.subtitle{
display: none;
font-family: "Verdana", sans-serif;
font-size: 8pt;
font-weight: normal;
top: 10px;
}
/* sidebar */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #213454;
}
div#sidebar a:hover {
color: #213454;
background: #CEC4CF;
text-decoration: none;
}
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
padding-left: 6px;
padding-right: 18px;
}
.sbarcalendar {
border-color: #213454;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 7pt;
}
.sbarcalendarposts {
border-color: #EC4A7B;
border-width: 1px;
border-style: solid;
background-color: #F2F1F2;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 7pt;
}
ul.sbarlist
{
padding-left: 18px;
padding-right: 18px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
color: #EC4A7B;
padding-left: 18px;
padding-right: 18px;
border-bottom: 1px dashed #CEC4CF;
list-style: none;
margin-bottom: 10px;
margin-top: 10px;
font-weight: bold;
font-size: 10pt;
}
/* maincontent */
.subcontent {
}
.entry {
margin: 0px 10px 10px 10px;
padding: 0px;
background-color: #F2F1F2;
color: #213454;
font-family: "Verdana", sans-serif;
font-size: 7pt;
text-align: left;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.userpic {
position: relative;
float: right;
background: transparent;
padding: 5px;
margin: 10px;
z-index: 15;
}
.userpicfriends {
position: relative;
float: right;
padding: 5px;
margin: 10px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 7pt;
z-index: 15;
}
.date {
background-color: #f2f1f2;
line-height: 200%;
top: 5px;
color: #CEC4CF;
font-family: "Verdana", sans-serif;
font-size: 8pt;
text-align: right;
}
.subject {
background-color: #f2f1f2;
font-weight: bold;
padding: 0px;
color: #213454;
font-family: "Verdana", sans-serif;
font-size: 10pt;
text-align: center;
letter-spacing: 3px;
border-bottom: #A39894 dashed 1px;
}
.subject a, .subject a:link, .subject a:visited {
color: #CEC4CF;
}
.subject a:hover {
background: #CEC4CF;
color: #EC4A7B;
}
.datesubject {
background: #f2f1f2;
padding: 5px;
}
.currents, .currentmood, .currentmusic {
font-family: "Verdana", sans-serif;
font-size: 7pt;
}
.comments {
font-family: "Verdana", sans-serif;
font-size: 7pt;
font-weight: bold;
text-align: right;
background-color: #f2f1f2;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #CEC4CF;
}
div.comments a:hover {
color: #EC4A7B;
background: #CEC4CF;
text-decoration: none;
}
/* maincontent -- entry, reply pages */
.datesubjectcomment {
background-color: #f2f1f2;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #CEC4CF;
background-color: #f2f1f2;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}
.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #CEC4CF;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #f2f1f2;
color: #213454;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 7pt;
line-height: 125%;
background-color: #f2f1f2;
color: #213454;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 7pt;
font-family: "Verdana", sans-serif;
color: #213454;
}
.commentbox {
border-color: #f2f1f2;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #f2f1f2;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #CEC4CF;
}
.datesubjectcomment a:hover {
color: #EC4A7B;
background: #CEC4CF;
}
.commentboxpartial {
border-color: #f2f1f2;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #f2f1f2;
}
.commentinfo {
background-color: #f2f1f2;
margin-top: 10px;
width: 100%;
}
/* maincontent -- year/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: #f2f1f2;
}
table.yeartable td.yearday {
background-color: #f2f1f2;
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;
}
.headerimage {
/* for formatting header image */
}
.separator{
/* for formatting separators between entries */
height: 35px;
}
div.ljtags {
margin: 13px 0px 0px 30px;
font-weight: bold;
}
Matching Icons:
1.
2.
3.
4.
5.
Edit #1: Revised steps 5, 6, and 7 to work with LJ's new S2 customization area, which conveniently went live a few minutes after I originally posted this.
Edit #2: Fixed a bug in the stylesheet - sidebar titles should be more or less centered now. :)
5 Garden State icons (matching the layout)
6 graphics in total.
Account Types: Free and paid!
Style: Flexible Squares (S2)
Website: Not necessary
Custom Colors: Included in the stylesheet
Default Icon: Only if you choose to have one
Best view: 800x600 is best, 1024x768 should be fine... on anything higher than that, though, the layout will probably look tiny.
Browser(s) Compatible: Internet Explorer and Firefox, and it should work in others, too.
Preview:
You can also see a live preview of the layout at single_frames for a limited time.
Rules:
+ Credit is always nice, just so people know where to get the layout if they're interested.
+ Please upload the images used in the layout to your own server. I pay for my Photobucket bandwidth. Please upload the stylesheet to your own server as well.
+ Do not imply or state outright that you created the layout.
+ Customization is okay, provided that you don't claim the codes as your own. If you create a new header image or whatever, don't repost this for other people to use without crediting me for the codes.
Set-Up Instructions (Very Beginner-Friendly :P):
1. Upload the layout images (found below) to your own server.
2. Copy the stylesheet (also found below) into a new Notepad - or similar text editing program - document. Use Find (Ctrl + F) and search for "YOUR URL HERE" (without the quotes, obviously). Replace the first "YOUR URL HERE" with the URL of the page background. Replace the second with the sidebar image, and replace the third with the URL of the header.
3. Save the stylesheet and upload it to your server. If you don't have a place to upload .txt files, I recommend Geocities - it's free!
4. Go to the LJ customize page.
a) Under the "Basics" tab, make sure you're using S2.
b) Under the "Look and Feel" tab, select "Flexible Squares" for Layout & Language and hit change.
5. Go to the Custom Options tab.
6. Under Category: Custom CSS, change "Include customizations through external stylesheet" to yes if you haven't already. For "External stylesheet URL", enter the URL where you uploaded the stylesheet.
7. Now click the Category: Sidebar. **IMPORTANT** The navigation of this layout depends entirely on your S2 Links List. At this point, I would recommend opening a new window in your browser. In the new window, go to the Links List page. Enter any links you'd like (Recent Entries, User Info, Friends, etc.) here. Save your Links List. Now go back to your first browser window. Where it says "Title of the links sidebar box", enter what you want the title of your Links List to be ("Navigation", etc.).
8. After you've done that, you can play around with what you want the first, second, third, and fourth boxes in your sidebar to be. Because of the nature of the sidebar in this layout, I'd recommend not having your calendar show at all, but it won't majorly screw up the layout or anything if you have it enabled.
9. Save, save, save.
10. a) Comment here and yell at me if you have any questions, or b) go admire your pretty layout!
Images:
+ Page background
+ Header
+ Sidebar
Stylesheet:
body {
background: url(YOUR URL HERE) #F2F1F2;
text-align: center;
color: #213454;
font-family: "Verdana", sans-serif;
font-size: 7pt;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #CEC4CF;
text-decoration: none;
}
a:hover {
color: #EC4A7B;
text-decoration: none;
background: #CEC4CF;
cursor: help;
}
p, td, blockquote {
font-family: "Courier New", sans-serif;
font-size: 8pt;
}
code, kbd, pre, tt {
font-family: monospace;
}
#content
{
width: 506px;
margin-left: auto; margin-right: auto;
padding: 15px;
background-color: #F2F1F2;
}
#maincontent {
margin-top: 0px;
font-family: "Verdana", sans-serif;
font-size: 7pt;
background: #F2F1F2;
color: #213454;
margin-left: 150px;
text-align: left;
}
#sidebar {
padding-top: 15px;
padding-left: 6px;
padding-right: 18px;
margin-top: 0px;
background-color: #F2F1F2;
font-size: 7pt;
font-family: "Verdana", sans-serif;
color: #213454;
width: 150px;
float: left;
text-align: center;
background: url(YOUR URL HERE) repeat-y #F2F1F2;
}
#header {
width: 506px;
height: 210px;
padding: 0px;
margin: 0px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 7pt;
font-weight: bold;
letter-spacing: 2px;
background-color: #F2F1F2;
color: #213454;
background: url(YOUR URL HERE) top center no-repeat transparent;
}
#footer {
width: 100%;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 7pt;
font-weight: bold;
letter-spacing: 1px;
background-color: #F2F1F2;
color: #213454;
z-index: 100;
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: #CEC4CF;
}
div#header a:hover, div#footer a:hover {
color: #EC4A7B;
background: #CEC4CF;
text-decoration: none;
}
ul.navheader
{
display: none;
padding: 200px 75px 0px 0px;
margin: 0px 75px 0px 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
.title {
display: none;
font-family: "Verdana", sans-serif;
font-size: 10pt;
font-weight: normal;
line-height: 200%;
top: 10px;
}
.subtitle{
display: none;
font-family: "Verdana", sans-serif;
font-size: 8pt;
font-weight: normal;
top: 10px;
}
/* sidebar */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #213454;
}
div#sidebar a:hover {
color: #213454;
background: #CEC4CF;
text-decoration: none;
}
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
padding-left: 6px;
padding-right: 18px;
}
.sbarcalendar {
border-color: #213454;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 7pt;
}
.sbarcalendarposts {
border-color: #EC4A7B;
border-width: 1px;
border-style: solid;
background-color: #F2F1F2;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 7pt;
}
ul.sbarlist
{
padding-left: 18px;
padding-right: 18px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
color: #EC4A7B;
padding-left: 18px;
padding-right: 18px;
border-bottom: 1px dashed #CEC4CF;
list-style: none;
margin-bottom: 10px;
margin-top: 10px;
font-weight: bold;
font-size: 10pt;
}
/* maincontent */
.subcontent {
}
.entry {
margin: 0px 10px 10px 10px;
padding: 0px;
background-color: #F2F1F2;
color: #213454;
font-family: "Verdana", sans-serif;
font-size: 7pt;
text-align: left;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.userpic {
position: relative;
float: right;
background: transparent;
padding: 5px;
margin: 10px;
z-index: 15;
}
.userpicfriends {
position: relative;
float: right;
padding: 5px;
margin: 10px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 7pt;
z-index: 15;
}
.date {
background-color: #f2f1f2;
line-height: 200%;
top: 5px;
color: #CEC4CF;
font-family: "Verdana", sans-serif;
font-size: 8pt;
text-align: right;
}
.subject {
background-color: #f2f1f2;
font-weight: bold;
padding: 0px;
color: #213454;
font-family: "Verdana", sans-serif;
font-size: 10pt;
text-align: center;
letter-spacing: 3px;
border-bottom: #A39894 dashed 1px;
}
.subject a, .subject a:link, .subject a:visited {
color: #CEC4CF;
}
.subject a:hover {
background: #CEC4CF;
color: #EC4A7B;
}
.datesubject {
background: #f2f1f2;
padding: 5px;
}
.currents, .currentmood, .currentmusic {
font-family: "Verdana", sans-serif;
font-size: 7pt;
}
.comments {
font-family: "Verdana", sans-serif;
font-size: 7pt;
font-weight: bold;
text-align: right;
background-color: #f2f1f2;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #CEC4CF;
}
div.comments a:hover {
color: #EC4A7B;
background: #CEC4CF;
text-decoration: none;
}
/* maincontent -- entry, reply pages */
.datesubjectcomment {
background-color: #f2f1f2;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #CEC4CF;
background-color: #f2f1f2;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}
.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #CEC4CF;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #f2f1f2;
color: #213454;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 7pt;
line-height: 125%;
background-color: #f2f1f2;
color: #213454;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 7pt;
font-family: "Verdana", sans-serif;
color: #213454;
}
.commentbox {
border-color: #f2f1f2;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #f2f1f2;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #CEC4CF;
}
.datesubjectcomment a:hover {
color: #EC4A7B;
background: #CEC4CF;
}
.commentboxpartial {
border-color: #f2f1f2;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #f2f1f2;
}
.commentinfo {
background-color: #f2f1f2;
margin-top: 10px;
width: 100%;
}
/* maincontent -- year/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: #f2f1f2;
}
table.yeartable td.yearday {
background-color: #f2f1f2;
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;
}
.headerimage {
/* for formatting header image */
}
.separator{
/* for formatting separators between entries */
height: 35px;
}
div.ljtags {
margin: 13px 0px 0px 30px;
font-weight: bold;
}
Matching Icons:
1.
2.
3.
4.
5.
Edit #1: Revised steps 5, 6, and 7 to work with LJ's new S2 customization area, which conveniently went live a few minutes after I originally posted this.
Edit #2: Fixed a bug in the stylesheet - sidebar titles should be more or less centered now. :)