S2 Layout: Travellers in Time
New LJ layout featuring Nine, Ten, and Rose. Works for free or paid accounts.
I wanted to try a purely CSS layout for LiveJournal, so this is my first attempt. Very simple white design with a borderless header.
Style: Bloggish
Browsers supported: Firefox 2, IE 6 or 7, Opera 9, and others
Resolution: 800x600 or greater
Account levels: Free or paid users, but I didn't test on a Plus account.
|| click for live demo ||
Installation instructions (10 steps):
1. Upload these two pictures to your own server or Scrapbook account: HEADER and BULLET
2. Go to Journal > Customize Journal (http://www.livejournal.com/customize/)
3. Under "2. Select a new theme", search for "Bloggish".
4. Navigate through the results and find the theme called "Unstyled" (might be on page 2). Click "Apply Theme".
5. Under "3. Choose a Page Setup", click "2 Column (sidebar on left)".
6. Click the "Customize Selected Theme" button on the bottom right.
7. On the left menu, click "Custom CSS".
8. Change "Use layout's stylesheet(s)" to "No".
9. In the code below, change the addresses to point to the images you uploaded:
Change HEADER_IMAGE to http://addresstoyourheaderimage
Change BULLET_IMAGE to http://addresstoyourbulletimage
/* HEADER */
body { background: url('HEADER_IMAGE') no-repeat; }
/* BULLET */
.module li { list-style-image: url('BULLET_IMAGE'); }
/***********************************************/
/* Travellers in Time */
/* Based on Livejournal style S2 Bloggish */
/* Code and graphics by nisrin.livejournal.com */
/***********************************************/
* { margin: 0; padding: 0; }
body { background-color: #FFFFFF; text-align: center; font-family: verdana,tahoma,arial,sans-serif; color: #000000; }
#container { width: 100%; }
#container-inner { margin-top: 385px; }
#banner-inner { display: none; }
#banner-header { display: none; }
#pagebody { margin: 10px; }
#alpha, #beta { display: inline; position: relative; float: left; }
#alpha { width: 175px; text-align: left; font-size: 80%; padding-top: 100px; padding-left: 20px; }
.module { padding-bottom: 25px; }
.module-header { text-transform: uppercase; font-size: 100%; letter-spacing: .2em; padding-bottom: 5px; }
/* default icon */
.module-photo { display: none; }
/* links */
.module-viewlinks { font-weight: bold; text-align: center; margin-right: 40px; }
.module-viewlinks a { color: black; }
.module-viewlinks li { text-transform: lowercase; list-style-image: none; list-style-type: none; padding-bottom: 5px; }
/* calendar */
.module-calendar { margin-left: -10px; }
#beta { width: 540px; text-align: left; font-size: 80%; color: #404040; margin-left: 20px; }
.content-nav { padding-bottom: 10px;}
.date-header { text-transform: uppercase; letter-spacing: .2em; }
#beta-inner h2 { font-size: 100%; }
#beta-inner table { width: 60%; }
.entry { line-height: 1.5; }
.entry-userpic { float: left; padding: 10px 10px 10px 0; width: 100px; }
.entry-header { padding: 10px 0px; color: #2582A4; font-size: 150%; font-weight: normal; text-transform: uppercase; }
.entry-body li { margin-left: 40px; }
.metadata { padding-bottom: 20px; font-size: 80%; }
.ljtags { padding-top: 10px; text-align: right; width: 100%; text-transform: lowercase; font-size: 80%; }
.entry-footer, .comment-footer { font-size: 80%; border-top: 1px dashed black; border-bottom: 1px dashed black; margin-top: 20px; padding: 5px 0px; margin-bottom: 30px; text-transform: uppercase; clear: left; }
.entry-footer a { color: #000000; }
/* Friends Page */
.poster { font-size: 75%; text-align: center; }
/* Calendar Page */
.skiplinks { text-align: center; padding-bottom: 25px; }
/* Comments */
.comment-userpic { float: left; padding: 0 10px 10px 0; width: 100px; }
.comment-content { display: inline; padding: 10px; }
.comment-replies { margin-left: 20px; }
.comments-header { text-transform: uppercase; text-align: left; margin-bottom: 25px; padding: 5px; border-bottom: 1px dashed black; }
a { color: #87A019; text-decoration: none; }
a:hover { text-decoration: underline; }
li { padding: 2px 0; }
h1 { font-size: 100%; }
h2 { font-size: 80%; }
blockquote { font-size: 80%; margin-left: 20px; margin-top: 10px; margin-bottom: 10px; border-left: 3px solid #2582A4; padding: 10px; }
table { text-align: center; }
td { padding: 3px 1px; }
10. Copy and paste the code above into the "Custom stylesheet" box and click the "Save Changes" button.
Done!
If you have any questions or find I've missed something, let me know in the comments. Credit is appreciated but not required. I only ask that you don't offer this layout for download elsewhere. Enjoy!
ETA: If you use the Navigation Strip on your journal, it will cover the top of the image and push the text down slightly. Just a FYI. The Navigation Strip can be turned on and off in the style customization.
ETA2: If you're using a Plus account, you may have ads covering Nine and Rose. To change this, go the Customize page and change your ad placement settings from "Horizontal" to "Vertical". That will put the ads in the sidebar instead.
I wanted to try a purely CSS layout for LiveJournal, so this is my first attempt. Very simple white design with a borderless header.
Style: Bloggish
Browsers supported: Firefox 2, IE 6 or 7, Opera 9, and others
Resolution: 800x600 or greater
Account levels: Free or paid users, but I didn't test on a Plus account.
|| click for live demo ||
Installation instructions (10 steps):
1. Upload these two pictures to your own server or Scrapbook account: HEADER and BULLET
2. Go to Journal > Customize Journal (http://www.livejournal.com/customize/)
3. Under "2. Select a new theme", search for "Bloggish".
4. Navigate through the results and find the theme called "Unstyled" (might be on page 2). Click "Apply Theme".
5. Under "3. Choose a Page Setup", click "2 Column (sidebar on left)".
6. Click the "Customize Selected Theme" button on the bottom right.
7. On the left menu, click "Custom CSS".
8. Change "Use layout's stylesheet(s)" to "No".
9. In the code below, change the addresses to point to the images you uploaded:
Change HEADER_IMAGE to http://addresstoyourheaderimage
Change BULLET_IMAGE to http://addresstoyourbulletimage
/* HEADER */
body { background: url('HEADER_IMAGE') no-repeat; }
/* BULLET */
.module li { list-style-image: url('BULLET_IMAGE'); }
/***********************************************/
/* Travellers in Time */
/* Based on Livejournal style S2 Bloggish */
/* Code and graphics by nisrin.livejournal.com */
/***********************************************/
* { margin: 0; padding: 0; }
body { background-color: #FFFFFF; text-align: center; font-family: verdana,tahoma,arial,sans-serif; color: #000000; }
#container { width: 100%; }
#container-inner { margin-top: 385px; }
#banner-inner { display: none; }
#banner-header { display: none; }
#pagebody { margin: 10px; }
#alpha, #beta { display: inline; position: relative; float: left; }
#alpha { width: 175px; text-align: left; font-size: 80%; padding-top: 100px; padding-left: 20px; }
.module { padding-bottom: 25px; }
.module-header { text-transform: uppercase; font-size: 100%; letter-spacing: .2em; padding-bottom: 5px; }
/* default icon */
.module-photo { display: none; }
/* links */
.module-viewlinks { font-weight: bold; text-align: center; margin-right: 40px; }
.module-viewlinks a { color: black; }
.module-viewlinks li { text-transform: lowercase; list-style-image: none; list-style-type: none; padding-bottom: 5px; }
/* calendar */
.module-calendar { margin-left: -10px; }
#beta { width: 540px; text-align: left; font-size: 80%; color: #404040; margin-left: 20px; }
.content-nav { padding-bottom: 10px;}
.date-header { text-transform: uppercase; letter-spacing: .2em; }
#beta-inner h2 { font-size: 100%; }
#beta-inner table { width: 60%; }
.entry { line-height: 1.5; }
.entry-userpic { float: left; padding: 10px 10px 10px 0; width: 100px; }
.entry-header { padding: 10px 0px; color: #2582A4; font-size: 150%; font-weight: normal; text-transform: uppercase; }
.entry-body li { margin-left: 40px; }
.metadata { padding-bottom: 20px; font-size: 80%; }
.ljtags { padding-top: 10px; text-align: right; width: 100%; text-transform: lowercase; font-size: 80%; }
.entry-footer, .comment-footer { font-size: 80%; border-top: 1px dashed black; border-bottom: 1px dashed black; margin-top: 20px; padding: 5px 0px; margin-bottom: 30px; text-transform: uppercase; clear: left; }
.entry-footer a { color: #000000; }
/* Friends Page */
.poster { font-size: 75%; text-align: center; }
/* Calendar Page */
.skiplinks { text-align: center; padding-bottom: 25px; }
/* Comments */
.comment-userpic { float: left; padding: 0 10px 10px 0; width: 100px; }
.comment-content { display: inline; padding: 10px; }
.comment-replies { margin-left: 20px; }
.comments-header { text-transform: uppercase; text-align: left; margin-bottom: 25px; padding: 5px; border-bottom: 1px dashed black; }
a { color: #87A019; text-decoration: none; }
a:hover { text-decoration: underline; }
li { padding: 2px 0; }
h1 { font-size: 100%; }
h2 { font-size: 80%; }
blockquote { font-size: 80%; margin-left: 20px; margin-top: 10px; margin-bottom: 10px; border-left: 3px solid #2582A4; padding: 10px; }
table { text-align: center; }
td { padding: 3px 1px; }
10. Copy and paste the code above into the "Custom stylesheet" box and click the "Save Changes" button.
Done!
If you have any questions or find I've missed something, let me know in the comments. Credit is appreciated but not required. I only ask that you don't offer this layout for download elsewhere. Enjoy!
ETA: If you use the Navigation Strip on your journal, it will cover the top of the image and push the text down slightly. Just a FYI. The Navigation Strip can be turned on and off in the style customization.
ETA2: If you're using a Plus account, you may have ads covering Nine and Rose. To change this, go the Customize page and change your ad placement settings from "Horizontal" to "Vertical". That will put the ads in the sidebar instead.