live view (temporary) |
image 01 |
image 02 NAME: Lolli-Lolli-Lollipop
NUMBER: 001
STYLE: Flexible Squares
BEST VIEWED IN: Firefox & Safari
CREDIT:
makethemsweatHOW TO INSTALL: Journal → Customize Journal Style → Select Theme: Flexible Squares → Custom CSS → Select 'No' first two drop down boxes → Install Coding
NOTE: No the pictures aren't from the Lollipop shoots but the colors reminded me of it. The banner is actually from a photoshoot with Arena. You can also make the layout look more clean and modern by removing the background url.
/* layout 001: lolli-lolli-lollipop
style: s2 flexible squares
stylesheet by makethemsweat@livejournal.com */
/*body*/
body { background-color: #999999; background-image:url(
http://i18.photobucket.com/albums/b138/AltieMusicIsMyLife/backgrounds/bbbg.png); color: #000000; font-family: "arial", tahoma; font-size: 10px; margin: 0px; color:#cccccc; text-align:justify; }
b{color:#ed1c24;}
i{color:#00aeef;}
u{color:#ffd800;}
s{color:#8dc63f;}
blockquote {width:350px; border-left-style:solid; border-left-width:10px; border-left-color:#ffd800; padding:2px;}
a {color:#00aeef; font-weight:bold; text-transform:uppercase; text-decoration:none; }
a:hover {color:#ed1c24; }
ul li{ list-style-type:none; display:inline; }
/*page alignment*/
#content{ width: 790px; margin-left: auto; margin-right: auto; background-color:#737373; min-height: 600px; }
#maincontent {
margin:25px 0 0 0; background-color:#737373; }
/*header header image footer*/
#header { width: 100%; padding: 15px 0px;
margin-left: auto; margin-right:auto; text-align: center; font-family: century gothic; text-transform: uppercase; font-size:25px; background-color: #8dc63f; color: #C0C0C0; background-image:url(
http://i18.photobucket.com/albums/b138/AltieMusicIsMyLife/backgrounds/grey-1.jpg); background-repeat: repeat; font-weight:bold; letter-spacing: 3px; text-shadow: 2px 2px 2px #000000; }
.headerimage { position: relative; width:790px;
height:531px; margin-left: auto; margin-right: auto; background-image: url("
http://i18.photobucket.com/albums/b138/AltieMusicIsMyLife/portfolio/arena-bigbang1.png"); background-repeat: no-repeat; }
.title { display:none; }
.subtitle{ display:none; }
#header a{ color:#8dc63f; text-decoration:none; }
#header a:hover{color:#ed1c24; }
ul.navfooter{ padding: 10px 0; margin: 0px; }
ul.navfooter li, li.viewing { display: inline;
margin: 0 5px 0 5px; }
.clearfoot { display:none; }
/*sidebar*/
#sidebar { padding-top: 15px; margin-top: 10px;
width: 220px; float: right; padding-right:10px; padding-left:10px;}
.defaultuserpic { text-align: center; margin-top:15px; }
.defaultuserpic img {border:15px solid #121212; -moz-box-shadow: 1px 1px 5px #222222; width:100px;
height:100px; }
table.calendar { margin-right: auto; margin-left: auto; width:90%; font-family: "century gothic"; font-size:10px; font-weight:bold; }
.sbarcalendar { text-align: center; background-color:#999999; color:#737373; }
.sbarcalendarposts {text-align: center; }
.sbarcalendarposts a{ color:#ffd800; text-decoration:none; }
.sbarcalendarposts a:hover {color:#00aeef; font-weight:bold;}
.sbarlist { padding-left: 0px; margin-left: 0px;
list-style: none; }
li.sbaritem { padding-left: 10px;list-style: none; margin: 0 0 1px 0; font-family:century gothic; font-size:15px; font-weight:bold; text-transform:uppercase; text-align:center; }
li.sbaritem a{ display:block;
background-color: #999999; padding:5px; color:#737373; text-decoration:none;}
li.sbartitle { display:none; }
/*entries*/
.entry { padding-left: 20px; padding-right: 20px; padding-top:30px; color:#cccccc; }
/*userpics*/
.userpic, .userpicfriends { position: relative; float: left; background-color: transparent!important; z-index: 15; text-align:center; margin: 0 10px 10px 0; }
.userpic img, .userpicfriends img{ width:70px;
height:70px; border:15px solid #121212; -moz-box-shadow: 1px 1px 5px #222222; margin-left:20px; margin-right:15px; }
.userpic a, .userpicfriends a, .userpic font, .userpicfriends font{ color:#ACDF4D; }
.subject, .subject a { color: #8dc63f; font-size:25px; text-transform:uppercase; font-family:century gothic; text-decoration:none; font-weight:bold; letter-spacing: 3px; text-shadow: 2px 2px 2px #000000; }
.date { text-transform:lowercase; font-size:7px;}
.ljtags { margin: 20px 0 0 0; font-style:italic; color: #AAAAAA; text-transform:lowercase; background-color:#transparent; }
.ljtags a {text-transform:lowercase;}
.currents { font-style:italic; color: #AAAAAA;
text-transform:lowercase; background-color:#transparent; }
.ljuser img[src*="userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat !important;
background-image: url(
http://i33.tinypic.com/2mw5b8n.gif) !important;
padding: 10px 10px 0 0 !important;
text-decoration: none; }
/*comments*/
textarea.textbox { width: 100% !important; background-color:#999999; font-family:arial; font-size:12px; }
.reply { position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; }
.replytosubject { font-weight: bold; }
.commentreply { position: relative; margin: 10px; }
.userpiccomment { position: relative; top: -30px;
left: 0px; margin: 10px 10px -20px 10px; z-index: 15; float: left; width:70px; height:70px; border:10px solid #121212; -moz-box-shadow: 1px 1px 5px #222222; }
.commentbox { padding: 10px; margin: 10px; width:100%; }
.comments { text-align:center; font-size:15px; }
.comments a {color:#ed1c24; letter-spacing: 3px; text-shadow: 2px 2px 2px #000000; }
.comments a:hover {color:#ffd800;}