S2 Minimalism - Neat Mess
I'll probably have it on my journal for a few days if a live preview is desired.
This is such a mess, being the first thing I coded in Minimalism. If anyone wants to edit it, perfect it, or fix any of the little things that I can't be bothered to, be my guest.
I think I covered all of the bases; it's not a complex layout at all, more of a basic stylesheet for me to start on.The only things I barely touched on were the:
-comment pages
-top nav bar
-sticky note
Tested in:
-Firefox, Safari, IE, Google Chrome, though here are few minor inconsistencies.
Res:
-It doesn't look all that great in 800x600, but anything larger than that is fine.
To install:
1. Go to the customize page and type "Minimalism" into the search box.
2. Select the theme "Aquatic Moon." (I've discovered that some others confuse the order of certain elements.)
3. Click the "customize your theme" link, then the Cusstom 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.
Notes:
-Tiny icons from Pinvoke.
-Edit to your will - however, do not claim as your own after any amount of change.
-If you have a screen-res of 800, I'm willing to try to edit this to work. Just ask.
-I hid the journal title/subtitle because it's a personal quirk.
-Credit sulfuricfusion if you use.
/* NEAT MESS, A MINIMALISM S2 LAYOUT, FOR USE WITH "AQUATIC MOON."
Please credit sulfuricfusion@livejournal if you use. */
/* GENERAL PROPERTIES */
body {
background: #ededed;
padding:0px;
margin:0px;
width:100%;
}
div#page{
width:80%;
font-family:arial, sans serif;
margin-left:8%;
}
.entry-wrap, .sidebar-inner{
background-color:#ffffff;
-moz-border-radius:8px;
-khtml-border-radius:8px;
-webkit-border-radius:8px;
}
.entry-wrap{
margin-top:15px;
margin-bottom:30px;
min-height:200px !important;
}
div.content{
width:75%;
float: left ;
margin:0 20 0 auto;
}
.sidebar-custom a:link, .sidebar-custom a:visited, .entrymenu a:link, .entrymenu a:visited, .entrysubmenu a:link, .entrysubmenu a:visited, .page-nav a:link, .page-nav a:visited{
color:#9a9a9a;
text-transform:uppercase;
font-size:14px;
letter-spacing:-2px;
}
.sidebar-custom a:hover, .sidebar-custom a:active, .entrymenu a:hover, .entrymenu a:active, .entrysubmenu a:hover, .entrysubmenu a:active, .page-nav a:hover, .page-nav a:active{
letter-spacing:-1.5px;
color:#ff0d29;
}
/* HEADER INFORMATION */
.header{
margin-top:20px;
}
ul.nav li.item {
display: inline;
position: relative;
}
.header ul {
padding: 0px;
margin: 0px;
list-style-type: none;
float: left;
}
ul.nav{
display:block;
width:100%;
text-align:right;
font-family:arial;
font-size:35px;
text-transform:lowercase;
letter-spacing:-2px;
color:#959595;
border-bottom:dotted 0px #d8ff3e;
}
ul.nav li a:link, ul.nav li a:visited{
color:#e4e4e4;
text-decoration:none;
padding:0 15;
}
ul.nav li a:hover, ul.nav li a:active{
color:#f4f8f8;
font-style:normal;
font-weight:normal;
}
.header .userpic, h1 span.ljuser, div.hr hr, .header h2, .header h3{
display: none;
}
/* SIDEBAR */
.sidebar {
width: 22%;
position: relative;
float: right;
margin-top: 0px;
margin:%;
padding:3px;
font-size:11px;
}
.sidebar-block dt{
text-transform:lowercase;
font-size:22px;
font-family:arial;
letter-spacing:1px;
}
dd.tags a:link, dd.tags a:visited{
color:#0fbce1;
}
dd.tags a:hover, dd.tags a:active{
color:#7ccbf4;
font-weight:normal;
}
.sidebar-summary a:link, .sidebar-summary a:visited{
text-transform:uppercase;
color:#dcdcdc;
font-size:13px;
letter-spacing:-.04em;
}
.sidebar-summary a:hover, .sidebar-summary a:active{
color:#d8ff3e;
font-style:normal;
font-weight:bold;
}
.sidebar-links dd, .sidebar-summary li{
display: list-item;
list-style: none;
margin: 0;
padding: 5px;
border-bottom: 1px dotted #bfbfbf;
}
.sidebar-summary ul, .sidebar-summary dd{
width:99%;
display:block;
margin:0px;
padding:0px;
}
dd.calendar-wrap, dd.calendar-wrap table{
width:98%;
margin:0px;
padding:0px;
}
.calendar-wrap td{
width:px;
text-align:right;
color:#474083;
}
.calendar-wrap th div{
width:px;
text-align:right;
color:#b0b0b0;
}
/* ENTRY AND FONTS */
dt.entry-title a.subj-link, .entry-title{
font-size:25px;
letter-spacing:-0.06em;
font-family:arial, sans serif;
color:#000000;
text-transform:lowercase;
text-decoration:none;
font-weight:normal;
font-style:normal !important;
width:90%;
display:block;
}
dd.entry-date, abbr.updated{
text-transform:lowercase;
border:none !important;
font-weight:bold;
color:#b7b7b7;
text-decoration:none;
letter-spacing:-2px;
}
.entry{
padding:5px;
font-size:11.5px;
font-style:normal;
font-weight:normal;
text-decoration:none;
letter-spacing:0.04em;
}
b, strong{
font-size:13px;
font-weight:bold;
color:#4e04bd;
}
i, em{
font-size:12px;
color:#3684c6;
}
u{
color:#c4c4c4;
}
strike{
color:#ffa42d;
}
big{
font-size:14px;
letter-spacing:-1px;
}
small{
font-size:11px;
letter-spacing:0.03em;
}
blockquote{
width:80%;
margin-left:7%;
border:solid 1px #d8ff3e;
font-size:11px;
line-height:16px;
color:#292929;
background-color:#fbfbfb;
}
textarea{
width:60%;
margin-left:10%;
border:solid 2px #bbdede;
font-size:11px;
line-height:16px;
letter-spacing:1px;
font-family:arial;
background-color:#ffffff;
color:#152222
}
div.entry-content{
margin-left:-25px;
margin-bottom:5px;
}
dl.vcard{
float:right;
text-align:right;
margin-top:-20px;
}
dd.username{
width:115px;
overflow:hidden;
}
a:link, a:visited{
font-weight:normal;
color:#9df109;
font-style:normal;
font-family:arial;
letter-spacing:0.02em;
text-decoration:none;
}
a:hover, a:active{
color:#e3f42a;
font-style:italic;
text-decoration:none;
cursor:crosshair;
font-weight:normal;
}
.entrymenu, .entrysubmenu{
position:relative;
top:4px;
}
dd.entrymenu ul, dd.entrysubmenu ul{
padding:0px;
margin:0px;
list-stye-type:none;
margin-left:0px;
float:left;
}
dd.entrymenu ul li, dd.entrysubmenu ul li{
display:inline;
padding:0px 4px;
}
/* METADATA */
div.metadata{
margin-bottom:15px;
}
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{
margin-left:25px;
line-height:17px;
}
dl.meta-location{
background:url("http://img21.imageshack.us/img21/1708/emotess.png") no-repeat;
background-position:0 0;
}
dl.meta-mood{
background:url("http://img21.imageshack.us/img21/1708/emotess.png") no-repeat;
background-position:0px -228px;
}
dl.meta-music{
background:url("http://img21.imageshack.us/img21/1708/emotess.png") no-repeat;
background-position:0px -99px;
}
div.ljtags{
font-size:.01%;
color:#ffffff;
padding-left:20px;
background:url("http://img21.imageshack.us/img21/1708/emotess.png") no-repeat;
background-position:0px -286px;
margin:10px 0px 10px 25px;
text-transform:none !important;
}
div.ljtags a:link, div.ljtags a:visited{
font-size:11px !important;
color:#b4b4b4 !important;
letter-spacing:0.03em !important;
text-decoration:none;
padding:0px 5px 0px 0px;
}
div.ljtags a:hover, div.ljtags a:active{
color:#abe3e1;
font-style:italic;
}
.ljuser img {
width:0px;
height:0px;
background: transparent;
}
.ljuser img[src*="userinfo.gif"] {
background: transparent url(http://img21.imageshack.us/img21/1708/emotess.png) no-repeat !important;
background-position:0px -48px !important;
padding: 8px 8px !important;
}
.ljuser img[src*="community.gif"] {
background: transparent url(http://img21.imageshack.us/img21/1708/emotess.png) no-repeat !important;
background-position:-20px -20px !important;
padding: 8px 8px !important;
}
.ljuser a b, .ljuser a strong{
color:#9df109 !important;
}
/* COMMENTS */
div.comment-upic{
float:left;
}
div.comments-links, div.comments-links a{
text-transform:uppercase;
}
.entry-comments a:link, .entry-comments a:visited{
color:#1f10b1;
text-transform:lowercase;
}
.comment-wrap{
font-size:11px;
letter-spacing:0px;
line-height:15px;
border-bottom:1px dashed #cbcbcb;
}
div.comment-head-in{
display:block;
width:100%;
text-align:right;
line-height:10px;
}
/* CALENDAR */
div.entry, div.calendar-wrap caption a{
font-size:15px;
text-transform:lowercase;
}
div.calendar-wrap{
width:60%;
margin-left:15%;
background-color:#f2f2f2;
margin-bottom:15px;
}
div.calendar-wrap table{
width:100%;
}
div.calendar-wrap th div{
font-size:15px;
color:#0a8c8e;
}
div.calendar-wrap table{
text-align:right;
color:#bcbcbc;
font-size:11px;
}
div.calendar-wrap table a{
font-size:13px;
}