S2 Minimalism - Waiting

Jan 02, 2010 05:04



-Includes sidebar, calendar, comment pages, ljbar, etc.
- Credit/watch yearzeta if you use.
- More details under the cut.

View full preview.

I made this for my comm, and decided to share.

+ You should be okay for this layout in all screen resolutions. I think.
+ Tested in Firefox, Safari, IE (something), and Google Chrome.
+ Tiny icons from Pinvoke (I think).
+ Pattern from... I don't even know. I used it because it matched the header I was using for my comm. Feel free to change it if you want.
+ Edit whatever you want, but don't claim the base code (though I don't know why you'd want to) as your own.
+ Link to yearzeta or sulfuricfusion in your profile if you use this.

Fun fact! I went over the allowed length for CSS with this layout. I am thusly very embarassed.

To install:
1. Go to the customize page and type "Minimalism" into the search box.
2. Select the theme "Aquatic Moon." (This is kinda important.)
3. Click customize your theme, then the custom CSS link.
4. Set both dropdown menus to NO, and leave the external stylesheet option empty.
5. Paste the code in the Custom Stylesheet space.

/* WAITING, a Minimalism layout for use with Aquatic Moon by community.livejournal.com/yearzeta
Tiny icons from: http://pinvoke.com/, pattern from... Zex's adventures surfing the web. She's being uncooperative.
Comes fully loaded with comment/calendar page, sidebar, ljbar, and custom icons. */

/* GENERAL PROPERTIES */

body {
background: url("") scroll repeat #9dbbd0;
padding:0px;
margin:0px;
width:100%;
}
#page{
margin:0pX;
padding:0px;
font-family:arial;
font-size:12px;
width:70%;
margin-left:15%;
}
div.layout{
font-family:"arial", helvetica, "sans serif";
width:750px;
margin:auto;
padding-top:10px;
}
div.content{
width:72%;
float:right;
}
.sidebar {
width:26%;
float:left;
background:#ffffff;
}
.entry-wrap{
margin-top:0px;
margin-bottom:20px;
background:#ffffff;
padding:1px;
padding-bottom:6px;
}
.entry-wrap, .sidebar{
-khtml-border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
ul.page-nav{
display:inline-block;
width:100%;
text-align:right;
list-style:none;
}
li.prev a.item, li.next a.item{
font-size:17px;
color:#ffffff;
text-transform:uppercase;
font-weight:normal;
letter-spacing:1px;
}
li.prev a.item:hover, li.prev a.item:active{
color:#d4e4f1;
}
li.active{
list-style:none;
font-size:16px;
}

/* HEADER INFORMATION */
div.u-wrap, div.header-sec{
background:url("") no-repeat top center transparent;
}
ul.nav{
padding:0px;
margin:0px;
position:relative;
list-style: none;
text-align:right;
background-color:transparent;
}
ul.nav li.item {
display:inline;
}
ul.nav li{
margin:0px 15px;
}
ul.nav li.item a:link, ul.nav li.item a:visited{
font-family:"arial", helvetica, "sans serif";
font-size:17px;
text-transform:lowercase;
color:#ffffff;
line-height:20px;
font-weight:100;
}
ul.nav li.item a:hover, ul.nav li.item a:active{
color:#d4e4f1;
font-weight:300;
}
li.item-selected{
color:#121226;
font-size:17px;
letter-spacing:0px;
font-family:arial;
text-transform:lowercase;
}
li.item-selected a:hover, li.item-selected a:active{
letter-spacing:0px;
}
.header .userpic, h1 span.ljuser, div.hr hr, .header h2, .header h3{
display:none ;
}

/* SIDEBAR */

.sidebar {
padding:0px;
font-size:11px;
color:#808080;
}
.sidebar-powered, .sidebar-powered a{
text-transform:uppercase !Important;
}
.sidebar-powered a:link, .sidebar-powered a:visited{
color:#ababab;
font-size:12px;
}
.sidebar-powered a:hover, .sidebar-powered a:active{
color:#d4e4f1;
}
.sidebar dd{
width:100% !important;
display:block;
margin:0px;
padding:3px;
}
.sidebar-block dt{
text-transform:uppercase;
font-size:17px;
letter-spacing:5px;
color:#60758a;
margin-top:5px;
border-bottom:solid 1px #ededed;
}
.sidebar-cal dt{
display:none;
}
.sidebar-block{
margin-bottom:20px;
}
.sidebar-summary a:link, .sidebar-summary a:visited, .sidebar-links a:link, .sidebar-links a:visited{
color:#5a5a5a;
font-size:13px;
font-weight:lighter;
}
.sidebar-summary a:hover, .sidebar-summary a:active, .sidebar-links a:hover, .sidebar-links a:active{
color:#d4e4f1;
}
dd.tags{
text-align:center;
padding:0px;
}
dd.tags a:link, dd.tags a:visited{
color:#d3d8dc;
text-transform:lowercase;
letter-spacing:0.00em;
}
dd.tags a:hover, dd.tags a:active{
color:#d4e4f1;
text-decoration:underline;
border-bottom:dotted 1px #d9cbe5;
}
.sidebar-links dd a{
width:100%;
padding:3px;
}
.sidebar-links dd, .sidebar-summary li{
display:list-item;
list-style:none;
margin:0px;
text-align:right;
margin-top:4px;
padding:0px;
}
.sidebar-summary ul, .sidebar-summary dd{
width:99%;
display:block;
margin:0px;
padding:0px;
}
dd.calendar-wrap, dd.calendar-wrap table{
width:100%;
margin:0px;
padding:0px;
}
.sidebar-cal caption{
text-align:right;
line-height:14px;
}
.sidebar-cal .calendar-wrap .month, .sidebar-cal .calendar-wrap .year{
font-size:17px;
letter-spacing:2px;
color:#60758a;
text-transform:uppercase;
margin-left:7px;
margin-right:5px;
}
.calendar-wrap table{
border-left:solid 1px #ffffff;
border-top:solid 1px #ffffff;
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/cd0e7566.png") repeat center transparent;
}
.calendar-wrap td{
text-align:center;
color:#9a9a9a;
height:30px;
background:transparent;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
padding:0px;
}
.calendar-wrap th div{
text-align:center;
color:#4e4e4e;
font-size:12px;
display:none;
}
.calendar-wrap td a{
width:100%;
height:100%;
display:block;
background:#97b1e5;
line-height:30px;
text-align:center;
font-size:15px;
padding:0px;
color:#ffffff;
border:none;
opacity:0.3;
filter:alpha(opacity=30);
}
.calendar-wrap td a:hover{
background:#adcde8;
color:#000000;
}

/* ENTRY AND FONTS */
dt.entry-title a.subj-link, .entry-title{
display:block;
color:#585879 !important;
font-size:22px !important;
text-transform:none;
letter-spacing:-.05em !important;
font-weight:bold;
background-color:transparent;
text-align:right;
text-decoration:none;
line-height:17px;
font-weight:normal;
}
.entry-title{
padding:4px;
border-bottom:solid 1px #ededed;
}
.hentry{
margin:0px 0px 12px 0px;
}
dt.entry-title a{
padding:0px;
margin:0px;
}
dt.entry-title img{
margin-right:2px;
float:left;
}
dt.entry-title a img{
margin:0px;
float:none;
}
.entry-text{
padding:7px;
min-height:160px;
margin:0px;
}
.entry-content{
color:#5F5F5F;
line-height:18px;
font-size:12px;
}
dl.vcard{
max-width:125px;
padding:2px;
display:block;
text-align:right;
margin:2px;
float:right;
line-height:14px;
text-align:center;
background:url("http://i756.photobucket.com/albums/xx205/Zeeexito/f7c529a4.png") top right repeat;
border:solid 1px #312f4b;
-moz-border-radius:3px;
-kthml-border-radius:3px;
-webkit-border-radius:3px;
}
dl.vcard dt img{
opacity:0.8;
filter:alpha(opacity=80);
padding:5px;
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/138852f9.png") transparent repeat;
}
dl.vcard dt img:hover{
opacity:0.7;
filter:alpha(opacity=70);
}
dd.username, dd.entry-date{
padding:0px;
margin:0px;
}
dd.username{
overflow:visible;
}
dd.username .ljuser a:link b, dd.username .ljuser a:visited b{
color:#737cae;
font-size:14px;
line-height:14px;
}
dd.username .ljuser a:hover b, dd.username .ljuser a:active b{
color:#2B2F61;
}
dd.entry-date, abbr.updated{
text-transform:lowercase;
border:none !important;
font-weight:100;
color:#8b8dbd;
text-decoration:none;
letter-spacing:-1PX;
font-size:10px;
}
.ljuser b{
font-size:15px;
}
.ljuser a{
border:transparent !important;
}
.ljuser a:link b, .ljuser a:visited b{
font-weight:100;
color:#445091;
letter-spacing:-1px;
}
.ljuser a:hover b, .ljuser a:active b{
color:#d4e4f1;
}
b, strong{
font-weight:600;
color:#3b376f;
letter-spacing:0.03em;
}
i, em{
color:#95a8b8;
}
u{
color:#6a4e8a;
}
strike{
color:#8caed4;
}
big{
font-size:150%;
letter-spacing:-1px;
}
small{
font-size:80%;
letter-spacing:0.04em;
}
blockquote{
border:solid 1px #a8b2c4;
line-height:17px;
color:#5e729b;
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/fde1b279.png") #ededed top center repeat;
padding:3px;
}
textarea{
width:150px;
border:solid 1px #d5d5d5;
font-size:12px;
line-height:15px;
letter-spacing:1px;
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/fde1b279.png") #ededed top left repeat;
color:#9a9a9a;
}
input, select{
font-size:11px;
color:#747474;
}
code, pre{
color:#a19ac9;
}
a:link, a:visited{
font-weight:100;
color:#3a3a8a;
font-style:normal;
letter-spacing:-1px;;
text-decoration:none;
text-transform:none;
}
a:hover, a:active{
color:#d4e4f1;
cursor:crosshair;
font-weight:400;
}
.entry-content a:link, .entry-content a:visited, .comment-text a:link, .comment-text a:visited{
border-bottom: dashed 1px #d1d1ff;
}
.entry-content a:hover, .entry-content a:active, .comment-text a:hover, .comment-text a:active{
border-bottom:dotted 1px #d9cbe5;
}

/* METADATA */

div.metadata{
margin:10px 0px;
padding:0px;
margin-left:30px;
}
dt.meta-location-label, dt.meta-mood-label, dt.meta-music-label{
display:none;
}
dd.meta-mood-value, dd.meta-location-value, dd.meta-music-value{
font-size:13px;
text-transform:none;
color:#909090;
letter-spacing:-1px;
margin:0px;
margin-left:20px;
}
dd.meta-location-value a{
font-size:13px;
text-transform:lowercase;
}
dl.meta-location{
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/cf396106.png") no-repeat 0px -128px;
}
dl.meta-mood{
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/cf396106.png") no-repeat 0px -192px;
}
dl.meta-music{
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/cf396106.png") no-repeat 0px -304px;
}
div.ljtags{
font-size:0.01%;
color:#ffffff;
text-transform:none;
padding-left:20px;
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/cf396106.png") no-repeat 0px -369px;
margin-top:15px;
margin-left:25px;
}
div.ljtags a:link, div.ljtags a:visited{
font-size:11px;
color:#9a9a9a;
letter-spacing:0.02em !important;
text-decoration:none;
padding-right:5px;
line-height:10px;
text-transform:lowercase;
border:none;
}
div.ljtags a:hover, div.ljtags a:active{
color:#d4e4f1;
}

/* ENTRYMENU LINKS */
.entrymenu, .entrysubmenu{
margin:0px;
position:relative;
top:0px;
float:right;
}
dd.entrymenu ul, dd.entrysubmenu ul{
padding:0px;
margin:0px;
list-style:none;
margin-left:0px;
}
dd.entrymenu ul li, dd.entrysubmenu ul li{
display:inline;
padding:0px 4px;
}
.entrymenu a:link, .entrymenu a:visited, .entrysubmenu a:link, .entrysubmenu a:visited{
font-size:12px;
letter-spacing:0px;
font-weight:100;
margin-left:-3px;
color:#b8bbed;
text-transform:lowercase;
border:none;
}
.entrymenu a:hover, .entrymenu a:active, .entrysubmenu a:hover, .entrysubmenu a:active{
font-weight:300;
color:#d4e4f1;
}

/* IMAGES */

.ljuser img[src*="userinfo.gif"] {
background: transparent url("http://i955.photobucket.com/albums/ae39/zheeer/lj/cf396106.png") no-repeat !important;
background-position:0px 0px !important;
padding: 8px 8px !important;
width:0px;
height:0px;
}
.ljuser img[src*="community.gif"] {
background: transparent url("http://i955.photobucket.com/albums/ae39/zheeer/lj/cf396106.png") no-repeat !important;
background-position:-16px 0px !important;
padding: 8px 8px !important;
width:0px;
height:0px;
}
.entry-linkbar img {
width:0px;
height:0px;
background:transparent;
margin-right:3px;
}
.entry-linkbar a, .comment-head-in a{
border:none !IMPORTANT;
}
.entry-linkbar img[src*="btn_prev.gif"] {
background: transparent url("http://i955.photobucket.com/albums/ae39/zheeer/lj/88170c54.png") no-repeat !important;
background-position:0px 0px !important;
padding: 8px 8px !important;
}
.entry-linkbar img[src*="btn_edit.gif"] {
background: transparent url(http://i955.photobucket.com/albums/ae39/zheeer/lj/88170c54.png) no-repeat !important;
background-position:-16px 0px !important;
padding: 8px 8px !important;
}
.entry-linkbar img[src*="btn_edittags.gif"] {
background: transparent url(http://i955.photobucket.com/albums/ae39/zheeer/lj/88170c54.png) no-repeat !important;
background-position:-32px 0px !important;
padding: 8px 8px !important;
}
.entry-linkbar img[src*="btn_memories.gif"] {
background: transparent url(http://i955.photobucket.com/albums/ae39/zheeer/lj/88170c54.png) no-repeat !important;
background-position:-48px 0px !important;
padding: 8px 8px !important;
}
.entry-linkbar img[src*="btn_tellfriend.gif"] {
background: transparent url(http://i955.photobucket.com/albums/ae39/zheeer/lj/88170c54.png) no-repeat !important;
background-position:-64px 0px !important;
padding: 8px 8px !important;
}
.entry-linkbar img[src*="btn_track.gif"] {
background: transparent url(http://i955.photobucket.com/albums/ae39/zheeer/lj/88170c54.png) no-repeat !important;
background-position:-96px 0px !important;
padding: 8px 8px !important;
}
.entry-linkbar img[src*="button-flag.gif"] {
background: transparent url(http://i955.photobucket.com/albums/ae39/zheeer/lj/88170c54.png) no-repeat !important;
background-position:-80px 0px !important;
padding: 8px 8px !important;
}
.entry-linkbar img[src*="btn_next.gif"] {
background: transparent url(http://i955.photobucket.com/albums/ae39/zheeer/lj/88170c54.png) no-repeat !important;
background-position:-112px 0px !important;
padding: 8px 8px !important;
}
.comment-head-in img{
width:0px;
height:0px;
background: transparent;
}
.comment-head-in img[src*="btn_del.gif"] {
background: transparent url("http://img29.imageshack.us/img29/6461/minimalismcleanprintcom.png") no-repeat 0px 0px !important;
padding: 8px 9px !important;
}
.comment-head-in img[src*="btn_scr.gif"] {
background: transparent url("http://img29.imageshack.us/img29/6461/minimalismcleanprintcom.png") no-repeat 0px -16px !important;
padding: 8px 9px !important;
}
.comment-head-in img[src*="btn_freeze.gif"] {
background: transparent url("http://img29.imageshack.us/img29/6461/minimalismcleanprintcom.png") no-repeat 0px -32px !important;
padding: 8px 9px !important;
}
.comment-head-in img[src*="btn_track.gif"] {
background: transparent url("http://img29.imageshack.us/img29/6461/minimalismcleanprintcom.png") no-repeat 0px -48px !important;
padding: 8px 9px !important;
}

/* FULL VIEW PAGE */
#qrformdiv table{
border:none !important;
font-size:14px;
text-transform:uppercase;
font-weight:100;
color:#878787;
letter-spacing:-1px;
}
#qrformdiv a, #qrformdiv b{
text-transform:uppercase;
font-size:14px;
font-weight:100;
letter-spacing:-1px;
}
#qrformdiv a b, .entry-comments-text .ljuser b{
text-transform:lowercase;
font-size:14px;
letter-spacing:0px;
}
div.comment-upic{
float:left;
width:auto;
padding:5px;
background:url("") repeat #ffffff;
opacity:0.7;
filter:alpha(opacity=70);
margin:0px 3px 3px 0px;
}
div.comment-upic:hover{
opacity:0.5;
filter:alpha(opacity=50);
}
div.comment-upic img{
width:85px;
height:85px;
}
.entry-comments .ljuser a b{
text-transform:lowercase !important;
font-size:13px;
}
div.comments-links{
color:#5a5a5a;
margin:7px 0px 15px 0px;
text-align:right;
text-transform:uppercase !important;
font-size:14px;
}
.replylink a{
font-size:14px;
text-transform:uppercase;
border:none;
}
.comment-wrap{
font-size:12px;
letter-spacing:0.02em;
line-height:16px;
border:1px solid #cad2e3;
text-transform:none;
min-height:102px;
min-width:120px;
margin-bottom:10px;
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/ce8eedba.png") repeat;
padding:2px;
}
div.comment-text{
margin-bottom:15px;
padding-top:10px;
color:#605f76;
border-top:dotted 1px #dedede;
}
div.comment-head-in{
display:inline;
width:100%;
text-align:right;
line-height:10px;
}
.comment-head-in h3{
display:inline;
font-weight:normal;
color:#656565;
}
a.comment-permalink:link, a.comment-permalink:visited{
color:#555555;
text-transform:uppercase;
font-size:12px;
}
a.comment-permalink:hover, a.comment-permalink:active{
color:#cccccc;
}
div.comment-menu{
text-align:right;
}
div.comment-menu a{
text-transform:uppercase;
font-size:10px;
}
textarea.textbox{
border:#787878;
height:auto !Important;
width:100% !important;
}
.entry-linkbar{
display:block;
text-align:right;
margin-right:5px;
padding:5px 0px;
}
div.comment-head-in p{
display:inline;
margin-left:7px;
}

/* CALENDAR */
.entry-text div.calendar-wrap caption a{
font-size:17px;
color:#666666;
text-transform:uppercase;
letter-spacing:3px;
margin:0px 7px;
}
.entry-text .calendar-wrap caption{
text-align:right;
line-height:14px;
}
div.calendar-wrap{
width:60%;
margin-left:15%;
margin-bottom:20px;
}
div.calendar-wrap table{
width:100%;
text-align:center;
font-size:12px;
}
div.calendar-wrap td a{
font-size:14px;
width:100%;
height:100%;
color:#ffffff;
}

/* MISCELLANEOUS */
div.content-tags{
text-align:center;
}
div.content-tags .comma{
display:none;
}
a img{
border:none !important;
}
h4{
font-size:17px;
color:#c0c0d9;
letter-spacing:2px;
font-weight:normal;
}
#lj_controlstrip{
background-image:none !important;
background:#ffffff;
}
#lj_controlstrip span{
color:#000000;
}
#lj_controlstrip a:link, #lj_controlstrip a:visited{
text-transform:lowercase !Important;
color:#787878 !important;
}
#lj_controlstrip a:hover, #lj_controlstrip a:active{
text-decoration:none !important;
font-style:italic !important;
color:#d5d5d5 !important;
}

Comment if you find bugs, like, have questions, etc.

maker: sulfuricfusion, style: minimalism

Previous post Next post
Up