(LAYOUT 01 →) smooth sailing, subdued.

Jun 29, 2010 00:46

Q: You make layouts?
A: Believe me, I didn't know either. O_o
Buuut, I've been wanting to give it a shot for awhile, so here's my first attempt.
Q: Will there be more?
A: Uh... the safe answer here is probably maybe. So, I guess if people like them.
Q: What's with all the updates lately?
A: Its summer, so I'm making up for lost time. Also, I have alot of time on my hands and have recently been bombarded with lots of graphic/design inspiration, so there it is. (:



Static Preview | Live Preview

layout 01 - (this took way too long). basics:
Style: Smooth Sailing
Tested in: IE 9, Firefox, Safari
Users: Paid, Basic, and Plus (maybe?)
Comment Pages: More or less
Warnings: The calendar page looks crappy... Oh, and I did not code the topbox stylesheet, so select it at your own risk.

installation:
Go to customize your journal style.
Choose a 'Smooth Sailing' design and make sure the '2 column (sidebar on left)' is selected under Page Setup. Then click on customize your theme.
Go to 'Custom CSS' and insert the CSS provided below.

/*
Entitled: Subdued (01)
Style: Smooth Sailing
Designer: Angelica (silentevocation @ lj.com)
Credit: http://fleeting_days.livejournal.com */

body {
font-family: Arial, sans-serif;
font-size: 12px;
color: #A3A3A3;
background-color: #FFF;
background-image: url(http://i47.tinypic.com/z4vo.gif);
}

textarea, input, select {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #A5C9CE;
font-family:Arial,Sans-serif;
font-size:11px;
line-height:19px;
padding:1px;

}

blockquote { font-family: courier new; color: #9e9e9e; padding: 5px;

}

.pageblock {
width: 1000px;
background-color: #E8EDED;
margin: 2px;
padding-top:10px;
}

a {
color: #BCBCBC;
text-decoration: none;
letter-spacing: 0px;
}

b, strong {
color: #A7C3C6;

}

a:hover {
color: #7A8E9B;
}

.entryHeaderDate a {
color: #A3A3A3;
text-decoration: none;
}

.entryHeaderDate a:hover {
color: #A3A3A3;
text-decoration: underline;
}

.header-title {
display: none;
}

/* FOR NAVIGATION */
.header-menu a {

white-space: nowrap;

line-height: 40px;
font-size:27px;
font-weight:bold;
font-style:italic;
padding: 5px 10px 10px 10px;
margin-top 10px;
margin-bottom 10px;
color: #A5C9CE;
letter-spacing: -3px;
text-transform: lowercase;
text-align: center;

}

.header-menu a:hover {
color: #C9D6D8;
}

.header-subtitle {
display: none;
}

.header-icon {
top: 0px;
right: 0px;
position: absolute;
z-index: 1;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}

.pageheaderblock {
text-align: center;
}

.pagefooterblock {
background-color: #E8EDED;
color: #E8EDED;
font-size: 11px;
text-align: right;
padding: .5em;
letter-spacing: none;
}

.pagefooterblock a, .pagefooterblock a:visited {
color: #E8EDED;
}

/* ENRTY BODY */
.bodyblock {
padding: 12px 42px;
background: white;
}

.bodyheaderblock {
background-color: #fff;
margin: 0 auto;
padding-top: 10px;
}

.bodynavblock {
text-align: right;
}

.bodynavblock a, .bodynavblock a:visited {
color: #BCBCBC;
}

/* PAGE VIEW */
.body-title {
display: none;
}

.body-midtitle {
font-family:Arial, sans-serif;
font-size: 18px;
color: #AFAFAF;
text-align: left;
padding-left: 8px;
}

/* JOURNAL ENTRIES */
.entryHolder {
color: #828282;
background: white;
font-family:Arial, sans-serif;
font-size: 11px;
border-top: 1px solid #E0E0E0;
text-align: justify;
margin-bottom: 10px;
}

.entryUserinfo {
text-align: center;
margin: 0px 5px 5px 0px;
}

.entryUserinfo-usericon img {
border-bottom: 10px solid #f2f2f2;
border-top: 10px solid #f2f2f2;
border-right: 10px solid #f2f2f2;
border-left: 10px solid #f2f2f2;
margin-bottom: 3px;
margin-left:10px;
}

.entryText {
padding-right: 6px;
padding-left: 15px;
}

/* DATE AND SUBJECT */
.entryHeaderDate {
background: none;
color: #828282;
font-family:courier new;
font-size: 12px;
letter-spacing: 1px;
margin: 5px;
text-transfom: uppercase;
}

.entryHeader {
background:none;
color:#828282;
font-family:Arial, sans-serif;
font-size:20px;
margin: 10px;
}

.entryHeader a {
color: #A5C9CE;
font-family:Arial, sans-serif;
font-size: 25px;
line-height: 22px;
letter-spacing: -2px;
font-weight:bold;
font-style:italic;

}

/* SUBJECT LINE */
.entryHeaderSubject {
display: block;
color: #fff;
font-size: 0px;

}

.entryMetadata {
padding:0 40px 19px;
text-align: left;
}

.entryMetadata ul {
margin: 0px;
padding: 0px;
}

.entryMetadata li {
list-style: none;
background:none repeat scroll 0 0 transparent;
display:block;
list-style:none outside none;
padding-right: 12px;
padding-top: 2px;
padding-bottom: 2px;
}

.entryMetadata-label {
font-weight: bold;
color: #7A8E9B;
padding-right: 4px;
}

/* ENTRY COMMENT LINKS */
.entryLinkbar {
font-family:courier new;
background:none repeat scroll 0 0 #E8EDED;
font-size: 11px;
text-align: right;
padding: 4px 0px 4px 0px;
margin-top:10px;
text-transform: lowercase;
}

.entryLinkbar a {
background:none repeat scroll 0 0 transparent;
color:#93BABF;
letter-spacing:0;
text-transform:lowercase;

}

.entryLinkbar a:hover {
color:#7A8E9B;

}

.entryLinkbar ul {
margin: 0px;
padding: 0px;
}

.entryLinkbar li {
padding: 0px 5px 0px 2px;
margin: 0px;
display: inline;
}

.commentHolder {
color: #A3A3A3;
background-color: #ffffff;
border-top: 2px solid #ffffff;
font-family: ;
font-size: 11px;
margin: 4px 0px 4px 0px;
}

.commentUserinfo {
text-align: center;
margin: 5px 5px 5px 5px;
background-color: #ffffff;
}

.commentUserinfo-usericon img {
text-align: center;
padding: 5px 5px 5px 5px;
border-top: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
background-color: #ffffff;
}

.commentText {
padding: 6px;
}

.commentHeader {
background-color: #E8EDED;
color: #A3A3A3;
font-family:Arial, sans-serif;
font-size: 11px;
padding: 4px 0px 4px 8px;
}

.commentHeader a {
color: #A3A3A3;
}

.commentHeaderScreened {
font-family:Arial, sans-serif;
font-size: 11px;
background-color: #cccccc;
padding: 4px 0px 4px 8px;
}

.commentHeaderSubject {
font-weight: bold;
}

.commentLinkbar {
font-family:Arial, sans-serif;
font-size: 11px;
color: #A3A3A3;
text-align: right;
padding-top: 4px;
padding-bottom: 4px;
}

.commentLinkbar ul {
margin: 0px;
padding: 0px;
}

.commentLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}

#commenttext {
width: 100%;
}

.replyform {
padding-left: 10px;
}

.yearlinks {
text-align: right;
}

.yearlink {
padding-left: 4px;
padding-right: 4px;
}

.month {
width: 100%;
border: 1px solid #dddddd;
margin: 8px 8px 8px 40px;
}

.daysubjects {
color: #000000;
padding: 8px 8px 8px 40px;
}

.daytitles {
text-align: center;
border: 1px solid #dddddd;
background: #eeeeee;
color: #000000;
}

.day-blank {
border: 1px solid #dddddd;
}

.day {
border: 1px solid #dddddd;
}

.day-date {
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
color: #000000;
width: 50%;
text-align: center;
}

.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 14px;
font-weight: bold;
}

.day-count a {
text-decoration: none;
}

/* GENERAL SIDEBAR */
.sidebar {
color: #828282;
font-size: 11px;
margin-right: 10px;
width: 220px;
}

/* WITHIN SIDEBAR */
.sidebox {
border-top: 1px solid #E0E0E0;
color: #AFAFAF;
background-color: #none;
margin-bottom: 10px;
}

/* SIDEBOX TITLE */
.sideboxTitle {
display: none;
}

.sideboxContent {
text-align: left;
border-top: 20px solid white;
border-bottom: 10px solid white;
padding: 2px 4px 2px 4px;
}

.sidebox #profile, sidebox #latestmonth, .sidebox #search {
text-align: justify;
}

.sidebox #tags_sidebox {
text-align: left;
}

.sidebox #systemlinks {
text-align: left;
}

.sidebox #latestmonth table {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
}

.listtitle {
font-weight: none;
}

.profile-label {
font-weight: none;
}

#footer-menu {
font-size: 11px;
}

#footer-menu a {
color: #f2f2f2;
white-space: nowrap;
padding: 6px;
text-align: left;
}

.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}

.header-menu li, #footer-menu li {
display: inline;
}

.tagstable, .tagstable td {
border: 1px solid #dddddd;
}

.tagstable {
width: 500px;
}

/* FOR TINY ICONS */
img[src*="userinfo.gif"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="openid-profile.gif"] {
background-image:url("http://i47.tinypic.com/wi7k3m.png");
background-repeat:no-repeat !important;
height:0;
padding:15px 11px 4px 0 !important;
width:0;
}
img[src*="anonymous.gif"] {
background-image:url("http://i46.tinypic.com/2i6jmnn.gif");
background-repeat:no-repeat !important;
height:0;
padding:17px 17px 0 0 !important;
width:0;
}
img[src*="community.gif"], img[src*="partnercomm.gif"] {
background-image:url("http://i50.tinypic.com/25tun2a.jpg") !important;
background-repeat:no-repeat !important;
height:0;
padding:20px 17px 0 0px !important;
width:0;
}
img[src*="newsinfo.gif"] {
background-image:url("http://i47.tinypic.com/2rh8cwm.gif");
background-repeat:no-repeat !important;
height:0;
padding:20px 18px 0 0 !important;
width:0;
}
img[src*="syndicated.gif"] {
background-image:url("http://i45.tinypic.com/2zpic05.jpg");
background-repeat:no-repeat !important;
height:0;
padding:20px 18px 0 0 !important;
width:0;
}
img[src*="icon_protected.gif"] {
background-image:url("http://i48.tinypic.com/2a9nwwl.gif") !important;
background-repeat:no-repeat !important;
height:0;
padding:17px 18px 0 0 !important;
width:0;
}
img[src*="icon_groups.gif"] {
background-image:url("http://i45.tinypic.com/2zpic05.jpg") !important;
background-repeat:no-repeat;
height:0;
padding:20px 18px 0 0 !important;
width:0;
}
img[src*="icon_private.gif"] {
background-image:url("http://i47.tinypic.com/2i6gvac.gif") !important;
background-repeat:no-repeat;
height:0;
padding:17px 18px 0 0 !important;
width:0;
}

settings:
Make sure you set both Use layout stylesheet(s) dropdowns to 'No'.
Disabled: Click on 'Sidebar' and under the Page tab set the 'Profile Position' to 'hide'. Also under the Multisearch Sidebar tab set the 'Multisearch Position' to 'hide'. This will disable the profile info and search bar in the sidemenu.
Enabled: Page summary, tags, latest month, and freetext sideboxes.
Positioning: Go to Display and under the Basic Options tab, set the 'Userpic postion in entries' to the right side of the text.

notes:
Saving/Hosting: All tiny icons should be saved to your own hardrive and reuploaded onto an image hosting site, just to be on the safe side.
For Plus Accounts: Ad placement should be set to 'Horizontal'.
Editing: Feel free to change/edit the backgrounds, color scheme, etc.
Just be sure to have a link back to fleeting_days as credit somewhere on your livejournal.
Questions? Leave a comment and I will attempt to help you with any problems, etc. This is my first layout though, so forgive me if I make a mistake/cannot help.

WATCH, IF YOU PLEASE. // AFFILIATION, YES?

theme: minimalistic, !stylesheet: smooth sailing, #livejournal layouts

Previous post Next post
Up