Floral Woods

Jul 21, 2011 23:00



Floral Woods
Previews: temporary live, static
Browsers Tested: Chrome, Firefox
Css Stylesheet: Flexible Squares

Installation Instructions
❶ Go to the Customize Journal page. Select a Flexible Squares stylesheet.
➋ Go to the Personalize page and select the Custom CSS tab.
➌ Be sure to select "No" for all of the dropdown menus on this tab.
➍ Copy and paste the css below into the Custom Stylesheet box.

Other Layout Information
Best Viewing: This layout was made to look best in widescreen with an ad-blocker.
Links: The header has been disabled so you will want to create your own journal link list that will be displayed in the sidebar from this tab on the Personalization page.
Titles: If you want a bold title in the sidebar blurb like the one displayed, you will need to put the text in-between
tags.
Editing: Yes, of course you can edit the layout's colors, background, and any other details to your desired specifications.
Hosting: You don't need to host the images on your own servers, but I would recommend it in case TinyPic wants to delete older images that they are hosting.
Ect: You requested layouts, so here is the first one (that I've ever made)! Cross posted to Mintyapple.

/* - Floral Wood a {Wild_Plums.Livejournal.com} layout -*/ /* (body) */ img { opacity: 0.82; filter: alpha(Opacity=85); -webkit-transition-duration: 0.8s; } img:hover { opacity: 1; filter: alpha(Opacity=1); -webkit-transition-duration: 0.8s; } body {background:#9e7968 url('http://i55.tinypic.com/an1vnd.jpg'); background-attachment: fixed; text-align:justify; margin:20px 0 20px 0; } #content { width: 65%; min-height:80px; padding:5px; } .clear {height: 10px;} #maincontent { color:#888888; font-family: georgia; background:transparent; font-size:10px; float:right; text-align:left; width:560px; } a, a:link, a:visited, a:active {color:#888888; text-decoration:none; } a, a:hover {color: #e37f7f; text-decoration:none; } /* header & footer */ #header { display:none; } #footer {background:transparent; width:100%; margin-left:-100px; text-align:center; font-family:georgia; font-size:10px; z-index:100; clear:both; } #footer a, #footer a:visited {padding:0px; color:#ffffff; font-family:georgia; font-size: 10px; font-weight:normal; } ul.navfooter li {display:inline;} li.viewing {font-family: georgia; font-size:10px; text-transform:lowercase; text-decoration:none; color:#ffffff; } /* sidebar */ #sidebar { background-color:rgba(51, 0, 0, 0.2); color: #ffffff; font-family:arial; font-size:12px; font-weight:normal; margin:0px auto 0; padding:10px; left: 48px; position:fixed; text-transform:lowercase; width:190px; } .sbarbody2 {padding:10px; } .sbarbody {padding:10px; } ul.sbarlist{ margin: 0px; padding: 0px; list-style-type: none; } .sbaritem { color:#ffffff; text-align: center; margin: 0 0 5px 0; background: #938584; } .sbaritem a {display: block; padding: 2px 2px 2px 2px; font-size: 10px; } li.sbaritem { background-color:rgba(51, 0, 0, 0.3); display:block; list-style-type:none; margin-top:2px; text-align:left; } #sidebar_linklist { list-style-type:none; padding-top:2px; text-align:left; text-transform:lowercase; } .sbarbody2 a:hover, li.sbaritem a:hover { background-color:rgba(51, 0, 0, 0.2); padding: 2px 2px 2px 2px; font-size: 10px; text-decoration:none; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; -moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px; } input, select, textarea {border: 1px solid #ededed; font: 10px georgia; color: #888888; background: #ffffff; } textarea {font: 12px georgia; padding: 3px; } dd, dl, dt, ul, li {margin: 0; padding: 0; list-style: none;} h1, h2, h3, h4 {clear: both; font-family: georgia; letter-spacing: 0.4px; font-weight: normal!important; font-size: 2em; width: 230px; padding: 10px; margin: 0 auto; } .sbaritem, .skiplinks a, a img, .year, a { -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; -moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px; } #sidebar a, #sidebar a:link, #sidebar a:visited { font-weight: lighter; color: #ffffff; font-size: 10px; text-decoration: none;} #sidebar a:hover { color: #e37f7f;} .calendar{ width:150px; font-family: georgia; font-size:12px; color:#eeeeee; } .sbarcalendar { background:transparent; text-align:center; } .sbarcalendarposts { background:transparent; text-align:center; } .sbarcalendarposts a { color:#ffffff; border-bottom: 0px solid #ffffff; padding-left:4px; padding-right:4px; padding-top:4px; padding-bottom:4px; background-color:rgba(51, 0, 0, 0.3); } .sbarcalendarposts a:hover { background-color:rgba(51, 0, 0, 0.42); } li.sbartitle {display:none;} #sidebar_summary { display:none!important; } .defaultuserpic { display:none; } .title {display:none;} .subtitle {display:none;} /* entries */ .userpic, .userpicfriends { float: right; margin: 0px -100px 0 0; background:transparent!important; border: 0px solid #eeeeee; text-align: center; } .userpic img, .userpicfriends img { -moz-border-radius: 60px; -webkit-border-radius: 60px; background: transparent!important; border: 0px solid #eeeeee; width: 80px; height: 80px; } .userpicfriends font, .userpicfriends a { background: transparent!important; color: #FFFFFF; border-bottom: none!important; } .userpicfriends br { display: block; height: 0; } .datesubject { font-family: georgia; border-bottom:1px solid #ffffff; background-color:rgba(255, 255, 255, 0.9); margin:0 0px; padding:9px; position:relative; text-align:center !important; } .date { color:#999999; font-family: arial; font-size:9px; padding:4px; text-transform:uppercase; } .subject, .subject a, .subject a:hover {border:0 none !important; color:#704848; font-family: georgia; font-size:20px; font-weight:normal; letter-spacing: 0.4px; margin:0 0 0 0; position:relative; text-transform:none; } .entry { color:#676767; background-color:rgba(255, 255, 255, 0.9); font-family:georgia; font-size:12px; line-height:1.2; text-align:justify; } .entry_text {padding: 10px; } .entry ul li { padding-left: 5px; margin-left: 15px; } .entry ol li { padding-left: 5px; margin-left: 15px; } .entry img {max-width:500px; overflow:hidden;} blockquote {padding: 3px; font-size:11px; width:400px; margin:auto; font-family: georgia; font-style: italic; letter-spacing:0px; border-left: 2px solid #ffffff; background:#transparent; color:#888888; } b {color:#704848;} i {color:#e37f7f;} /* currents bar */ .currents { margin: 10px 0 0 0; padding: 5px 4px 0 0; text-align: right; font-size: 8px; border-top: 1px solid #ffffff; font-family: arial; font-weight: lighter; color: #999999; } .ljtags { display:none; } .comments {color: #ffffff; padding: 0 10px 8px 0; text-align: right; font-size: 14px; } /* comment page */ .comments {font-family: georgia; font-size:14px; clear:both; text-align:right; text-transform:lowercase; background-color: transparent; position:relative; top:3px; center:-10px; } div.comments a, div.comments a:visited {display:inline; font-family: georgia; font-size:14px; color:#565656; background-color: transparent!important; text-transform:lowercase; text-decoration:none; } datesubjectcomment { font-size: 8px; color: #999999; text-transform: uppercase; margin: 5px 5px 10px 0; } .userpiccomment { display: block; float: left; width: 80px; height: 80px; margin: 5px 5px 5px 0; -moz-border-radius: 70px; -webkit-border-radius: 70px; margin: 8px 8px 8px 0; } .commentbox { margin: 10px 0 0 0; padding: 10px 0 0 0; background-color: transparent!important; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; } input, textarea { font: 12px Georgia; color: #ffffff !important; background: transparent; border-bottom: 1px solid #ffffff; border-right: 1px solid #ffffff; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; padding: 3px; margin: 0; } textarea.textbox { width: 100% !important; } .reply { position: relative; margin: 10px 20px 10px 20px; padding: 20px 10px 10px 10px; text-align: left; font-size: 10px; background-color: transparent!important; color: #ffffff; } .commentreply {color:#ffffff; font-size:11px; padding:8px 0; position:relative; } .commentbox { background-color: transparent!important; color:#bbbbbb; font-size:10px; margin:10px 0; padding:5px } .commentboxpartial { border-width: 0px; border-style: solid; padding: 10px; margin: 10px; background-color: transparent!important; } .skiplinks { background-color:rgba(51, 0, 0, 0.3); margin:0; border:0; color:#ffffff; font-size:8px; padding:8px; text-align:center; } li.viewing {display:none; visibility:hidden; font-size:0px;} /* tags page */ .ljtaglist {list-style-type:none; font-family: georgia; font-size:10px; color:#999999; margin-left:20px; } .ljtaglist a {color:#ffffff;} /* calendar page */ ul.year {text-align:center; padding-top:20px; padding-bottom:50px; } ul.year li {display:inline; color:#ffffff;} table.yeartable {margin-left:auto; margin-right:auto; } table.yeartable td.yeardate, table.yeartable td.yearday {border:1px solid #ffffff; color:#ffffff;} table.yeartable td.yearday {background-color:transparent; text-align:center; color:#ffffff;} td.yearmonth {border-style:none; color:#ffffff; } /* tiny icons */ .subject img[src*="icon_protected.gif"] {background-image:url(http://i52.tinypic.com/30t6vpe.gif) !important; background-repeat:no-repeat !important; height:0; padding:10px 8px 0px 0 !important; width:0; } .subject img[src*="icon_private.gif"] {background-image:url(http://i55.tinypic.com/k0q9zn.gif) !important; background-repeat:no-repeat !important; height:0; padding:12px 10px 0 0 !important; width:0; } img[src*="userinfo.gif"], img[src*="userhead"], img[src*="openid-profile.gif"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="anonymous.gif"] { background-image:url("http://i52.tinypic.com/x3jhg.gif") !important; background-repeat:no-repeat !important; height:0px; width:0px; padding:12px 12px 0px 0px !important; } img[src*="community.gif"] { background-image:url(http://i53.tinypic.com/o600h0.gif)!important; background-repeat:no-repeat !important; height:0px; width:0px; padding:12px 12px 0 0 !important; }

* layouts

Previous post Next post
Up