(37): utopia for the masses

Sep 11, 2009 19:04




Live || Preview



Woaaah, long time no see you guys -- I'm in university now!! (And here's another sky-inspired layout for y'all who enjoy them~ ♥!)

STYLESHEET OVERVIEWS2 STYLESMOOTH SAILING ► UTOPIA FOR THE MASSESBROWSERMozilla Firefox, Safari, IE7 (1024x768+)ACCOUNT TYPESBasic, Plus (in-between entries ad placement preferred), PaidDISABLEDHeader links - you gotta replace them with the sidebar links.ADD-ONSContextual pop-up, tiny icons, custom comment pagesNAVIGATION STRIPCompatible, but looks better without it. :P

INSTALLATION INSTRUCTIONSCODES

/* ---------------------------------------------------
------ S2 SMOOTH SAILING: UTOPIA FOR THE MASSES ----------
- STYLESHEET AVAILABLE (@) UNEQUALLY.LIVEJOURNAL.COM -
--------- ( PLEASE DO NOT REDISTRIBUTE) --------------
------------------------------------------------------ */

/* -------------------------------------------
------------------- BODY ---------------------
---------------------------------------------- */

body {
background: url('http://i83.photobucket.com/albums/j302/sansespoir/livejournal/Simple_Sky_25601600_SloAu.jpg') fixed;
font-size: 8.5pt;
margin: 0;
color: #000;
border-top: 5px solid #000;
font-family: "arial", sans-serif;
}

a, a:visited, .day-count a, .entryHeader a, div.ContextualPopup .Relation {
text-decoration: none;
color: #000;
}

a:hover {color: #888;}

blockquote {
padding:15px;
color:#aaa; font-family: "georgia", sans-serif;
background:#000;
}

blockquote:hover {background:#000; color:#fff;}

code {
font-family: "courier new", sans-serif;
display:block;
padding:5px;
font-size: 12px;
}

input, textarea, select {
font-family: "arial", sans-serif;
font-size: 11px;
color: #000;
line-height: 150%;
padding: 2px;
border:1px solid #e1e1e1;
}

/* -------------------------------------------
------------------- PAGE ---------------------
---------------------------------------------- */
.bodyblock {padding: 15px 5px;
margin-right:auto;
margin-left: auto;
}

.body-title, .body-midtitle { display:none; }

.bodyheaderblock { border: 0px;
color: #888888;
padding: 0px;
}

.bodynavblock {
color: #000;
margin: 0px 0px 4px 0px;
padding: 8px;
font-family: "arial", serif;
}

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

.pageblock{ margin:0; }

/* -------------------------------------------
------------------- HEADER -------------------
---------------------------------------------- */

.pageheaderblock {
text-align: center;
padding: 20px;
margin-bottom:0px;
font-size: 9pt;
}

.pageblock{
margin:0;
}

.header-title {font-size: 18pt;
margin-right: auto;
margin-top: -20px;
width: 130px;
letter-spacing: -1.5pt; font-weight: bold;
font-family: "arial", serif;
background:#000;
text-transform: uppercase;
padding: 20px;
text-align: left;
color:#fff;
}

.header-title:first-letter {color:#7DE1FF;}
.header-subtitle {font: 1.3em arial; color:#fff; float: left; margin-top: -45px; margin-left: 190px;}

.header-icon { display:none;}

.header-menu {
display:none;
}

/* -------------------------------------------
----------------- FOOTER ---------------------
---------------------------------------------- */

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

#footer-menu a, .footer-menu a:visited {
text-align: left;
color:#aaa;
background:#000;
font: 10pt arial, serif;
text-transform: uppercase;
padding: 7px;
}

#footer-menu a:hover {color:#fff;}

.pagefooterblock {
display:none;}

#footer-menu li { display: inline; }
#footer-menu ul { margin-top: -13px; padding: 0px; text-align: center; }

/* -------------------------------------------
------------------- ENTRY --------------------
---------------------------------------------- */

.entryHolder {
line-height: 1.75; background:#fff; padding: 25px 25px 40px 25px;
margin: 0px 0px 20px 0px;
border-bottom: 5px solid #000;
width: 80%;
}

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

.entryUserinfo-usericon img { border:0;padding:5px; background:#fcfcfc; margin: 15px 0px 2px 0px;}
.entryText { padding: 15px; min-height: 30px; }

/* ---------------- SUBJECT ------------------ */
.entryHeader {
color: #eee;
font-family: "arial", sans-serif;
text-decoration: none;
text-align: right;
font-size:20px;
margin-top: -5px;
letter-spacing: -.5pt;
min-height: 50px;
}

.entryHeader a{ color:#444;}
.entryHeaderSubject {color: #eee; text-transform: lowercase;}
.entryHeaderSubject a {font-size: 20pt; letter-spacing: -.5pt;}

/* ----------------- DATE -------------------- */
.entryHeaderDate {
color:#fff;
display:block;
font-size:30pt;
letter-spacing:-2px;
line-height:32px;
margin-left:0;
margin-right:-85px;
padding:15px 10px 10px;
float: right;
margin-top: -20px;
font-family: "georgia";
text-align:center;
text-transform:uppercase;
width:51px;
}

.entryHeaderDate:first-line {
color:#70e6e6; line-height: 50%;
font-size:30pt; font-family: "arial", serif;
}

.entryHeaderDate a {color: #ccc; text-decoration : none;}
.entryHeaderDate a:hover { color: #dddddd; text-decoration :underline; }

/* ---------------- METADATA ------------------ */

.entryMetadata {
padding-bottom: 18px;
padding-left: 10px;
margin-top: -50px;
text-transform: uppercase;
font-family: "arial", sans-serif;
color: #000;
}

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

.entryMetadata li {
list-style: none;
font-size: 7pt;
}

.entryMetadata-label {font-weight: bold; padding-right: 3px; }
.entryMetadata a:hover {color:#f50000;}

/* -------------- COMMENT LINKS ---------------- */

.entryLinkbar {
font-family: "arial", serif;
letter-spacing: .2pt;
font-size: 8pt;
text-align: right;
margin-bottom: -70px;
padding: 0px;
}

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

.entryLinkbar li {
padding: 7px 12px;
margin: 0px;
display: inline;
}

.entryLinkbar li:hover {
padding: 7px 12px;
}

.entryLinkbar a:hover {color:#70e6e6;}

/* -------------------------------------------
------------------ SIDEBAR -------------------
---------------------------------------------- */

.sidebar {
margin: auto;
width: 180px;
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;
margin-top: 15px;
background:#fff;
}

.sideboxTitle {
display:none;
}

.sideboxContent {
padding: 0px 4px 22px 0px;
}

.sidebox #latestmonth {
text-align: center;
margin-left: auto;
margin-right: auto;
}

.sidebox #tags_sidebox {
text-align: left;
color:#c3f4f1;
margin-top: 5px;
display:block;
}

.sidebox #tags_sidebox a {
display:block; color:#000; font-size: 11pt; letter-spacing: -.5pt;
padding: 0px; margin-top: -10px; }

.sidebox #tags_sidebox a:hover {color:#777;}

.sidebox #freetext {
text-align: left;
line-height: 170%;
}

.sidebox #search {
text-align: center;
}

.sidebox #summary {
text-align: left;
font-size: 8pt;
color:#000;
list-style: none;
font-family: "arial", serif;
}

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

.listitem {
padding: 2px 13px;
font-size: 20pt;
color:#fff;
letter-spacing: -.7pt;
margin: 5px 5px 0 5px;
font-family: "arial", sans-serif;
text-align: justify;
}

.listitem a {color:#000; padding: 0 1px; }
.listitem a:hover {color:#fff; background:#000; padding: 0 1px;}

.sideboxContent input#SearchTerm, select#SearchType, input { border:0px; 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 { font-size: 10pt; color:#fff; padding: 2px; margin: 2px;}
.latestmonth-active {background: #000; margin:1px; font-size: 10pt; padding: 1px;}
.latestmonth-active a {color:#fff;}
.profile-label,
.profile-content { display:none; }

/* -------------------------------------------
------ CUSTOM COMMENT PGS (PAID ONLY) --------
---------------------------------------------- */

.ljcmt_full {background:#fff; width: 80%; border-bottom: 5px solid #000;}

.commentUserinfo {
text-align: center;
margin: 0px 8px 0px 0px;
}

.commentUserinfo-usericon img {
margin-left: 10px;
border:0px;
padding: 8px;
border:1px solid #eee;
}

.commentHolder {
padding: 0px;
margin: 15px 10px;
}

.commentText {
text-align: justify;
padding: 10px;
}

.commentHeader {
color: #000;
font-weight: bold;
text-transform: lowercase;
font-family: "georgia";
font-size: 15pt;
padding: 8px;
}

.commentHeaderScreened {
background-color: #eee;
padding: 8px;
}

.commentHeaderSubject {
font-weight: bold;
}

.commentLinkbar {
text-align: right;
font-size: 7.5pt;
padding: 6px;
}

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

.commentLinkbar li {
padding: 10px 15px;
margin: 0px;
letter-spacing: .3pt;
display: inline;
font-family: "arial", serif;
text-transform: uppercase;
}

.commentLinkbar li:hover {
color:#aaa;
}

.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 #fff; 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: #333029 !important;
border:none;
padding:10px;
width: 245px;
font-family:"arial", sans-serif;
font-size: 8pt;
}

div.ContextualPopup .Content {
padding:12px 15px;
margin-right:80px;
line-height: 1.4;
background-color: #fff;
}

div.ContextualPopup .Userpic {
padding:10px;
margin:0px;
background-color: #fff;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal; font-family: "courier", serif;
color: #777 !important;
text-transform: uppercase;
}

div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:hover {
text-decoration: none !important;
font-weight: normal;
color: #0085d2 !important;
}

div.ContextualPopup .Relation {
letter-spacing:0px;
border-bottom: 3px solid #000;
margin-bottom:4px;
padding-bottom:4px;
}

/* -------------------------------------------
-------------- LJ TINY ICONS -----------------
---------------------------------------------- */

.ljuser img {
width: 0;
height: 0;
background: transparent url('http://i83.photobucket.com/albums/j302/sansespoir/livejournal/34tcykp.png') no-repeat center left;
padding: 17px 16px 0 2px !important;
}

.ljuser img[src*="userinfo.gif"] {
background: transparent url('http://i83.photobucket.com/albums/j302/sansespoir/livejournal/34tcykp.png') no-repeat center left;
padding: 17px 16px 0 2px !important;
}

.ljuser img[src*="community.gif"] {
background-color:transparent;
background-image: url('http://i83.photobucket.com/albums/j302/sansespoir/livejournal/z0ndx.png');
padding: 17px 15px 0 2px !important;
}

img[src*="syndicated.gif"] {
background-color:transparent;
background-image: url('http://i83.photobucket.com/albums/j302/sansespoir/livejournal/feed.png');
padding: 17px 16px 0 2px !important;
background-position: center left;
background-repeat: no-repeat;
width: 0px;
height: 0px;
}

img[src*="newsinfo.gif"] {
background: transparent url('http://i83.photobucket.com/albums/j302/sansespoir/livejournal/gear.png') no-repeat;
padding: 17px 16px 0 2px !important;
background-repeat: no-repeat;
width: 0px;
height: 0px;
}

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: 0px 0px 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: 0px 0px 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: 0px 0px 16px 16px !important;
}

img[src*="help.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 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: 0px 0px 16px 16px !important;
}

img[src*="icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 0 16px 18px;
background: url('http://i83.photobucket.com/albums/j302/sansespoir/livejournal/lock_disable.png') no-repeat;
}

img[src*="icon_private.gif"]{
width: 0;
height: 0;
padding: 0 0 16px 18px;
background: url('http://i39.tinypic.com/mrrblj.png') no-repeat;
}

img[src*="icon_groups.gif"]{
width: 0;
height: 0;
padding: 0 0 16px 16px;
background: url('http://i83.photobucket.com/albums/j302/sansespoir/livejournal/lock_disable.png');
}

/* -------------------------------------------
------------------- CONTROL STRIP ------------
---------------------------------------------- */

#lj_controlstrip {
background:#000;
}

#lj_controlstrip_statustext, #lj_controlstrip a {
color:#777;
}

#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search,
#lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_login td, #lj_controlstrip td td {
border:none !important; }

#lj_controlstrip input {
background:#181818 !important;
color:#777 !important; font-family: "courier new"; }

#lj_controlstrip_search_input_text, #lj_controlstrip select,
#lj_controlstrip_search_submit, input#Logout, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password,
#lj_controlstrip input#xc_remember {
background:#131313 !important;
color:#777 !important; border: 1px solid #444; font-family: "courier new";
}

#lj_controlstrip .ljuser a b {
color:#666; font-family: georgia;
text-decoration:none !important;
}

/* -------------------------------------------
------------------- MISC ---------------------
---------------------------------------------- */
html body {}

::-moz-selection
{
background: #000;
color: #fff;
}

.entryMetadata img {display:none;}

S2 STYLECUSTOMIZE ► SMOOTH SAILINGDISPLAY
  • Wrap Entry text under userinfo? Yes
  • Userinfo Position in Entries? Left side of the entry text
    MetaData Position? Above Entry Text
    Entry Tags Position? With Metadata (mood, music)
ENTRY TEXT
  • Enabled: Change your 'Format for Date and Time (Recent/Friends/Entry/Reply page)' to %%dd%% %%mm%% %%yy%%
SIDEBAR
  • Enabled: Everything. But since the layout's header links (Recent Entries, etc.) are not coded, please visit your links list and fill in the header links separately. If you are doing this, change your 'Links Visibility' to position 1 to mimic the appearance of the header links.
CUSTOM CSS MENUS
  • 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!
EXTERNAL GRAPHICS( tiny icons → asher. )
( icons → likefluffy & polar_sea & oxygene! )CREDITPlease credit unequally and/or introject!QUESTIONS?Righto, as I stated above, I'm super, super rusty from not making anything for months -- please excuse any blatant errors, and tell me if anything's wrong! Now that I've started Uni, I have no idea how much time I can devote to making layouts, but I hope I'll spare a bit of free time to drop in every so often. Thank you guys for sticking with me even through the disappearance, haha. ♥!

stylesheet, s2: smooth sailing

Previous post Next post
Up