[layout 002] :: Wrap Party
[Click image for bigger preview]
Info Name:Wrap Party Style: Flexible Squares Browsers:Tested in Firefox 2.0, Internet Explorer 7 (wonky in IE 6), Opera 9, Safari 2 Resolutions:800x600 and up *Probably looks horrible if used with a "Plus" account <-- Heard it looks ok with vertical ads.
Images *Please upload these to your own server or image host. Thank you.
Code /************************************************************************************ * Title: 02 - Wrap Party * * Date: 2007-01-09 * * Style: Flexible Squares (S2) * * Made by: willowtree84 * * http://community.livejournal.com/lennie_layouts/ * * * * Textures by willowtree84 (http://community.livejournal.com/lennie_graphics/) * ************************************************************************************/ /* ------------------- GENERAL ------------------- */ body { font-family: "Georgia", serif; font-size: 11px; margin: 0; text-align: center; background-color: #000; } ::-moz-selection { background: #FC6; color: #000; } a:link, a:visited, a:active { color: #F93; text-decoration: none; border-bottom: 1px #F93 dashed; } a:hover, a:focus { color: #FC6; border-bottom: 1px #FC6 solid; } blockquote { margin: 10px 25px; padding: 50px 0 0 40px; font-style: italic; letter-spacing: 1px; background: transparent url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_003/blockquote.png) 0 0 no-repeat; min-height: 65px; } code, kbd, pre, tt {font-family: monospace;} hr { color: #FC6; background-color: #FC6; border: 0; height: 1px; width: 100%; text-align: center; margin-top: 10px; margin-bottom: 0; clear: left; } /* ------------------- NAV BAR ------------------- */ #lj_controlstrip { background: none; background-color: #FC6; border: 1px solid #FC6; } #lj_controlstrip td { color: #FFF; border: 1px solid #FFF; } #lj_controlstrip_statustext {color: #FFF;} #lj_controlstrip a {color: #C60;} #lj_controlstrip_user, #lj_controlstrip_userlinks, #lj_controlstrip_login {border-right: 1px solid #FFF;} #lj_controlstrip_login td {border-bottom: 0;} /* ------------------- CONTAINERS ------------------- */ #content { width: 700px; margin: 0 auto; background: #FFF url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_003/content.png) 0 0 repeat-y; } #header { width: 700px; height: 150px; text-align: left; background: transparent url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_003/header.png) 0 0 no-repeat; } #sidebar { width: 200px; float: right; margin: 0; padding: 0; text-align: left; color: #F9F; background: transparent url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_003/sidebar.png) 0 0 no-repeat; } #maincontent { margin-right: 200px; padding: 80px 10px 0 20px; background: transparent url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_003/maincontent.png) 0 0 no-repeat; } #footer { width: 510px; text-align: center; z-index: 100; clear: both; margin: 0 auto 0 0; color: #FC6; } /* ------------------- HEADER ------------------- */ ul.navheader { padding: 20px 0 0 100px; margin: 0; text-align: left; font-size: 1.2em; list-style-type: none; } ul.navheader li {padding: 0 15px 0 15px;} ul.navheader li.view {color: #FFF;} ul.navheader li a { color: #C60; border: none; } ul.navheader li a:hover, ul.navheader li a:focus {color: #F93;} .title, .subtitle { position: relative; color: #969; } .title { top: -10px; left: 282px; font-size: 3em; width: 380px; } .subtitle{ top: -15px; left: 285px; width: 350px; } /* ------------------- SIDEBAR ------------------- */ #sidebar a {color: #C6C;} #sidebar a:hover, #sidebar a:focus {color: #FFF;} .defaultuserpic { text-align: center; display: none; } .sbarbody {padding: 0;} .sbarbody2 {padding: 0 15px 0 20px;} table.calendar { margin-right: auto; margin-left: auto; padding-right: 5px; text-align: center; } .sbarcalendar {border: 1px #F9F solid;} .sbarcalendarposts { border: 1px #F9F solid; background-color: #F9F; } #sidebar_calendar ul.sbarlist { padding-left: 0; margin-left: 0; list-style: none; } #sidebar_tags ul.sbarlist, #sidebar_linklist ul.sbarlist, #sidebar_summary ul.sbarlist { padding: 5px 0 0 20px; margin: 0; list-style: none; } #sidebar_linklist ul.sbarcontent ul.sbarlist { margin: 0; padding: 0; list-style: none; } #sidebar_tags ul li.sbaritem, #sidebar_linklist ul li.sbaritem, #sidebar_summary ul li.sbaritem { padding: 2px 20px; background: url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_003/bullet_purple.png) 0 .1em no-repeat; } #sidebar_tags ul li.sbaritem a, #sidebar_linklist ul li.sbaritem a, #sidebar_summary ul li.sbaritem a {border-bottom: 1px #C6C dashed;} #sidebar_tags ul li.sbaritem a:hover, #sidebar_linklist ul li.sbaritem a:hover, #sidebar_summary ul li.sbaritem a:hover { color: #F9F; border-bottom: 1px #F9F solid; } li.sbartitle { list-style: none; padding: 15px 0 0 0; margin: 10px 25px 0 10px; color: #FFF; text-align: right; background: transparent url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_003/separator_purple.png) top right no-repeat; } /* ------------------- MAINCONTENT ------------------- */ #content .ljuser a {border: none;} .entry { margin: 0; padding: 10px 5px; text-align: justify; font-size: 1.1em; line-height: 1.3em; } .entry ul, .entry ol { padding: 5px 0 0 15px; margin: 0; list-style: none; } .entry ul li, .entry ul li { padding: 0 0 0 20px; background: url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_003/bullet_orange.png) 0 .1em no-repeat; } .entry a img, .userpic a img, .userpicfriends a img, .Userpic a img {border: none;} .userpic, .userpicfriends { position: relative; float: right; padding: 0; margin: 0 0 5px 10px; text-align: center; z-index: 15; background-color: transparent !important; } .userpic {display: none;} /*.userpicfriends a {display: none;}*/ .datesubject { margin: 0; padding: 5px; background-color: transparent; text-align: right; color: #F93; } .date {top: 5px;} .subject { font-weight: bold; padding: 5px 0 0 0; } .datesubject a:hover, .datesubject a:focus {color: #FFF;} .ljtags { margin-top: 25px; font-weight: bold; } .ljtags a {font-weight: normal;} .currents, .ljtags {font-size: 0.9em;} .currents img {display: none;} .comments { font-size: 0.9em; text-align: right; background-color: transparent; padding: 0; margin: 0; clear: left; } /* ------------------- MAINCONTENT -- year/achive pages ------------------- */ ul.year { text-align: center; margin: 0; padding: 0; } ul.year li { display: inline; color: #FC6; } table.yeartable { margin: 25px auto 0 auto; border: 1px #FC6 solid; } table.yeartable td.yeardate, table.yeartable td.yearday { border: 1px #FC6 solid; color: #FC6; } table.yeartable td.yearday { background-color: #FC6; color: #FFF; text-align: center; } td.yearmonth { border-style: none; color: #FC6; } table.yeartable td.yeardate a {border: none;} /* ------------------- MAINCONTENT -- entry, reply pages ------------------- */ .datesubjectcomment { background-color: #FC6 !important; padding: 5px; color: #FFF; } .userpiccomment { position: relative; float: left; background-color: #FFF; padding: 2px; margin: 0 5px 5px 0; z-index: 15; border: 1px #FC6 solid; } .box { border: none; border-top: 1px #FC6 solid; padding: 10px; text-align: left; } .box font{color: #000;} .box form#qrform table { border: 1px #FC6 solid !important; margin-top: 10px; padding: 10px; } input, textarea, select, submit, button { background-color: #FFF; color: #000; border: 1px #FC6 solid; } textarea.textbox { width: 100% !important; border: 1px #FC6 solid; } submit, button {color: #FC6;} .reply{ position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; line-height: 125%; background-color: #FFF; color: #FC6; } .replytosubject { font-weight: bold; color: #FFF; } .replytoposter {color: #FFF;} .commentreply { position: relative; margin: 10px 5px; color: #000; background-color: #FFF; text-align: justify; } .commentbox { border: 1px #FC6 solid; padding: 5px; margin: 10px 0; background-color: #FFF; } .commentbox div a { border: none; } .datesubjectcomment a:hover {color: #FFF;} .commentboxpartial { border: 1px #FC6 solid; padding: 5px; margin: 10px; background-color: #FFF; } .commentinfo { background-color: #FC6; margin-top: 10px; width: 100%; } /* ------------------- FOOTER ------------------- */ ul.navfooter{ padding: 0; margin: 0; } ul.navfooter li { display: inline; margin: 0 5px 0 5px; } .clearfoot {clear: both;} /* ------------------- MISC ------------------- */ .clear {height: 15px;} #maincontent .clear, #maincontent .entry .clear {height: 0;} .skiplinks { text-align: center; padding: 10px 0; } .separator{ height: 23px; width: 209px; margin: 0 0 5px auto; background: url(http://img.photobucket.com/albums/v286/willowtree84/lj_layout/shared_layouts/layout_003/separator_orange.png) 0 0 no-repeat; } * html .separator {margin: 0 auto;}
Notes *If you have a really long title/subtitle and it ends up showing on 2+ lines and messing the look of it all, just tell me and I'll customize that for you so it looks ok. If you find something wonky or you have any problems with this layout, please let me know.