s2 smooth sailing: smooth criminal
Live || Preview
STYLESHEET OVERVIEWS2 STYLESMOOTH SAILING ► SMOOTH CRIMINALBROWSERMozilla Firefox, Safari (1024x768+)ACCOUNT TYPESBasic, Plus (vertical or in-between preferred), PaidDISABLEDSubtitle (text)ADD-ONSContextual pop-up, header icons, tiny icons, custom comment pagesNAVIGATION STRIPCompatible but not coded.
INSTALLATION INSTRUCTIONSCODES/* ---------------------------------------------------
--------- S2 SMOOTH SAILING: SMOOTH CRIMINAL ---------
- STYLESHEET AVAILABLE (@) UNEQUALLY.LIVEJOURNAL.COM -
--------- ( PLEASE DO NOT REDISTRIBUTE) --------------
------------------------------------------------------ */
/* ------ BODY --- */
body {
background:#fff;
font-size: 9pt;
margin: 0;
color: #000;
border-top: 15px solid #000;
font-family: "helvetica", "arial", sans-serif;
}
a, a:visited, .day-count a, .entryHeader a, div.ContextualPopup .Relation {
text-decoration: none;
color: #000;
}
a:hover {color: #888;
position: relative;
}
b, u {color:#000;}
blockquote {
padding:15px;
border-bottom: 3px solid #000;
color:#000;
width: 80%;
}
blockquote:hover { border-bottom: 3px double #ffea00;}
code {
font-family: monospace;
display:block;
padding:5px;
font-size: 12px;
}
input, textarea, select {
font-family: "arial", sans-serif;
font-size: 13px;
color: #000; background: url('http://i83.photobucket.com/albums/j302/sansespoir/livejournal/patterns/thing.png');
line-height: 150%;
padding: 2px;
border:1px solid #888;
}
/* ------ PAGE ---- */
.bodyblock {padding: 0 5px;
margin-right:auto;
margin-left: auto; }
.body-title, .body-midtitle { display:none; }
.bodyheaderblock {
color: #000;
padding: 0;
}
.bodynavblock {
color: #000;
margin: 0 0 4px 0;
padding: 8px;
font-family: "arial", serif;
}
.bodynavblock a, .bodynavblock a:visited {
color: #444;
}
.pageblock{ margin:0;}
/* ------ HEADER --------- */
.pageheaderblock {
text-align: center;
padding: 20px; margin-left: 190px;
margin-top: -10px;border-left: 3px double #000;
font-size: 9pt;
}
.pageblock{
margin:0;
}
.header-title {font-size: 40pt;
width:50%;
margin-right: auto;
text-align: left;
letter-spacing: -3pt;
margin-top: 20px;
line-height: 80%;
font-weight: bold;
font-family: "arial", serif;
padding: 12px 12px 20px 12px;
color:#000;
}
.header-title:first-letter {color:#000;}
.header-subtitle {font-size: 0pt; padding: 20px 30px; background:url('http://i83.photobucket.com/albums/j302/sansespoir/livejournal/patterns/7270-1.gif');}
.header-icon { display:none;}
.header-menu {
padding: 5px; float: right;
padding-left: 19px;
margin-top: -100px;
letter-spacing: -1px;
line-height: 20px;
text-transform: lowercase;
}
.header-menu a, .header-menu a:visited {
text-align: left;
padding: 25px 22px;
margin-right:2px;
color: #555;
letter-spacing:0pt;
font-weight: bold;
font-family: "arial", serif;
font-size: 0pt;
text-transform: uppercase;
}
.header-menu a[href="http://introject.livejournal.com/"] {
background:transparent url(http://tinyurl.com/ycatzsf) no-repeat scroll 50% 0;
}
.header-menu a:hover[href="http://introject.livejournal.com/"] {
background:transparent url(http://tinyurl.com/yaq99l5) no-repeat scroll 50% 0;
}
.header-menu a[href*="/calendar"] {
background:transparent url(http://tinyurl.com/ye9wqt2) no-repeat scroll 50% 0;
}
.header-menu a:hover[href*="/calendar"] {
background:transparent url(http://tinyurl.com/yd856yf) no-repeat scroll 50% 0;
}
.header-menu a[href*="/friends"] {
background:transparent url(http://tinyurl.com/ycz5chg) no-repeat scroll 50% 0;
}
.header-menu a:hover[href*="/friends"] {
background:transparent url(http://tinyurl.com/ycsb39h) no-repeat scroll 50% 0;
}
.header-menu a[href*="/profile"] {
background:transparent url(http://tinyurl.com/y9tdeno) no-repeat scroll 50% 0;
}
.header-menu a:hover[href*="/profile"] {
background:transparent url(http://tinyurl.com/yckobhs) no-repeat scroll 50% 0;
}
.header-menu a[href*="/memories"] {
background:transparent url(http://tinyurl.com/ybbgxax) no-repeat scroll 50% 0;
}
.header-menu a:hover[href*="/memories"] {
background:transparent url(http://tinyurl.com/y875tfg) no-repeat scroll 50% 0;
}
.header-menu a[href="http://nattie-chan.deviantart.com/"] {
background:transparent url(http://tinyurl.com/ybt4cdb) no-repeat scroll 50% 0;
}
.header-menu a:hover[href="http://nattie-chan.deviantart.com/"] {
background:transparent url(http://tinyurl.com/y9zmrem) no-repeat scroll 50% 0;
}
.header-menu ul { margin: 0; padding: 0; text-align: right; }
.header-menu li { display: inline; }
/* ---- FOOTER ---- */
#footer-menu {
padding: 0 15px; margin-top: -30px;}
#footer-menu a, .footer-menu a:visited {
text-align: left;
color:#000;
font-weight: bold;
letter-spacing: -1pt;
font: 15pt "arial", serif;
text-transform: uppercase;
padding: 5px;background:#ffea00;
}
#footer-menu a:hover {color:#fff;}
.pagefooterblock {
background-color: #000;
color: #313131;
font-family: "arial", serif;
letter-spacing: .3pt;
text-align: right;
padding: 5px 15px;
}
.pagefooterblock:hover {color:#ffea00;}
#footer-menu li { display: inline; }
#footer-menu ul { margin: 0; padding: 0; margin-right: 0; text-align: right; }
/* ------ ENTRY ---------- */
.entryHolder {
line-height: 1.75;padding: 25px 25px 60px 0; border-left: 3px double #000;
}
.entryUserinfo {
text-align: center;
margin: 0 8px 8px 0;
}
.entryUserinfo-usericon img { border:1px solid #eee;padding:5px; background:#fff; margin: -2px 0 2px 0;}
.entryText { padding: 15px; min-height: 30px; }
/* -- SUBJECT ---- */
.entryHeader {
color: #000;
font-family: "arial", sans-serif;
min-height: 60px;
text-decoration: none;
text-transform: lowercase;
text-align: right;
font-weight: bold;
padding: 0;
font-size: 25pt;
letter-spacing: -3pt;
border-bottom:3px double #000;
}
.entryHeader a{ color:#000;}
.entryHeaderSubject {font-size: 0pt; }
.entryHeaderSubject a {font-size: 30pt; }
/* --- DATE ------ */
.entryHeaderDate {
color:#000;float: right;
margin-top: 10px;
background: url('http://tinyurl.com/ydrgwtr') no-repeat left center;
font: 15pt courier new;
letter-spacing: 0pt;
padding: 15px 45px;
}
.entryHeaderDate a {color: #ccc; text-decoration : none;}
.entryHeaderDate a:hover { color: #dddddd; text-decoration :underline; }
/* -- METADATA ---- */
.entryMetadata {
padding-bottom: 18px;
padding-left: 40px;
font-family: "arial", sans-serif;
color: #000;
}
.entryMetadata ul {
margin: 0;
padding: 0; }
.entryMetadata li {
list-style: none;
font-size: 8.5pt;
}
.entryMetadata-label {font-weight: bold; padding-right: 3px; text-transform: uppercase; }
.entryMetadata a:hover {background:#eee; color:#000; text-transform: uppercase;}
.entryMetadata img {padding: 0 3px;}
/* COMMENT LINKS -- */
.entryLinkbar {
font-family: "helvetica", "arial", serif;
letter-spacing: -.7pt;
font-size: 12pt;
text-align: right;
padding: 0;
}
.entryLinkbar ul {
margin: 5px 0;
padding: 0;
}
.entryLinkbar li {
padding: 7px 12px; background:#ffea00;
margin: 0;
display: inline;
}
.entryLinkbar li:hover {background:#000; color:#fff;}
.entryLinkbar a:hover {color:#fff;}
/* ----- SIDEBAR --------- */
.sidebar {
margin: -220px auto auto -5px;
width: 170px;
font-family: "arial", serif;
color: #000;
padding: 20px 10px;
font-size: 8.5pt;
line-height: 150%;
}
.sidebox #profile {text-align: center; }
img.profile-userpic {
text-align: center; padding: 10px; background:#ffea00;
margin-top: 15px;
}
.sideboxTitle {
font: 1.3em arial, serif;
color:#000;
font-weight: bold;
letter-spacing: -.3pt;
border-bottom: 3px double #000;
padding: 5px 10px;
margin: 5px -10px;
}
.sideboxContent {
text-align: justify;
padding: 0 0 22px 0;
}
.sidebox #latestmonth {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.sidebox #tags_sidebox {
text-align: left;
color:#fff;
margin-top: 15px;
display:block;
}
.sidebox #tags_sidebox a {
display:block;
padding: 0 5px 5px 9px; margin: 0 -10px;
border-bottom:1px dotted #000;
}
.sidebox #freetext {
text-align: left;
line-height: 170%;
}
.sidebox #search {
text-align: center;
}
.sidebox #summary {
text-align: left;
font-size: 8.5pt;
color:#000;
font-family: "arial", serif;
}
.sidebox #systemlinks { text-align: center; }
.listitem {
font-size: 8.5pt;
font-family: "arial", sans-serif;
text-align: justify; display:block;
padding: 5px 5px 5px 9px; margin: 0 -10px;
border-bottom:1px dotted #000;
}
.sideboxContent input#SearchTerm, select#SearchType, input { margin: 5px; }
.sidebox td {
font-family: "arial";
padding-bottom: 5px;
color:#000;
font-size: 1.5em;
text-transform: uppercase;
letter-spacing: -.4pt;
}
.sidebox #latestmonth table{
text-align: center;
padding: 5px;
margin-left: auto;
margin-right: auto;
}
.latestmonth-inactive { background: #eee; font-size: 8pt; color:#888; padding: 4px; margin: 2px;}
.latestmonth-active {background: #ffea00; margin:2px; font-size: 7pt; padding: 4px;}
.listtitle {font-weight: bold; padding: 20px 5px 5px 8px; margin: 0 -10px; border-bottom: 3px double #000;
font-size:10pt; color:#000; text-align: justify; letter-spacing: -.5pt; }
.profile-label, .profile-content { display:none; }
/* ------- CUSTOM COMMENT PGS (PAID ONLY) ----- */
.ljcmt_full {background:#fff; border:3px double #000; border-bottom: 1px solid #fff;}
.commentUserinfo {
text-align: center;
margin: 0 8px 8px 0;
}
.commentUserinfo-usericon img {
margin-left: 10px;
border:0;
padding: 8px;
border:1px solid #eee;
}
.commentHolder {
padding: 0;
margin: 15px 10px;
}
.commentText {
text-align: justify;
padding: 10px;
}
.commentHeader {
color: #000;
font-weight: bold;
text-transform: lowercase;
font-family: "arial";
letter-spacing: -2pt;
font-size: 25pt;
padding: 8px;
}
.commentHeaderScreened {
background-color: #eee;
padding: 8px;
}
.commentHeaderSubject {
font-weight: bold;
}
.commentLinkbar {
text-align: right;
font-size: 7pt;
padding: 6px;
}
.commentLinkbar ul {
margin: 0;
padding: 5px;
}
.commentLinkbar li {
padding: 10px 15px;
margin: 0;
letter-spacing: .3pt;
display: inline;
font-family: "arial", serif;
text-transform: uppercase;
}
.commentLinkbar li:hover {
color:#000;
}
.commentLinkbar a:hover {color:#aaa;}
.replyform {
padding-left: 10px;
margin: auto;
}
.commentUserinfo-username {padding: 5px;}
/* ---- TAGS PG ---------- */
.tagstable { width: 100%; }
.tagstable, .tagstable td { border-bottom: 1px solid #eee; margin: 1px; }
/* ---- ARCHIVES --------- */
.yearlinks{ text-align: center; }
.yearlink{ padding-left:4px; padding-right: 4px; }
.month { text-align: center;
margin-right: auto;
margin-left:auto;
width: 55%; }
.daysubjects { color: #888888; padding: 8px 8px 8px 40px; }
.daytitles { text-align: center;
text-transform: lowercase;
text-decoration: bold;
border-bottom: 1px solid #f1f1f1;
font-family: "arial"; }
.day-blank, .day {border-bottom: 1px solid #f1f1f1;}
.day-count { text-align: right; font-size: 1.5em; }
.day-count a { text-decoration: none; color: #aaa; }
/* ---- CONTEXTUAL POP-UPS ------ */
div.ContextualPopup div.Inner {
background:transparent!important;
color: #000 !important;
border:none;
padding:10px;
width: 245px;
font-family:"arial", serif;
font-size: 8.5pt;
}
div.ContextualPopup .Content {
padding:12px 15px;
margin-right:80px;
line-height: 1.4;
background: url('http://tinyurl.com/ydtateh');
border-bottom: 5px solid #000;
}
div.ContextualPopup .Userpic {
padding:10px;
margin:0;
background: url('http://tinyurl.com/ydtateh');
}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal; font-family: "courier new", serif;
color: #000 !important; background:#ffea00;
text-transform: uppercase;
}
div.ContextualPopup div.Inner a:hover {
text-decoration: none !important;
font-weight: normal;
color: #000 !important;
}
div.ContextualPopup .Relation {
letter-spacing:0;
border-bottom: 3px double #ccc;
margin-bottom:4px;
padding-bottom:4px;
}
/* - LJ TINY ICONS ------- */
.ljuser img {
width: 0;
height: 0;
background: transparent url('http://tinyurl.com/yemfheu') no-repeat center left;
padding: 17px 15px 0 2px !important;
}
.ljuser img[src*="userinfo.gif"] {
background: transparent url('http://tinyurl.com/yemfheu') no-repeat center left;
padding: 18px 15px 0 2px !important;
}
.ljuser img[src*="community.gif"] {
background-color:transparent;
background-image: url('http://tinyurl.com/yachh5j');
padding: 20px 15px 0 2px !important;
}
img[src*="syndicated.gif"] {
background-color:transparent;
background-image: url('http://tinyurl.com/y9jk7px');
padding: 21px 16px 0 2px !important;
background-position: center left;
background-repeat: no-repeat;
width: 0;
height: 0;
}
img[src*="newsinfo.gif"] {
background: transparent url('http://tinyurl.com/yeqc34l') no-repeat;
padding: 18px 16px 0 2px !important;
background-repeat: no-repeat;
width: 0;
height: 0;
}
img[src="http://l-stat.livejournal.com/img/anonymous.gif"] {
height: 0;
width: 0;
background: url('http://i83.photobucket.com/albums/j302/sansespoir/livejournal/question_frame.png') no-repeat;
padding: 0 0 16px 16px !important;
}
img[src*="openid-profile.gif"] {
height: 0;
width: 0;
background: url('http://i83.photobucket.com/albums/j302/sansespoir/livejournal/book_key.png') no-repeat;
padding: 0 0 16px 16px !important;
}
img[src="http://l-stat.livejournal.com/img/talk/none.gif"] {
height: 0;
width: 0;
background: url('http://i83.photobucket.com/albums/j302/sansespoir/livejournal/delete.png') no-repeat;
padding: 0 0 16px 16px !important;
}
img[src*="help.gif"] {
height: 0;
width: 0;
padding: 0 0 16px 16px !important;
background: url(http://i38.tinypic.com/vovi8j.png) no-repeat scroll 50% 50%;
}
img[src*="pencil.gif"] {
height: 0;
width: 0;
background: url('http://i83.photobucket.com/albums/j302/sansespoir/livejournal/pencil_plus.png') no-repeat;
padding: 0 0 16px 16px !important;
}
img[src*="icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 12px;
background: url('http://tinyurl.com/ya9ot44') no-repeat;
}
img[src*="icon_private.gif"], img[src*="icon_groups.gif"]{
width: 0;
height: 0;
padding: 0 0 16px 18px;
background: url('http://tinyurl.com/ybtp6pg') no-repeat;
}
/* ------ MISC --- */
html body {}
::-moz-selection
{
background: #ffea00;
color: #000;
}
S2 STYLECUSTOMIZE ► SMOOTH SAILINGDISPLAY
- Wrap Entry text under userinfo? No
- MetaData Position? Below Entry Text
Userinfo Position in Entries? Right side of the entry text
- Disabled: Nothing! Go crazy. :D
- Modifying the Header Links: Please replace a few pieces of code to ensure your custom header links ('recent entries' and your custom link) show the correct image!
Find .header menu a and modify ONLY THE FOLLOWING:
RECENT ENTRIES LINK:
.header-menu a[href="http://YOUR LJ NAME HERE.livejournal.com/"] {
background:transparent url(http://tinyurl.com/ycatzsf) no-repeat scroll 50% 0;
}
.header-menu a:hover[href="http://YOUR LJ NAME HERE.livejournal.com/"] {
background:transparent url(http://tinyurl.com/yaq99l5) no-repeat scroll 50% 0;
}
* If you are using this for a community, make sure it's community.livejournal.com/NAME/ instead of the format above!
WEBSITE LINK (designated on your profile)
.header-menu a[href="WEBSITE URL HERE"] {
background:transparent url(http://tinyurl.com/ybt4cdb) no-repeat scroll 50% 0;
}
.header-menu a:hover[href="WEBSITE URL HERE"] {
background:transparent url(http://tinyurl.com/y9zmrem) no-repeat scroll 50% 0;
} - Changing the banner strip at the top: If you don't like the black/white robot-cluttered graphic, feel free to replace it with your own pattern:
.header-subtitle {font-size: 0pt; padding: 20px 30px; background:url('PATTERN IMAGE URL HERE');}
* Please do not fiddle with the padding as this will displace the header links downwards! If you really want the banner bigger (to mimic a header image, for example) you are welcome to edit and tweak however much you want. :)
- Set all drop-down menus on the custom css page to NO
!important - Copy & paste the CSS codes into 'Custom stylesheet'
- Hit 'save changes' & you're done!
( icons → acony_icons & gyaku & lazygraphics & lucific! )CREDITPlease credit unequally and/or introject!QUESTIONS?If you find any errors, please tell me! Also, if you like what you see, why not give unequally a peek? :)