Layout #2
Soo, second layout, this time a wide one. Still Smooth Sailing, still simple style.
INFO
- Style: S2 - Smooth Sailing
- For free, paid, plus accounts (works well when the ads are between entries.)
- Best viewed at 1024*768 or higher
- Was tested in Firefox and IE (it works better with Firefox)
INSTALLING THE LAYOUT
1. Go to LJ's customize page. Type 'Smooth Sailing' in the search box, hit enter, then apply one of the available themes with the 2 Column (sidebar on right) page setup. (screencap)
2. Go to the Theme customization page and choose these settings at Presentation:
- Userinfo Position in Entries: Left side of the entry text (this is important)
- Username position in entries: Below usericons
- Wrap entry text under userinfo: Yes (really important!)
- MetaData Position: Below entry text
- Entry Tags Position: With Metadata (mood, music)
- Linkbar Alignment in Entries: Align Right
- Linkbar Alignment in Comments: Align Right
3. Go to Custom CSS, and select the following:
- Use layout's stylesheet(s): No
- Use layout's stylesheet(s) when including custom external stylesheet: No
- Leave the Custom external stylesheet URL box blank.
- Copy + paste the code to the Custom stylesheet box. (screencap)
THE CODE
/*-----------------------------------------------
------- DO NOT REMOVE, PLEASE -------
- overrides by allwashedout @ lj.com -
- style: s2 smooth sailing -
- works with Firefox and IE -
- best viewed in 1024*768 or higher resolution -
-------------------------------------------------*/
/*----------------------------------
-------------- BASICS --------------
------------------------------------*/
body {
margin: 0 !important;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: #ebebeb;
color: #808080;
}
a {
color: #8bbce7;
text-decoration: none;
}
a:visited {
color: #;
}
a:hover {
color: #d59437;
text-decoration: none;
}
.pageblock{
}
blockquote {
margin: 5px 20px 5px 20px;
padding: 10px 10px 10px 30px;
background-color: #f5f5f5;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/Second/blckquotebg.jpg');
background-repeat: no-repeat;
background-position: top-left;
}
.bodyblock {
margin: 30px 30px 0 30px;
padding: 0px;
}
.bodyheaderblock {
border-top: 0px solid #ffffff;
background-color: transparent;
}
.bodynavblock {
text-align: center;
background-color: transparent;
margin-bottom: 10px;
margin-top: 20px;
}
.bodynavblock ul {
margin: 0px;
}
.bodynavblock li {
display: inline;
padding: 0px;
}
.bodynavblock a, .bodynavblock a:visited {
color: #949494 !important;
padding: 4px;
text-align: center;
font-weight: normal !important;
}
.bodynavblock a:hover {
display: display: inline;
color: #b0b0b0 !important;
}
.pagefooterblock, .body-title, .body-midtitle {
display: none;
}
/*-----------------------------------
--------------- HEADER --------------
------------------------------------*/
.pageheaderblock {
text-align: left;
padding: 28px 0 0 0;
margin: 0px;
border-bottom: 8px solid #282828;
background-color: #282828;
}
.header-title {
display: inline;
font-size: 19px;
padding: 0 0 0 40px;
font-family: "Arial", sans-serif;
font-weight: normal;
}
.header-subtitle {
display: inline;
font-size: 14px;
padding: 3px 0 3px 15px;
margin-left: 15px;
font-family: "Arial", sans-serif;
font-weight: normal;
border-left: 1px solid #848484;
}
.header-icon {
display: none;
}
.header-menu {
margin: 0px;
padding: 0px;
text-align: right;
background-color: transparent;
}
.header-menu ul {
padding: 7px 0 7px 0;
margin: 18px 0 0 0;
background-color: #282828;
border-top: 1px dashed #545454;
border-bottom: 1px dashed #545454;
}
.header-menu li {
display: inline;
background-color: transparent;
}
.header-menu a, .header-menu a:visited {
padding: 7px 17px 7px 17px;
color: #949494 !important;
text-decoration: none;
font-family: "Arial", sans-serif;
font-size: 14px;
font-weight: normal;
text-transform: lowercase;
border-left: 1px dashed #545454;
}
.header-menu a:hover {
color: #b0b0b0;
background-color: #383838;
}
/*-----------------------------------
-------------- SIDEBAR --------------
-------------------------------------*/
.sidebar {
width: 205px;
text-align: left;
color: #aaaaaa;
line-height: 16px;
font-size: 10px;
padding: 10px 0 10px 0;
margin-left: 30px;
background-color: #f3f3f3;
border: 1px solid #e6e6e6;
}
.sidebox {
position: relative;
padding: 5px 5px 10px 10px;
}
.sideboxTitle {
padding: 8px 0 3px 0;
color: #b2b2b2;
font-family: "Arial", sans-serif;
text-transform: lowercase;
font-weight: normal;
text-align: center;
font-size: 15px;
}
.sideboxContent {
text-align: left;
}
.sideboxContent a {
color: #8bbce7;
}
.sideboxContent a:hover {
color: #d59437;
}
.sidebox #profile {
text-align: center;
}
.sidebox #freetext {
text-align: justify;
padding: 0 5px 0 5px;
}
.sidebox #search {
}
.sidebox #search select, .sidebox #search input {
font-size: 11px;
background-color: #f0f0f0 !important;
color: #a8a8a8;
padding: 0;
margin: 0;
border: 1px solid #dedede;
letter-spacing: 0px;
}
.sidebox #tags_sidebox {
text-align: left;
display: inline;
}
.sidebox #systemlinks {
text-align: left;
display: inline;
}
.sidebox #latestmonth {
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: 2px;
}
.sidebox #latestmonth a {
font-weight: bold;
margin-bottom: 5px;
}
.profile-label {
display: none;
}
.profile-userpic {
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
padding: 6px;
background-color: #f3f3f3;
border: 1px solid #e6e6e6;
}
.profile-content {
}
.listitem, .listitem ul {
padding: 0;
margin: 0 5px 0 5px;
}
.listitem li {
display: block;
}
.listitem a {
padding: 3px 2px 3px 15px;
display: block;
text-transform: lowercase;
color: #8bbce7;
border-bottom: 1px solid #e9e9e9;
}
.listitem a:hover {
color: 8bbce7;
padding-left: 9px;
background-color: #eeeeee;
}
.listtitle {
color: #b2b2b2;
text-transform: uppercase;
font-size: 10px;
margin: 10px 0 3px 20px;
text-align: left;
letter-spacing: 3px;
}
.sidebox #latestmonth table{
padding: 0px;
margin-left: auto;
margin-right: auto;
}
.latestmonth-active {
padding: 2px;
background-color: #eeeeee;
border: 1px solid #eeeeee;
margin: 1px;
letter-spacing: 0px;
}
.latestmonth-active a {
color: #c2c2c2;
}
.latestmonth-active a:hover {
color: #d59437;
}
.latestmonth-inactive {
padding: 2px;
margin: 1px;
color: #aaaaaa;
letter-spacing: 0px;
}
/*-----------------------------------
-------------- ENTRIES --------------
-------------------------------------*/
.entryHolder {
color: #808080;
padding-top: 16px;
background-color: #fafafa;
margin-bottom: 30px;
border: 1px solid #e6e6e6;
}
.entryUserinfo {
position: relative;
margin-top: -30px;
text-align: center;
padding: 0 2px 0 5px;
background-color: transparent;
z-index: 10;
font-size: 10px;
}
.entryUserinfo a {
color: #8bbce7;
padding: 0 3px 3px 0;
}
.entryUserinfo a:hover {
color: #d59437;
}
.entryUserinfo-usericon img {
padding: 10px;
margin: 0 0 0px 10px;
background-color: #fafafa;
border: 1px solid #e8e8e8;
background-image: url('');
background-repeat: no-repeat;
background-position: top left;
}
.entryHeader {
padding: 0 0 3px 150px;
font-family: "Verdana", sans-serif;
font-weight: bold;
text-align: left;
border-bottom: 1px solid #e8e8e8;
}
.entryHeader a {
color: #8bbce7;
}
.entryHeader a:hover {
color: #d59437;
}
.entryHeaderDate {
font-family: "Arial", sans-serif;
font-size: 9px;
text-transform: lowercase;
letter-spacing: 1px;
color: #cccccc;
padding: 0 20px 3px 0;
text-align: left;
font-weight: normal;
}
.entryHeaderDate a {
color : #bfbfbf;
text-decoration : none;
}
.entryHeaderDate a:hover {
color : #bfbfbf;
text-decoration : none;
}
.entryHeaderSubject {
padding: 2px 20px 0 0;
font-family: "Arial", sans-serif;
color: #bfbfbf;
font-size: 16px;
text-transform: uppercase;
display: block;
}
.entryHeaderTags {
font-size: 9px;
font-weight: normal;
}
.entryText {
position: relative;
padding: 24px 20px 24px 150px;
line-height: 18px;
text-align: justify;
}
.entryText img {
max-width: ;
}
entryMetadata {
margin: 0 !important;
}
.entryMetadata ul {
margin: 0px;
padding: 0px;
border-top: 1px solid #e8e8e8;
}
.entryMetadata li {
font-size: 9px;
list-style: none;
display: block;
background-color: #f3f3f3;
padding: 2px 0 0 15px;
font-family: "Arial", sans-serif;
letter-spacing: 1px;
}
.entryMetadata a {
color: #d3aa32;
}
.entryMetadata a:hover {
color: #8bbce7;
}
.entryMetadata-label {
font-size: 9px;
font-family: "Trebuchet MS", sans-serif;
text-transform: lowercase;
font-weight: bold;
padding: 0 3px 0 0px;
color: #cfcfbb;
}
.entryLinkbar {
display: inline;
}
.entryLinkbar ul {
margin: 0px;
padding: 10px 0 10px 0;
text-align: right;
border-top: 1px solid #e8e8e8;
background-color: #f3f3f3;
}
.entryLinkbar li {
display: inline;
}
.entryLinkbar a {
font-family: "Verdana", sans-serif;
font-size: 10px;
font-weight: bold;
text-transform: lowercase;
padding: 10px;
color: #d3aa32;
border-left: 1px solid #e8e8e8;
}
.entryLinkbar a:hover {
color: #8bbce7;
}
/*-----------------------------------------
-------------- ARCHIVE PAGES --------------
-------------------------------------------*/
.yearlinks{
text-align: right;
}
.yearlink{
padding-left:4px;
padding-right: 4px;
}
.month {
border: 1px solid #e6e6e6;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
width: 500px;
}
.daysubjects {
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
border: 1px solid #e6e6e6;
background: #e6e6e6;
font-weight: bold;
}
.day-blank, .day {
border: 1px solid #e6e6e6;
}
.day-date {
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
}
.day-count a {
text-decoration: none;
color: #8bbce7;
}
.day-count a:hover {
color: #d59437;
}
/*----------------------------------
-------------- FOOTER --------------
------------------------------------*/
#footer-menu {
background-color: #282828;
border: 6px solid #282828;
margin-bottom: 20px;
}
#footer-menu ul {
list-style: none;
text-align: center;
padding: 10px 0 10px 0;
border: 1px dashed #787878;
}
.footer-menu li {
display: inline;
padding: 0px;
margin: 0px;
}
#footer-menu a, .footer-menu a:visited {
position: relative;
white-space: nowrap;
padding: 10px 17px 10px 17px;
text-align: center;
display: inline;
font-family: "Arial";
font-size: 14px;
font-weight: normal;
text-transform: lowercase;
}
/*-----------------------------------------
-------------- COMMENT PAGES --------------
------------------------------------------*/
.commentHolder {
color: #808080;
background-color: #fafafa;
font-family: "Verdana", sans-serif;
font-size: 11px;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #e6e6e6;
}
.commentUserinfo {
text-align: center;
margin: 0px 8px 8px 0px;
background-color: transparent;
}
.commentUserinfo a {
font-size: 10px;
color: #8bbce7;
}
.commentUserinfo a:hover {
color: #d59437;
}
.commentUserinfo-usericon img {
background-color: #fafafa !important;
padding: 6px;
margin: 3px;
border: 1px solid #e8e8e8;
}
.commentText {
padding: 6px;
text-align: justify;
line-height: 18px;
}
.commentHeader {
background-color: transparent;
color: #808080;
padding: 4px 0px 8px 8px;
}
.commentHeader a{
color: #808080;
}
.commentHeaderScreened {
font-family: ;
background-color: #cecece;
padding: 4px 0px 4px 8px;
}
.commentHeaderSubject {
font-weight: bold;
}
.commentLinkbar {
font-size: 10px;
text-transform: lowercase;
color: #808080;
text-align: right;
padding-top: 4px;
padding-bottom: 4px;
font-weight: bold;
}
.commentLinkbar ul {
margin: 0px;
padding: 0px;
}
.commentLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}
.replyform, #qrform {
background-color: #fafafa;
padding: 6px;
}
.replyform input, .replyform textarea, .replyform select, #qrform table, #qrform table input, #qrform table select, #qrform table textarea {
background-color: #fafafa;
padding: 1px;
border: 1px solid #e4e4e4 !important;
}
#qrform table #submitpost, #qrform table #submitmoreopts {
background-color: #ebebeb !important;
color: #808080;
font-size: 11px;
}
#commenttext{
width: 90%;
background-color: #fafafa;
}
/*--------------------------------------
-------------- TAGS PAGES --------------
----------------------------------------*/
.tagstable {
width: 500px;
margin-bottom: 20px;
text-align: left;
}
.tagstable td {
border-bottom: 1px solid #e8e8e8;
}
/*--------------------------------
-------------- MISC --------------
----------------------------------*/
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/Second/ljuser.gif');
padding: 13px 8px 1px 2px !important;
}
.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/Second/ljuser.gif') !important;
padding: 12px 9px 1x 2px !important;
}
.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/Second/ljcomm.gif') !important;
padding: 14px 12px 1px 2px !important;
}
div.ContextualPopup {
font: normal 11px "Verdana", sans-serif, !important;
}
div.ContextualPopup img {
border: 4px solid #e8e8e8;
}
div.ContextualPopup div.Inner {
background-color: #fafafa !important;
color: #808080 !important;
border: 1px solid #e8e8e8;
padding: 6px;
}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: underline !important;
font-weight: normal;
color: #8bbce7 !important;
}
div.ContextualPopup div.Inner a:hover {
color: #d59437 !important;
}
#lj_controlstrip {
z-index: 10 !important;
}
#lj_controlstrip table {
background-color: #282828 !important;
margin: 0;
padding: 0;
width: auto;
z-index: 2;
}
#lj_controlstrip td {
background-color: #282828 !important;
font-family: tahoma;
color: #808080;
border-bottom: 1px solid #313131 !important;
}
#lj_controlstrip a {
color: #727272 !important;
font-family: tahoma; font-size: 9px;
text-transform: lowercase;
}
#lj_controlstrip a:hover {
color: #b2b2b2 !important;
text-decoration: none;
}
#lj_controlstrip a img, #lj_controlstrip form {
padding: 0;
margin: 0;
border: 0;
background-repeat: no-repeat !important;
}
#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input {
font-family: tahoma;
font-size: 9px;
background-color: #484848 !important;
color: #808080;
padding: 0;
margin: 0;
border: 1px solid #5b5b5b;
}
#lj_controlstrip_userpic, #lj_controlstrip_userpic img {
width: 50px;
height: 50px;
}
#lj_controlstrip_statustext {
font-size: 9px;
color: #bababa !important;
font-weight: normal;
letter-spacing: 1px;
}
#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search {
border: 0;
}
/*------------------------------------*/
These are the images I used for the layout: blockquote background, lj user tiny icon, lj comm tiny icon. Please upload them to your own server.
RULES!
1. Credit me. Also, don't repost the codes as your own.
2. You can make as many changes as you want (but still credit me for the original code, please). If you want to change something but don't know how, I'll try to help, just ask.
3. Enjoy! :)