Live Preview here!I've been saving this post for about a year now :P i think its time to share
Instructions:
1) You need to be in S2 to do this, so if you don't have it.. then switch from S1 to S2.
2) Go under "Journal" and click "Customize Journal Style"
3) Under your "Current Theme" (Which is located to the right), Click "Select Different Theme"
4) Search "Smooth Sailing". Once you've found it, select, and set it as your theme.
5) Then go back to "Select Different Theme" and scroll down to the bottom where it says "Choose Page Setup"
6) Make your ad-placement horizontal.
7) Make it 2 Column (sidebar on left).
8) Scroll back up to "Customize your theme", under "Current theme" on the right side of the page.
9) Click "Customize your theme"
10) Click "Custom CSS"
11) Make all the drop-down menu's say "No" above the CSS box.
12) Then paste the code below...
body {
background: #fff url() repeat-x left top;
color:#999;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
font-size:60%;
line-height:1.5;
margin:0;
padding:0;
}
u {
color : #04b5ff;
border-bottom : 1px dotted #c6f407;
text-decoration : none;
}
b {
color : #fe4aa9;
text-decoration : none;
}
b:hover {
color : #c6f407;
text-decoration : none;
}
i {
color : #c6f407;
text-decoration : none;
}
strong {
color : #363636;
text-decoration : none;
}
em {
color : #a8a8a8;
text-decoration : none;
}
.pageblock{
width: 903px;
margin: 0px auto;
}
.pagefooterblock {
margin: 0 auto 0 auto;
text-align: right;
border-top: solid 1px #e5e5e5;
padding: 20px 0 20px 0;
width: 100%;
}
.pageheaderblock {
text-align: center;
}
a, a:visited {
font-weight: bold;
color: #00C6FF;
text-decoration : none;
}
a:hover{
color:#fe4aa9;
}
.header-title {
background-color: #464646;
background-repeat: no-repeat;
background-position: center ;
font-family: Tahoma;
font-size: 0px;
color: #fe4aa9;
padding: 0px 20px 0px 20px;
display: none;
}
.header-subtitle {
background-color: #fff;
color: transparent;
font-family: Tahoma;
font-size: 0px;
padding: 0px 24px 0px 24px;
display: none;
}
.header-icon {
top: 0px;
right: 0px;
position: absolute;
z-index: 1;
border-left: 2px solid #323232;
border-bottom: 2px solid #323232;
display: none;
}
.header-menu {
text-align: left;
background: #fff;
background-image: url
font-family: Trebuchet MS;
font-weight: bold;
font-size: 8px;
height: -05px;
}
.header-menu a, .header-menu a:visited {
padding: 8px 10px 8px 10px;
height: px;
color: #ccc;
background: transparent !important;
font: bold 9px Trebuchet MS;
text-decoration: none;
text-transform: uppercase;
}
.header-menu a:hover {
background: transparent !important;
color: #00C6FF;
}
.header-menu ul, #footer-menu ul {
margin: 0;
list-style: none;
padding: 10px 2px 2px 10px;
}
.header-menu li, #footer-menu li {
display: inline;
color: #999;
}
#footer-menu ul{
padding: 5px !important;
}
#footer-menu {
font-size: 10px;
}
#footer-menu a, .footer-menu a:visited {
padding: 1px 10px 1px 10px;
color: orange;
white-space: nowrap;
}
.bodyblock {
padding: 10px;
background-color: transparent !important;
}
.bodyheaderblock {
background-color: #fff;
padding: 2px 0px 2px 0px;
}
.bodynavblock {
border-top: 2px solid #fff;
background-color: #fff;
color: #999;
margin: 5px 0px 5px 0px;
padding: 1px;
}
.bodynavblock a, .bodynavblock a:visited {
color: #999;
}
.body-title {
border-top: 5px solid #555;
font-family: Georgia;
font-size: 9pt;
color: #999;
text-transform: uppercase;
letter-spacing: 2pt;
text-align: right;
padding-right: 24px;
display: none;
}
.body-midtitle {
font-family: verdana;
font-size: 18px;
color: #999;
text-align: left;
padding-left: 8px;
display: none;
}
.entryHolder {
color: #999;
font-family: Tahoma;
font-size: 10px;
padding: 3px;
background:#fff;
border: 1px solid #fff;
margin: 0px 0px 5px 2px;
}
.entryHolder img {
padding: 1px;
border:1px solid #dadada;
background:#fff url() repeat-x left top;
margin: 2px;
}
.entryUserinfo {
border:1px solid #dadada;
background:#fff url() repeat-x left top;
text-align: center;
padding: 3px 3px 3px 3px;
margin: 10px 5px 5px 5px;
display: inline;
}
.entryUserinfo-usericon img {
border: 0;
display: inline;
}
.entryText {
width: 560px;
line-height:12px;
margin: 10px 5px 5px 5px;
padding: 0px;
text-align: left;
}
.entryHeader {
font-family: Verdana, 'arial narrow', helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
letter-spacing: -1px;
color: #cccccc;
padding-right: 0.2em;
padding-bottom: 0.2em;
line-height:15px;
text-transform: lowercase;
text-align: left;
display:block;
}
.entryHeader a{
color: #fe4aa9;
}
.entryHeaderSubject {
font-family: 'century gothic', verdana, 'arial narrow', helvetica, sans-serif;
font-size: 1.75em;
color: #fe4aa9;
letter-spacing: -1px;
display:block;
padding-bottom: 0.2em;
text-transform: uppercase;
border-bottom: 1px solid #eee;
}
.entryHeaderDate a {
color : #fe4aa9;
text-decoration : none;
}
.entryHeaderDate a:hover {
color : #555;
text-decoration : none;
}
.entryMetadata {
padding-left: 2px;
}
.entryMetadata ul {
display: block;
margin-top: 30px;
padding-right: 5px;
}
.entryMetadata li {
list-style: none;
padding-right: 2px;
}
.entryMetadata-label {
font-weight: bold;
padding-right: 2px;
}
.entryMetadata {
padding-left: 2px;
margin: 20px 0px 5px 0px;
}
.entryMetadata ul{
line-height: 12px;
margin: 0px;
padding: 0px;
}
.entryMetadata li{
list-style: none;
display: block;
padding-right: 4px;
}
.entryMetadata-label{
font-weight: bold;
padding-right: 4px;
color: #fe4aa9;
font-family: Verdana;
}
.entryLinkbar {
font-family: ;
font-size: 10px;
color: #999999;
text-align: right;
padding: 4px 0px 4px 0px;
}
.entryLinkbar ul {
margin: 0px;
padding: 0px;
}
.entryLinkbar li {
display: inline;
padding: 0px 5px 0px 5px;
margin: 0px;
}
.sidebar {
width: 200px;
padding: 0;
font-family: Tahoma;
font-size: 10px;
line-height:12px;
margin: 0px 2px 0px 0px !important ;
height:100% !important;
background:#fff;
}
.sidebox {
padding: 5px;
color: #999;
}
.sideboxTitle {
font-family: 'century gothic', verdana, 'arial narrow', helvetica, sans-serif;
font-weight: normal;
letter-spacing: 1px;
font-size: 1.5em;
color: #fe4aa9;
background-image: url(
http://i38.photobucket.com/albums/e147/lalalagroovy/pixels/53.gif);background-repeat: no-repeat;
text-transform: capitalize;
padding-bottom: 02px;
padding-top: 0px;
padding-left: 14px;
}
.sideboxContent {
text-align: left;
padding: 2px 0px 2px 0px;
}
.sidebox #profile {
text-align: center;
}
.sidebox #tags_sidebox, .sidebox #tags_sidebox ul, .sidebox #tags_sidebox li {
text-align: left;
margin: 2px;
}
.sidebox #systemlinks {
text-align: left;
margin: 2px;
}
.listtitle {
padding-bottom: 0.8em;
padding-top: 0.8em;
font-family: 'century gothic', verdana, 'arial narrow', helvetica, sans-serif;
font-weight: normal;
letter-spacing: -1px;
font-size: 1.75em;
color: #fe4aa9;
}
.profile-label {
font-weight: bold;
}
.sidebox #latestmonth table{
width:100%;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
.latestmonth-inactive {
padding: 3px;
background-color: transparent !important;
border: 1px solid #e5e5e5;
margin: 1px;
color: #999;
font-weight: normal;
}
.latestmonth-active {
padding: 3px;
background:#f8f8f8;
border: 1px solid #e5e5e5;
margin: 1px;
}
.commentHolder {
color: #999;
background:#fff;
border: 1px solid #fff;
font-family: Tahoma;
font-size: 10px;
padding: 2px;
margin: 0px 0px 5px 2px;
}
.commentUserinfo {
border:1px solid #dadada;
background:#fff url() repeat-x left top;
text-align: center;
padding: 3px 3px 3px 3px;
margin: 5px 5px 5px 5px;
display: inline;
}
.commentUserinfo-usericon img {
border: 0;
display: inline;
}
.commentText {
line-height:12px;
margin: 5px;
padding: 0px;
text-align: left;
}
.commentHeader {
font-family: 'century gothic', verdana, 'arial narrow', helvetica, sans-serif;
text-align: right;
font-weight: normal;
letter-spacing: -1px;
font-size: 1.75em;
color: #fe4aa9;
border-bottom: 1px solid #e5e5e5;
text-transform: lowercase;
padding: 2px 4px 2px 2px;
}
.commentHeader a{
color: #fe4aa9;
}
.commentHeaderScreened {
font-family: 'century gothic', verdana, 'arial narrow', helvetica, sans-serif;
text-align: right;
font-weight: normal;
letter-spacing: -1px;
font-size: 1.75em;
color: orange;
border-bottom: 1px solid #e5e5e5;
text-transform: lowercase;
padding: 2px 4px 2px 2px;
}
.commentHeaderSubject {
font-weight: normal;
}
.commentLinkbar {
font-size: 10px;
color: #999;
text-align: right;
padding: 3px;
}
.commentLinkbar ul {
margin: 0px;
padding: 0px;
}
.commentLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}
#commenttext{
width:100%;
}
.yearlinks{
text-align: left;
}
.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;
}
.ljuser img { /*IE*/
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url();
padding: 12px 8px 0px 2px !important;
}
.ljuser:hover a { color: #fe4aa9; }
/* Preload the communityicon */
.ljuser a { background: url() -100px -100px no-repeat; }
/* Preload the usericon */
.ljuser { background: url() -100px -100px no-repeat; }
.ljuser img[src="
http://p-stat.livejournal.com/img/userinfo.gif"] {
background-color: transparent;
background-image: url();
}
.ljuser:hover img[src="
http://p-stat.livejournal.com/img/userinfo.gif"] {
background-image: url();
}
.subject img[src="
http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 11px 9px 0px 0px;
background: url(
http://i30.tinypic.com/23m3ey8.gif);}
.subject img[src="
http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 11px 9px 0px 0px;
background: url(
http://i30.tinypic.com/23m3ey8.gif);}
.entryHeader img[src="
http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
border: 0;
background: url("
http://i30.tinypic.com/23m3ey8.gif");
background-repeat: no-repeat;
padding: 11px 9px 0px 0px;
}
.entryHeader img[src="
http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
border: 0;
background: url("");
background-repeat: no-repeat;
padding: 11px 9px 0px 0px;
}
.entryHeader img {
border: 0;
width: 0;
height: 0;
background-repeat: no-repeat;
/* For IE users */
border: 0;
background-image: url("");
background-repeat: no-repeat;
padding: 11px 9px 0px 0px;
}
#summary img {
border: 0;
width: 0;
height: 0;
background-repeat: no-repeat;
}
#summary img[src="
http://stat.livejournal.com/img/icon_protected.gif"] {
border: 0;
background-image: url("");
padding: 11px 9px 0px 0px;
}
#summary img[src="
http://stat.livejournal.com/img/icon_private.gif"] {
border: 0;
background-image: url("");
padding: 11px 9px 0px 0px;
}
.tagstable {
width: 80%;
text-align: center;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
margin-top: 7px;
margin-bottom: 7px;
}
.tagstable td {
text-align: right;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
padding-left: 7px;
}
#qrform table {
border: 1px solid #eee !important;
margin-top: 20px;
padding: 15px;
}
.textbox {
background-color: #f5f5f5;
border: 1px solid #eee;
font-family: Verdana, Helvetica, sans-serif;
font-size: 10px;
color: #999;
margin: 5px;
}
.replyform textarea {
width: 450px;
font-family: Verdana;
font-size: 10px;
}
.bodynavblock select {
background-color: #f5f5f5;
border: 1px solid #eee;
font-family: Verdana;
font-size: 10px;
color: #777;
}
.bodynavblock input {
background-color: #f5f5f5;
border: 1px solid #eee;
color: #999;
font-family: Verdana;
font-size: 10px;
}
.replyform {
font-family: Verdana, Helvetica, sans-serif;
font-size: 10px;
color: #999;
cursor: default;
text-align: left;
}
.replyform img{
border: 0px;
}
.replyform #postform input {
background-color: #f5f5f5;
border: 1px solid #eee;
font-family: Verdana;
font-size: 10px;
color: #999;
}
.replyform #postform select {
background-color: #f5f5f5;
border: 1px solid #eee;
font-family: Verdana;
font-size: 10px;
color: #999;
}
.quickreply_comment input, .quickreply_entry input {
background-color: #f5f5f5;
border: 1px solid #eee;
font-family: Verdana;
font-size: 10px;
color: #999;
}
.quickreply_comment select, .quickreply_entry select {
background-color: #f5f5f5;
border: 1px solid #eee;
font-family: Verdana;
font-size: 10px;
color: #999;
}
h2 {
font-family: 'century gothic';
font-weight:normal;
letter-spacing: -1px;
margin:0;
font-size: 1.75em;
color: #fe4aa9;
}
hr {
color: transparent;
height: 1px;
border-style : none;
border-bottom: 1px dashed #eee;
}
blockquote {
margin: 20px 0;
padding: 0 20px 0 50px;
font-weight: bold;
color: #777;
border: none;
background: #fff url() no-repeat 10px 0;
}
::-moz-selection {
color: #555;
background: #fff;
}
code {
font-family: Tahoma;
font-size: 10px;
text-transform: lowercase;
border: 1px solid #e5e5e5;
border-left: 4px solid #e5e5e5;
color: #888;
display: block;
margin: 10px;
padding: 10px;
width: 450px;
}
img {
padding: 3px;
margin: 2px;
border:1px solid #dadada;
background:#fff url() repeat-x left top;
}
img.NO {
padding: 0px;
border: 0px solid #fff;
}
#welcomenoteHolder {
color: #999;
font-family: Tahoma, sans-serif;
font-size: 10px;
width: 800px;
margin: 0px 0px 5px 2px ;
}
#welcomenoteText {
margin: 0px 0px 0px 2px ;
padding: 5px;
width: 99%;
}
div.ContextualPopup div.Inner {
background:transparent!important;
color: #999!important;
border:none;
padding:10px;
width: 250px;
font-family: Tahoma;
font-size: 10px;
}
div.ContextualPopup .Content {
padding:7px 10px 7px 10px;
margin-right:85px;
line-height: 1.4;
background:#f5f5f5;
border:1px solid #e5e5e5;
}
div.ContextualPopup .Userpic {
padding:10px;
background:#f5f5f5;
margin:0px;
border:1px solid #e5e5e5;
}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #00C6FF !important;
}
div.ContextualPopup .Relation {
letter-spacing:1px;
border-bottom: 1px solid #e5e5e5;
margin-bottom:4px;
padding-bottom:4px;
}
Other Options:
no border around image
Bullet images:
changing width of the page:
look for this in your coding;
.pageblock{
width: 903px; - replace Numbers :D
margin: 0px auto;
}
Comment If using!
Add me! |
More layouts? | Thank you.
<3