Layout #24 - Sunny Side Wash
TITLE: Sunny Side Wash
STYLE: s2 Flexible Squares
ACCOUNT TYPES: Compatible with all.
BROWSER: Mozilla Firefox 3.6
Credit barubaron with use.
→ LIVE VIEW ←
Details & Notes:
The layout is best viewed in Mozilla Firefox (sorry, IE/Opera/ect users!!). It takes advantage of the recent Firefox compatibilities with gradients and smooth borders. (Of course, you can easily edit this layout to fit your browser needs, hehehe...) I recommend that your ad placement be set for 'between entries' -- when the ads are placed on the sidebar, they extend the layout which can cause visual impairment. I also included the CSS for custom tiny icons. Instead of LJ's default 'locked' icon, the golden friends group icon, or the default user icons, you can substitute your own tiny icons. Just remember that the first two paddings -- padding: 16px 16px 0px 0px; -- are the HEIGHT and WIDTH of the icon. Credit for tiny icons goes to mercscilla@deviantART.
INSTALLATION INSTRUCTIONS. PLEASE READ THEM.
/* Title: 'Sunny Side Wash' */
/* Created/Modified: October 2010 */
/* S2 Layout: Flexible Squares */
/* Account Types: Paid or Free */
/* Made by barubaron.livejournal.com */
/* Best viewed in Mozilla Firefox 3.6 */
/* SPONSORED ACCOUNTS, IT IS RECOMMENDED
TO HAVE YOUR AD PLACEMENT SET FOR BETWEEN ENTRIES. */
/* LAYOUT INCLUDES CUSTOMIZED COMMENTS PAGE. */
/* CONTENT, BACKGROUND STUFF */
body {
background: -moz-linear-gradient(top, #E5E5E5, #FFFFFF), url('') repeat-x;
background-attachment: fixed;
text-align: justify;
color: #A0A0A0;
letter-spacing: 0px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 12px;
padding: 0px;
margin: 0px 0 0px 0;
line-height: 150%;
}
a, a:link, a:visited {
color: #C4C4C4;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
text-decoration: none;
}
a:hover {
cursor: help;
color: #EE8A80;
text-decoration: none;
}
blockquote {
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
color: #BCBCBC;
font-size: 16px;
background-color: #FFFFFF;
border: 1px #E9E9E9 dashed;
padding: 12px;
}
code, kbd, pre, tt, b, i {
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-color: #FFFFFF;
}
#content {
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
background-color: #transparent;
padding: 0px 0 20px 0;
border: 0px solid #E9E9E9;
}
#maincontent {
padding: 0px 0px 0px 0px;
margin: 10px 0px 0px 240px;
background-color: #transparent;
}
#sidebar {
padding: 0px 5px 0px 5px;
margin: 10px 10px 0px 0px;
background-color: #FFFFFF;
font-size: 10px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
color: #A0A0A0;
width: 220px;
float: left;
text-align: left;
-moz-border-radius: 5.5%;
border-bottom: 2px solid #E2EA83;
}
#header {
padding: 10px 10px 10px 20px;
margin-bottom: 0px;
margin-top: 0px;
text-align: left;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 12px;
text-transform: lowercase;
letter-spacing: 0px;
background-color: #A0A0A0;
color: #FFFFFF;
-moz-border-radius-bottomleft: 2.5%;
-moz-border-radius-bottomright: 2.5%;
border-bottom: 2px solid #E2EA83;
}
#footer {
padding: 10px 10px 10px 250px;
text-align: center;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 16px;
text-transform: lowercase;
font-weight: normal;
margin: -15px 0px 0px 0px;
letter-spacing: 0px;
background-color: #transparent;
z-index: 100;
clear: both;
width: auto;
}
/* HEADER STUFF - TITLE, SUBTITLE */
div#header a, div#header a:link, div#header a:visited {
padding: 5px 5px 5px 0px;
margin: 0px;
background-color: #transparent;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
color: #FFFFFF;
border-bottom: 0px solid #E1E1E1;
}
div#header a:hover {
padding: 5px 5px 5px 0px;
margin: 0px;
background-color: #transparent;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
color: #FFFFFF;
border-bottom: 0px solid #E1E1E1;
}
ul.navheader {
padding: 0px;
margin: 0px;
display: inline;
}
ul.navheader li {
display: inline;
padding: 0 5px 0 5px;
}
.title, .subtitle {
display: none;
}
/* FOOTER STUFF */
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
div#footer a, div#footer a:link, div#footer a:visited {
padding: 10px 0px 10px 0px;
margin: 0px;
background-color: #transparent !important;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
color: #BBBBBB;
}
div#footer a:hover {
padding: 10px 0px 10px 0px;
margin: 0px;
background-color: #transparent;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
color: #C4C4C4;
}
.clearfoot {
display: none;
}
#footer .viewing {
display:none;
}
/* SIDEBAR STUFF */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #C4C4C4;
text-transform: lowercase;
padding: 3px;
font-size: 10px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
}
div#sidebar a:hover {
color: #EE8A80;
text-transform: lowercase;
text-decoration: none;
padding: 3px;
font-size: 10px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
}
.defaultuserpic {
text-align: center;
padding-top:20px;
padding-bottom: 10px;
}
.defaultuserpic img{
width: 80px;
height: 80px;
padding: 10px;
background-color: #D2D2D2;
-moz-border-radius: 4.5%;
border-bottom: 2px solid #E2EA83;
}
.sbarheader {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.sbarbody {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background-color: #transparent;
}
.sbarbody2 {
padding: 10px 10px 0px 10px;
margin: -10px 0px -10px 0px;
background-color: #transparent;
}
#sidebar_summary li.sbaritem {
margin: 0 10px;
padding: 3px 0;
border-left: 0px;
border-right: 0px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
padding: 0px;
border: 0px;
}
.sbarcalendar {
border: 1px #E9E9E9 solid;
text-align: center;
font-family: "tahoma" Helvetica, sans-serif;
font-size: 11px;
padding: 0px;
}
.sbarcalendarposts {
border: 1px #E9E9E9 solid;
background-color: #transparent;
text-align: center;
font-family: "tahoma" Helvetica, sans-serif;
font-size: 11px;
padding: 0px;
}
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
display: block;
font-color: #787878;
font-style: none;
text-align: left;
font-size: 10px;
margin: 0px 3px 0px 3px;
padding: 3px 0px 3px 0px;
background-color: #transparent;
border-bottom: 1px solid #E9E9E9 !important;
}
li.sbaritem:hover {
display: block;
text-align: left;
font-size: 10px;
font-style: none;
margin: 0px 3px 0px 3px;
padding: 3px 0px 3px 0px;
background-color: #transparent;
border-bottom: 1px solid #E9E9E9 !important;
}
li.sbartitle {
color: #D3BB71;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 5px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 16px;
font-style: none;
text-transform: lowercase;
letter-spacing: 0px;
border-bottom: 1px solid #E9E9E9;
background-color: #transparent;
}
/* MAINCONTENT STUFF */
.subcontent {
padding: 0px 0px 20px 0px;
margin: 0px 0px 0px 0px;
font-family: "trebucet ms", sans-serif;
font-size: 10px;
background: #FFFFFF;
color: #A0A0A0;
margin-left: auto;
text-align: justify;
-moz-border-radius: 2.5%;
border-bottom: 2px solid #E2EA83;
}
.entry {
margin: 0px 0px 0px 5px;
padding: 5px 10px 0px 10px;
background-color: #transparent;
color: #A0A0A0;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 12px;
text-align: justify;
-moz-border-radius: 2.5%;
}
.entry ul li
{
padding-left: 5px;
margin-left: 16px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 16px;
}
.userpic {
font-size: 0px
position: relative;
float: right;
background-color: #D2D2D2;
padding: 10px;
margin: 0px -110px 10px 0px;
z-index: 15;
-moz-border-radius: 4.5%;
border-bottom: 2px solid #E2EA83;
}
.userpic img, .userpicfriends img {
height: 80px;
width: 80px;
}
.userpicfriends {
font-color: #EE8A80;
font-size: 9px;
position: relative;
float: right;
margin: 0px -110px 10px 0px;
text-align: center;
background-color: #D2D2D2 !important;
padding: 10px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
z-index: 15;
-moz-border-radius: 2.5%;
border-bottom: 2px solid #E2EA83;
}
.date {
margin: 0px 5px 0px 0px;
padding: 8px 0px 0px 0px;
text-transform: lowercase;
line-height: 120%;
letter-spacing: 2px;
top: 5px;
color: #C3C3C3;
font-style: none;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 8px;
background-color: #transparent;
}
.subject {
margin: -5px 0px 2px 0px;
padding: 3px 0 3px 0;
text-transform: lowercase;
color: #6F9DAE;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
letter-spacing: 0px;
background-color: #transparent;
font-size: 16px;
}
.subject a, .subject a:link, .subject a:visited {
color: #D3BB71;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
}
.subject a:hover {
color: #D3BB71;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
}
.datesubject {
background-color: #transparent;
padding: 5px;
margin: 0px 5px 5px 10px;
border-bottom: 0px #E9E9E9 dashed;
text-align: left;
}
.currents {
display: block;
text-align: left;
text-transform: lowercase;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 9px;
padding: 10px 0px 10px 5px;
margin: 0px 0 -40px 0;
}
.currents strong, .currentmood strong, .currentmusic strong, .ljtags strong {
font-weight: lighter;
text-transform: lowercase;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 9px;
}
.currentmood img {
display: none;
float: right;
margin: -40px 0px 5px 0px;
padding: 5px;
}
.currentlocation{
background: url() no-repeat left center;
padding: 0px 0px 0px 0px;
margin: 0;
}
.currentmusic{
background-color: #transparent !important;
padding: 0px 0px 0px 0px;
margin: 0;
}
.currentmood {
background-color: #transparent !important;
padding: 0px 0px 0px 0px;
margin: 0;
}
.comments {
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 12px;
text-align: right;
color: #DEDEDE;
text-transform: lowercase;
background-color: #transparent !important;
padding: 5px 10px 4px 0px;
margin: 20px -10px -15px 0px;
top: 0px;
position: relative;
}
div.comments a, div.comments a:link, div.comments a:visited{
padding: 5px;
color: #C4C4C4;
text-decoration: none;
font-weight: none;
font-size: 12px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
}
div.comments a:hover {
padding: 5px;
color: #B8B8B8;
text-decoration: none;
font-weight: none;
font-size: 12px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
}
/* TAGS, TAGS PAGE */
H2{
color: #A0A0A0;
text-decoration: none;
font-weight: lighter;
background-color: #transparent;
text-align: left;
padding: 5px;
margin: 5px 0px 0px 0px;
text-transform: lowercase;
font-style: none;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 16px;
border-bottom: 0px solid #E9E9E9;
}
.ljtags {
text-align: left;
font-weight: none;
text-transform: lowercase;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 9px;
margin: 30px 0px -43px 0px;
padding: 0px 0px 0px 5px;
background:#transparent;
background: url() no-repeat left center;
border-bottom: 0px dashed #E9E9E9;
}
.ljtags a {
text-align: left;
font-weight: none;
text-transform: lowercase;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 9px;
color: #C4C4C4 !important;
}
ul.ljtaglist{
background-color: #FFFFFF;
list-style: none;
padding: 10px 10px 10px 10px;
width: auto;
text-align: left;
margin-left: auto;
margin-right: auto;
-moz-border-radius: 2.5%;
border-bottom: 2px solid #E2EA83;
}
/* REPLY, ENTRY STUFF */
.datesubjectcomment {
background-color: #A0A0A0;
padding: 5px;
margin: 0px;
color: #FFFFFF;
}
.userpiccomment {
position: relative;
background-color: #FFFFFF;
top: auto;
left: auto;
padding: 10px;
margin: -15px 5px 0px -15px;
z-index: 15;
float: left;
}
.box {
margin: 5px 0px 5px 0px;
background-color: #FFFFFF;
padding: 10px;
clear: right !important;
-moz-border-radius: 2.5%;
border-bottom: 2px solid #E2EA83;
}
input, textarea {
background-color: #FFFFFF;
color: #A0A0A0;
border: 1px #E9E9E9 solid;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 12px;
line-height: 125%;
background-color: #FFFFFF;
color: #A0A0A0;
}
.replytosubject {
font-weight: bold;
margin: 10px;
padding: 10px;
}
.commentreply {
padding: 10px;
position: relative;
margin: 5px;
font-size: 12px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
color: #A0A0A0;
}
.commentbox {
border: 0px #E9E9E9 solid !important;
padding: 10px;
margin: 5px 0px 5px 0px;
background-color: #FFFFFF;
background-image: url('');
background-repeat: repeat-y;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #626262;
}
.datesubjectcomment a:hover {
color: #FFFFFF;
}
.commentboxpartial {
border-color: #E9E9E9 !important;
border-top: 1px;
border-left: 1px;
border-right: 1px;
border-bottom: 1px;
border-style: solid;
padding: 5px;
margin: 5px;
background-color: #FFFFFF;
}
.commentinfo {
background-color: #FFFFFF;
margin-top: 5px;
width: 100%;
}
.skiplinks {
text-align: center;
text-transform: lowercase;
margin-top: 35px;
}
/* YEAR & ARCHIVE STUFF */
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border: 1px #E9E9E9 solid;
}
table.yeartable td.yearday {
background-color: #E9E9E9;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/* MISC STUFF, OUT OF PLACE
TINY ICONS BY mercscilla@deviantART */
.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px !important;
margin: 2px 2px 0 0;
background: url(http://i56.tinypic.com/qoiqee.png);
}
.subject img[src="http://l-stat.livejournal.com/img/icon_groups.gif"]{
width: 0;
height: 0;
margin: 2px 2px 0 0;
padding: 16px 16px 0px 0px !important;
background: url(http://i56.tinypic.com/qoiqee.png);
}
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0 0 !important;
margin: 2px 2px 0 0;
background: url(http://i53.tinypic.com/2r3yphc.png);
}
.ljuser img[src="http://l-stat.livejournal.com/img/user_ontd.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0 0 !important;
margin: 2px 2px 0 0;
background: url(http://i53.tinypic.com/2r3yphc.png);
}
.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0 0 !important;
margin: 2px 2px 0 0;
background: url(http://i53.tinypic.com/2r3yphc.png);
}
.clear {
height: 16px;
}
.separator{
height: 10px;
}
Frequently Asked Questions
F.A.Q. OFFICIAL POST
How do I add a header?
Take the following code:
.headerimage {
position: relative;
width: 500px;
height: 220px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
margin-top: 0px;
background-image: url("LINK TO YOUR PICTURE HERE");
background-repeat: no-repeat;
}
Modify the width and height to that of your image. Paste the modified code in the layout css. You'll need to upload your image to the Internet. I recommend using tinypic.com or imageshack.us.
Can I edit the CSS (colors, images, ect)?
Yes, of course. Just make sure you still credit barubaron.
STYLE: s2 Flexible Squares
ACCOUNT TYPES: Compatible with all.
BROWSER: Mozilla Firefox 3.6
Credit barubaron with use.
→ LIVE VIEW ←
Details & Notes:
The layout is best viewed in Mozilla Firefox (sorry, IE/Opera/ect users!!). It takes advantage of the recent Firefox compatibilities with gradients and smooth borders. (Of course, you can easily edit this layout to fit your browser needs, hehehe...) I recommend that your ad placement be set for 'between entries' -- when the ads are placed on the sidebar, they extend the layout which can cause visual impairment. I also included the CSS for custom tiny icons. Instead of LJ's default 'locked' icon, the golden friends group icon, or the default user icons, you can substitute your own tiny icons. Just remember that the first two paddings -- padding: 16px 16px 0px 0px; -- are the HEIGHT and WIDTH of the icon. Credit for tiny icons goes to mercscilla@deviantART.
INSTALLATION INSTRUCTIONS. PLEASE READ THEM.
/* Title: 'Sunny Side Wash' */
/* Created/Modified: October 2010 */
/* S2 Layout: Flexible Squares */
/* Account Types: Paid or Free */
/* Made by barubaron.livejournal.com */
/* Best viewed in Mozilla Firefox 3.6 */
/* SPONSORED ACCOUNTS, IT IS RECOMMENDED
TO HAVE YOUR AD PLACEMENT SET FOR BETWEEN ENTRIES. */
/* LAYOUT INCLUDES CUSTOMIZED COMMENTS PAGE. */
/* CONTENT, BACKGROUND STUFF */
body {
background: -moz-linear-gradient(top, #E5E5E5, #FFFFFF), url('') repeat-x;
background-attachment: fixed;
text-align: justify;
color: #A0A0A0;
letter-spacing: 0px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 12px;
padding: 0px;
margin: 0px 0 0px 0;
line-height: 150%;
}
a, a:link, a:visited {
color: #C4C4C4;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
text-decoration: none;
}
a:hover {
cursor: help;
color: #EE8A80;
text-decoration: none;
}
blockquote {
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
color: #BCBCBC;
font-size: 16px;
background-color: #FFFFFF;
border: 1px #E9E9E9 dashed;
padding: 12px;
}
code, kbd, pre, tt, b, i {
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-color: #FFFFFF;
}
#content {
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
background-color: #transparent;
padding: 0px 0 20px 0;
border: 0px solid #E9E9E9;
}
#maincontent {
padding: 0px 0px 0px 0px;
margin: 10px 0px 0px 240px;
background-color: #transparent;
}
#sidebar {
padding: 0px 5px 0px 5px;
margin: 10px 10px 0px 0px;
background-color: #FFFFFF;
font-size: 10px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
color: #A0A0A0;
width: 220px;
float: left;
text-align: left;
-moz-border-radius: 5.5%;
border-bottom: 2px solid #E2EA83;
}
#header {
padding: 10px 10px 10px 20px;
margin-bottom: 0px;
margin-top: 0px;
text-align: left;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 12px;
text-transform: lowercase;
letter-spacing: 0px;
background-color: #A0A0A0;
color: #FFFFFF;
-moz-border-radius-bottomleft: 2.5%;
-moz-border-radius-bottomright: 2.5%;
border-bottom: 2px solid #E2EA83;
}
#footer {
padding: 10px 10px 10px 250px;
text-align: center;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 16px;
text-transform: lowercase;
font-weight: normal;
margin: -15px 0px 0px 0px;
letter-spacing: 0px;
background-color: #transparent;
z-index: 100;
clear: both;
width: auto;
}
/* HEADER STUFF - TITLE, SUBTITLE */
div#header a, div#header a:link, div#header a:visited {
padding: 5px 5px 5px 0px;
margin: 0px;
background-color: #transparent;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
color: #FFFFFF;
border-bottom: 0px solid #E1E1E1;
}
div#header a:hover {
padding: 5px 5px 5px 0px;
margin: 0px;
background-color: #transparent;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
color: #FFFFFF;
border-bottom: 0px solid #E1E1E1;
}
ul.navheader {
padding: 0px;
margin: 0px;
display: inline;
}
ul.navheader li {
display: inline;
padding: 0 5px 0 5px;
}
.title, .subtitle {
display: none;
}
/* FOOTER STUFF */
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
div#footer a, div#footer a:link, div#footer a:visited {
padding: 10px 0px 10px 0px;
margin: 0px;
background-color: #transparent !important;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
color: #BBBBBB;
}
div#footer a:hover {
padding: 10px 0px 10px 0px;
margin: 0px;
background-color: #transparent;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
color: #C4C4C4;
}
.clearfoot {
display: none;
}
#footer .viewing {
display:none;
}
/* SIDEBAR STUFF */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #C4C4C4;
text-transform: lowercase;
padding: 3px;
font-size: 10px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
}
div#sidebar a:hover {
color: #EE8A80;
text-transform: lowercase;
text-decoration: none;
padding: 3px;
font-size: 10px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
}
.defaultuserpic {
text-align: center;
padding-top:20px;
padding-bottom: 10px;
}
.defaultuserpic img{
width: 80px;
height: 80px;
padding: 10px;
background-color: #D2D2D2;
-moz-border-radius: 4.5%;
border-bottom: 2px solid #E2EA83;
}
.sbarheader {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.sbarbody {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background-color: #transparent;
}
.sbarbody2 {
padding: 10px 10px 0px 10px;
margin: -10px 0px -10px 0px;
background-color: #transparent;
}
#sidebar_summary li.sbaritem {
margin: 0 10px;
padding: 3px 0;
border-left: 0px;
border-right: 0px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
padding: 0px;
border: 0px;
}
.sbarcalendar {
border: 1px #E9E9E9 solid;
text-align: center;
font-family: "tahoma" Helvetica, sans-serif;
font-size: 11px;
padding: 0px;
}
.sbarcalendarposts {
border: 1px #E9E9E9 solid;
background-color: #transparent;
text-align: center;
font-family: "tahoma" Helvetica, sans-serif;
font-size: 11px;
padding: 0px;
}
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
display: block;
font-color: #787878;
font-style: none;
text-align: left;
font-size: 10px;
margin: 0px 3px 0px 3px;
padding: 3px 0px 3px 0px;
background-color: #transparent;
border-bottom: 1px solid #E9E9E9 !important;
}
li.sbaritem:hover {
display: block;
text-align: left;
font-size: 10px;
font-style: none;
margin: 0px 3px 0px 3px;
padding: 3px 0px 3px 0px;
background-color: #transparent;
border-bottom: 1px solid #E9E9E9 !important;
}
li.sbartitle {
color: #D3BB71;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 5px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 16px;
font-style: none;
text-transform: lowercase;
letter-spacing: 0px;
border-bottom: 1px solid #E9E9E9;
background-color: #transparent;
}
/* MAINCONTENT STUFF */
.subcontent {
padding: 0px 0px 20px 0px;
margin: 0px 0px 0px 0px;
font-family: "trebucet ms", sans-serif;
font-size: 10px;
background: #FFFFFF;
color: #A0A0A0;
margin-left: auto;
text-align: justify;
-moz-border-radius: 2.5%;
border-bottom: 2px solid #E2EA83;
}
.entry {
margin: 0px 0px 0px 5px;
padding: 5px 10px 0px 10px;
background-color: #transparent;
color: #A0A0A0;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 12px;
text-align: justify;
-moz-border-radius: 2.5%;
}
.entry ul li
{
padding-left: 5px;
margin-left: 16px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 16px;
}
.userpic {
font-size: 0px
position: relative;
float: right;
background-color: #D2D2D2;
padding: 10px;
margin: 0px -110px 10px 0px;
z-index: 15;
-moz-border-radius: 4.5%;
border-bottom: 2px solid #E2EA83;
}
.userpic img, .userpicfriends img {
height: 80px;
width: 80px;
}
.userpicfriends {
font-color: #EE8A80;
font-size: 9px;
position: relative;
float: right;
margin: 0px -110px 10px 0px;
text-align: center;
background-color: #D2D2D2 !important;
padding: 10px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
z-index: 15;
-moz-border-radius: 2.5%;
border-bottom: 2px solid #E2EA83;
}
.date {
margin: 0px 5px 0px 0px;
padding: 8px 0px 0px 0px;
text-transform: lowercase;
line-height: 120%;
letter-spacing: 2px;
top: 5px;
color: #C3C3C3;
font-style: none;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 8px;
background-color: #transparent;
}
.subject {
margin: -5px 0px 2px 0px;
padding: 3px 0 3px 0;
text-transform: lowercase;
color: #6F9DAE;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
letter-spacing: 0px;
background-color: #transparent;
font-size: 16px;
}
.subject a, .subject a:link, .subject a:visited {
color: #D3BB71;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
}
.subject a:hover {
color: #D3BB71;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
}
.datesubject {
background-color: #transparent;
padding: 5px;
margin: 0px 5px 5px 10px;
border-bottom: 0px #E9E9E9 dashed;
text-align: left;
}
.currents {
display: block;
text-align: left;
text-transform: lowercase;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 9px;
padding: 10px 0px 10px 5px;
margin: 0px 0 -40px 0;
}
.currents strong, .currentmood strong, .currentmusic strong, .ljtags strong {
font-weight: lighter;
text-transform: lowercase;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 9px;
}
.currentmood img {
display: none;
float: right;
margin: -40px 0px 5px 0px;
padding: 5px;
}
.currentlocation{
background: url() no-repeat left center;
padding: 0px 0px 0px 0px;
margin: 0;
}
.currentmusic{
background-color: #transparent !important;
padding: 0px 0px 0px 0px;
margin: 0;
}
.currentmood {
background-color: #transparent !important;
padding: 0px 0px 0px 0px;
margin: 0;
}
.comments {
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 12px;
text-align: right;
color: #DEDEDE;
text-transform: lowercase;
background-color: #transparent !important;
padding: 5px 10px 4px 0px;
margin: 20px -10px -15px 0px;
top: 0px;
position: relative;
}
div.comments a, div.comments a:link, div.comments a:visited{
padding: 5px;
color: #C4C4C4;
text-decoration: none;
font-weight: none;
font-size: 12px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
}
div.comments a:hover {
padding: 5px;
color: #B8B8B8;
text-decoration: none;
font-weight: none;
font-size: 12px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
}
/* TAGS, TAGS PAGE */
H2{
color: #A0A0A0;
text-decoration: none;
font-weight: lighter;
background-color: #transparent;
text-align: left;
padding: 5px;
margin: 5px 0px 0px 0px;
text-transform: lowercase;
font-style: none;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 16px;
border-bottom: 0px solid #E9E9E9;
}
.ljtags {
text-align: left;
font-weight: none;
text-transform: lowercase;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 9px;
margin: 30px 0px -43px 0px;
padding: 0px 0px 0px 5px;
background:#transparent;
background: url() no-repeat left center;
border-bottom: 0px dashed #E9E9E9;
}
.ljtags a {
text-align: left;
font-weight: none;
text-transform: lowercase;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 9px;
color: #C4C4C4 !important;
}
ul.ljtaglist{
background-color: #FFFFFF;
list-style: none;
padding: 10px 10px 10px 10px;
width: auto;
text-align: left;
margin-left: auto;
margin-right: auto;
-moz-border-radius: 2.5%;
border-bottom: 2px solid #E2EA83;
}
/* REPLY, ENTRY STUFF */
.datesubjectcomment {
background-color: #A0A0A0;
padding: 5px;
margin: 0px;
color: #FFFFFF;
}
.userpiccomment {
position: relative;
background-color: #FFFFFF;
top: auto;
left: auto;
padding: 10px;
margin: -15px 5px 0px -15px;
z-index: 15;
float: left;
}
.box {
margin: 5px 0px 5px 0px;
background-color: #FFFFFF;
padding: 10px;
clear: right !important;
-moz-border-radius: 2.5%;
border-bottom: 2px solid #E2EA83;
}
input, textarea {
background-color: #FFFFFF;
color: #A0A0A0;
border: 1px #E9E9E9 solid;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
font-size: 12px;
line-height: 125%;
background-color: #FFFFFF;
color: #A0A0A0;
}
.replytosubject {
font-weight: bold;
margin: 10px;
padding: 10px;
}
.commentreply {
padding: 10px;
position: relative;
margin: 5px;
font-size: 12px;
font-family: Arial, Century Gothic, Verdana, Tahoma, sans-serif;
color: #A0A0A0;
}
.commentbox {
border: 0px #E9E9E9 solid !important;
padding: 10px;
margin: 5px 0px 5px 0px;
background-color: #FFFFFF;
background-image: url('');
background-repeat: repeat-y;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #626262;
}
.datesubjectcomment a:hover {
color: #FFFFFF;
}
.commentboxpartial {
border-color: #E9E9E9 !important;
border-top: 1px;
border-left: 1px;
border-right: 1px;
border-bottom: 1px;
border-style: solid;
padding: 5px;
margin: 5px;
background-color: #FFFFFF;
}
.commentinfo {
background-color: #FFFFFF;
margin-top: 5px;
width: 100%;
}
.skiplinks {
text-align: center;
text-transform: lowercase;
margin-top: 35px;
}
/* YEAR & ARCHIVE STUFF */
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border: 1px #E9E9E9 solid;
}
table.yeartable td.yearday {
background-color: #E9E9E9;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/* MISC STUFF, OUT OF PLACE
TINY ICONS BY mercscilla@deviantART */
.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px !important;
margin: 2px 2px 0 0;
background: url(http://i56.tinypic.com/qoiqee.png);
;){kind=link}
}
.subject img[src="http://l-stat.livejournal.com/img/icon_groups.gif"]{
width: 0;
height: 0;
margin: 2px 2px 0 0;
padding: 16px 16px 0px 0px !important;
background: url(http://i56.tinypic.com/qoiqee.png);
}
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0 0 !important;
margin: 2px 2px 0 0;
background: url(http://i53.tinypic.com/2r3yphc.png);
;){kind=link}
}
.ljuser img[src="http://l-stat.livejournal.com/img/user_ontd.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0 0 !important;
margin: 2px 2px 0 0;
background: url(http://i53.tinypic.com/2r3yphc.png);
}
.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0 0 !important;
margin: 2px 2px 0 0;
background: url(http://i53.tinypic.com/2r3yphc.png);
}
.clear {
height: 16px;
}
.separator{
height: 10px;
}
Frequently Asked Questions
F.A.Q. OFFICIAL POST
How do I add a header?
Take the following code:
.headerimage {
position: relative;
width: 500px;
height: 220px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
margin-top: 0px;
background-image: url("LINK TO YOUR PICTURE HERE");
background-repeat: no-repeat;
}
Modify the width and height to that of your image. Paste the modified code in the layout css. You'll need to upload your image to the Internet. I recommend using tinypic.com or imageshack.us.
Can I edit the CSS (colors, images, ect)?
Yes, of course. Just make sure you still credit barubaron.