(layout) ∞ garfield
live // image
(name) garfield
(style) flexi squares
live // image
/* ----------------------------------------
(name): garfield
(maker): traincar @ invicted
(icons): pinvoke & damnicons
---------------------------------------- */
body {
background: #fff;
text-align: justify;
color: #555;
font: normal 8pt trebuchet ms;
line-height: 18px;
margin: 20px 0 20px 0;}
#maincontent {
margin-top: 15px;
background-color: transparent;}
#content {
width: 650px;
margin-left: auto;
margin-right: auto;
background-color: transparent;
padding: 15px;}
blockquote {
background: #f4f4f4;
text-align: left;
border: 1px solid #EDEAE3;
padding: 5px;
color: #333;
margin: 0;}
code, kbd, pre, tt {
font-family: courier new;
font-size: 8pt;}
strong {
color: #333;
font-weight: normal;}
a, a:link, a:visited, a:hover {
color: #333;
text-transform: lowercase;
text-decoration: none;
cursor: default;}
h2, .title, .subtitle, li.sbartitle, .defaultuserpic, .ljtags, .currents strong, .currentmood strong, .currentmusic .currentlocation {
display: none;}
/*------ SIDEBAR ------*/
#sidebar {
margin-top: 16px;
float: right;
width: 180px;
padding: 5px;
background: #fff;
font: normal arial 7pt;
text-align: justify;}
#sidebar a, #sidebar a:link, #sidebar a:visited {
font-weight: normal;
font-size: 8pt;
text-decoration: none;}
#sidebar_tags {
border-top: 5px solid #fff;}
.sbarheader, .sbarbody, .sbarbody2 {
padding: 0px 5px 0px 5px;}
.sbarbody2 {
color: #888;
background: #34302d;
padding: 5px;
border-bottom: 5px solid #fff;}
.sbarbody {
background: #f8f8f8;
padding: 5px;}
table.calendar {
margin-right: auto;
margin-left: auto;}
.sbarcalendar {
font-size: 9pt;
border: none;
text-align: right;
border: 1px solid #fff;}
.sbarcalendarposts {
background-color: #EDEAE3;
border: 1px solid #fff;
text-align: right;
padding: 4px;}
.sbarcalendarposts:hover {
color: #f8f8f8 !important;
background: #34302D;}
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;}
li.sbaritem {
padding: 3px;
margin-bottom: 3px;
list-style: none;}
li.sbaritem:hover {
background: #EDEAE3;}
/*------ HEADER & FOOTER ------*/
#header {background: #34302d;
font-family: arial;
width: 98%;
padding: 5px;
text-transform: lowercase;
text-align: left;
font-size: 8pt;
color: #EDEAE3;
margin-bottom: -15px;}
div#header a, div#header a:link, div#header a:visited {
margin-bottom: -12px;
color: #555;}
div#header a:hover {
color: #EDEAE3;}
div#footer a, div#footer a:link, div#footer a:visited {
color: #EDEAE3;
margin-bottom: 12px;}
#footer {
width: 98% !important;
text-align: left;
color: #EDEAE3;
padding: 5px;
background: #34302D;
margin-top: -20px;
clear: both;}
ul.navheader, ul.navfooter {
padding: 0px;
margin: 0px;}
ul.navheader li, ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;}
#footer .viewing {
display:none !important;}
.clearfoot {
clear: both;}
/*------ ENTRY ------*/
.entry img {
max-width: 410px;}
.entry {
width: 420px;
padding-left: 10px;
padding-right: 10px;
background-color: #f8f8f8;
text-align: justify;}
.entry_text {
background: #transparent !important;}
.entry ul li, .entry ol li {
padding-left: 5px;
margin-left: 15px;}
.subcontent {}
.ljcut-link {
font-weight: lighter;}
.userpicfriends a font, .userpic a font {
color: #aaa;}
.userpic, .userpicfriends {
text-align: center;
color: #aaa !important;
float: left;
position: inline;
margin: 5px 5px -1px 5px;
background-color: #fff !important;
padding: 5px;
border: 1px solid #EDEAE3;}
.userpic img, .userpicfriends img {
width: 75px;
height: 75px;}
.date {
padding: 4px;
text-transform: lowercase;
color: #fff;
font: normal 7pt arial;
margin-bottom: -5px;
text-transform: uppercase;
letter-spacing: 1px;
width: 100%;}
.subject, .subject a, .subject a:link, .subject a:visited {
line-height: 5px;
width: 100%;
font: normal 7pt arial;
text-transform: uppercase;
letter-spacing: 1px;}
.subject a:hover {
font-style: none;
font-weight: normal;}
.datesubject {
width: 430px;
padding: 5px;
background: #EDEAE3;}
/*------ CURRENTS ------*/
.currents {
width: 96%;
background: #f4f4f4;
border: 1px solid #EDEAE3;
padding: 4px;}
.currents, .currentmood, .currentmusic, .currentlocation {
padding-left: 10px;
color: #888;
font-weight: normal;
text-transform: lowercase;}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #333;
text-transform: lowercase;
font-weight: normal;}
.currentlocation a:hover {
color: #333;
text-transform: lowercase;}
.currentmusic {
background: url("http://cloud-shade.org/photos/music3.png") no-repeat left;
padding-left: 12px;}
.currentlocation {
background: url("http://cloud-shade.org/photos/home3.png") no-repeat left;
padding-left: 12px;}
.currentmood {
background: url("http://cloud-shade.org/photos/heart.png") no-repeat left;
padding-left: 12px;}
.meta-mood-img {
padding-right: 4px;}
/*------ COMMENTS PAGE ------*/
.comments {
padding: 5px;
text-align: left;
color: transparent;
margin-top: 2px;
border-top: 5px solid #fff;
background-color: #EDEAE3;}
div.comments a, div.comments a:link, div.comments a:visited {
color: #888;
background: #f8f8f8;
font-size: 9pt;
padding: 5px 10px 5px 10px;}
div.comments a:hover {
background: #fff;}
.userpiccomment {
position: relative;
background-color: #fff;
z-index: 15;
width: 70px;
height: 70px;
float: left;
margin: 5px 5px -1px 5px;
padding: 5px;
border: 1px solid #efefef;}
.userpiccomment img {
width: 65px !important;
height: 65px !important;}
.box {
text-align: left;
clear: left;
width: 100%;}
.box form>table {
margin-left: -16px !important;}
.datesubjectcomment {
text-align: left;
color: #aaa;
text-transform: lowercase;}
.datesubjectcomment strong {
font-weight: normal;
color: #34302d !important;
font-size: 9pt;}
input, textarea, select {
font: normal 8.5pt trebuchet ms;
background-color: #f8f8f8;
border: 2px solid #EDEAE3;}
textarea.textbox {
border: 2px solid #EDEAE3 !important;
width: 85% !important}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
line-height: 125%;
background-color: #EDEAE3;}
.replytosubject {
font-weight: normal;}
.commentreply {
position: relative;
margin: 10px;}
.commentbox {
border: 2px solid #EDEAE3 !important;
width: 420px;
text-align: justify;
padding: 10px;
margin: 10px;
background-color: #f8f8f8 !important;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #777;}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #f7f7f7;}
.commentinfo {
background-color: #f7f7f7;
margin-top: 10px;
width: auto;}
#qrdiv table {
border-width: 0px !important;}
.box center b {
font-weight: normal;}
.skiplinks {
margin-left: 5px;
color: #f7f7f7;}
/*------ MISC. ------*/
#lj_controlstrip td {
color: #424242;
font: normal 8pt trebuchet ms;
background: #f9f9f9;
border: none; padding: 5px;}
td#lj_controlstrip_actionlinks a, span#lj_controlstrip_statustext, td#lj_controlstrip_user a, td#lj_controlstrip_search a{
font: normal 8pt trebuchet ms;
text-transform:lowercase;
color: #424242;
text-decoration: none;}
td#lj_controlstrip_actionlinks a:hover, td#lj_controlstrip a:hover, td#lj_controlstrip_user a:hover {
text-decoration: none !important;
color: #333;}
div.ContextualPopup div.Inner {
width: 235px;
text-transform: lowercase;
border: none !important;
color: #666666!important;
padding: 10px;}
div.ContextualPopup .Content {
border: none !important;}
div.ContextualPopup .Userpic {
padding: 10px;
background-color: #fff;
margin: 0px;
border: 1px solid #efefef;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color:#999!important;
font-weight:100;
text-decoration:none!important;
text-transform:lowercase;}
div.ContextualPopup div.Inner a:hover{
color:#666!important;
text-decoration:none!important;}
.lj_invisible {
display: inline;
visibility: hidden;}
.clear {height: 15px;}
/*------ TINY ICONS ------*/
img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://cloud-shade.org/photos/user-icon-grey.gif) no-repeat !important; padding: 13px 0 0 10px !important;}
img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://cloud-shade.org/photos/com_icon_grey.gif) no-repeat !important; padding: 13px 0 0 10px !important;}
img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i54.tinypic.com/16ll1le.png) no-repeat !important; padding: 13px 0 0 16px !important;}
img[src*='/img/btn_del.gif']{width: 0 !important; height: 0 !important; padding: 0 16px 16px 0; background: transparent url(http://i55.tinypic.com/o86qtg.png) no-repeat !important;}
img[src='http://l-stat.livejournal.com/img/btn_scr.gif'] {height: 0; width: 0; padding: 0 16px 16px 0; background: url('http://i51.tinypic.com/n1frbc.png');}
img[src='http://l-stat.livejournal.com/img/btn_unscr.gif'] {height: 0; width: 0; padding: 0 16px 16px 0; background: url('http://i54.tinypic.com/snjhqe.png');}
img[src='http://l-stat.livejournal.com/img/btn_freeze.gif'] {height: 0; width: 0; padding: 0 16px 16px 0; background: url('http://i53.tinypic.com/200wev8.png');}
img[src='http://l-stat.livejournal.com/img/btn_unfreeze.gif'] {height: 0; width: 0; padding: 0 16px 16px 0; background: url('http://i56.tinypic.com/244tlyg.png');}
img[src='http://l-stat.livejournal.com/img/btn_edit.gif'] {height: 0; width: 0; padding: 0 16px 16px 0; background: url('http://i52.tinypic.com/2008zgk.png');}
img[src='http://l-stat.livejournal.com/img/btn_track.gif'] {height: 0; width: 0; padding: 0 16px 16px 0; background: url('http://i54.tinypic.com/e0jwbm.png');}
installation
go to journal → journal style
select a flexible squares theme
choose the sidebar on right page setup
ad placement → between entries
custom css → select no from drop menus
paste code and enjoy!
watch invicted for more!