I just finished my first layout available to LJ users! I'm very happy as this is my first one I'm sharing ^_^
Style: Quite Lickable
Website: not required
Default Icon: not required
Best view: 800x600 and up
Browser(s) Compatible: IE/Firefox/Opera/Netscape
Credit: yes, please.
Work with Nav bar?: No
Work with Plus Acct?: Yes
Preview:
Permanent Live Preview
here Image(s):
background. Not necessary, only if you like the shadows on the side. But I don't mind if you just hotlink it :)
http://i75.photobucket.com/albums/i304/girlboheme/LJ/bg.png Overrides:
Free Account and Paid CSS
body {
background-color: #8DA32A!important;
background-color: #8DA32A;
background-image: url(
http://i75.photobucket.com/albums/i304/girlboheme/LJ/bg.png);
background-attachment: scroll;
background-repeat: repeat-y;
background-position: top center;
width: 100%;
height: 100%;
font-family: arial, sans-serif;
font-size: 11px;
text-align: justify;
}
body, td, table, th, tr {
}
blockquote {
border-bottom: 2px solid #E2E2E2;
background: #EFEFEF;
padding: 6px 6px;
}
#shadowhack1 {
position:absolute;
top:0px;
width: 600px;
left:50%;
margin-left:-296px!important;
margin-left:-290px;
float: left;
}
#shadowhack2 {
margin: 0px;
background: transparent;
background-position: top right;
background-repeat: repeat-y;
min-height: 100%;
width: 100%;
}
#pagecontainer {
width: 100%;
background: #FFFFFF;
background-image: ;
color: ;
margin: ;
border-top: 12px solid #63A6DD;
border-bottom: 12px solid #63A6DD;
border-right: ;
overflow: hidden;
}
a:link {
color: #6F8D04;
text-decoration: none;
}
a:visited {
color: #6F8D04;
text-decoration: none
}
a:hover {
color: #FFFFFF;
background: #63A6DD;
text-decoration: none;
}
/* TITLE */
#title {
color: #000000;
height: 55px;
width: 600px;
background: #FFFFFF;
background-image: ;
background-repeat: no;
border-top: 4px solid #000000;
}
#title h1 {
color: #000000;
font-size: 28px;
font-family: "arial black", arial, helvetica;
font-weight: normal;
margin: 0px;
padding: 0px 0px 0 3px;
overflow: hidden;
text-align: left;
white-space: no-wrap;
}
#title #journal_subtitle {
font-size: 11px;
font-family: arial, helvetica
font-weight: bold;
margin: 0px;
padding: 0px 0px 0 3px;
white-space: no-wrap;
}
#title h1 {
/* display: none;*/
margin-top: -12px;
margin-left: -4px;
}
#title #journal_subtitle {
display: none;
}
/* SIDEBAR */
#paraphernalia {
position:absolute!important;
position: absolute;
left: 50%;
margin-top: 0px;
margin-left: 147px!important;
margin-left: 147px;
width: 153px!important;
width: 153px;
height: auto;
visibility: visible;
z-index:3;
font-size: 11px;
font-family: Arial;
}
#paraphernalia h2 {
font-size: 14px;
font-family: "arial black", arial, helvetica;
color: #000000;
margin: 0;
padding: 1px 2px;
border-top: 4px solid #000000;
font-weight: normal;
}
#paraphernalia .pbox {
margin-left: 0px;
margin-right: 0px;
clear: both;
}
#journalinfouserpic {
float: right;
margin-top: 0px;
margin-right: 19px;
margin-bottom: 5px;
text-align: center;
}
.pboxcontent {
margin: 5px 10px 15px 5px;
}
.pbox dt {
font-weight: normal;
margin-top: 5px;
}
.pbox dd {
padding: 0;
margin-left: 15px;
}
.pbox ul {
margin: 0;
padding: 0;
list-style: none;
}
.pbox ul ul {
margin-left: 15px;
}
.pbox li {
margin: 0;
padding: 0;
}
.pbox li.current {
font-weight: bold;
}
.pbox p {
margin: 0;
}
#main {
postition: absolute;
margin: 0;
min-height: 1024px;
padding: 0px;
width: 447px!important;
width: 447px;
}
* html #main {
height: 1024px; /* IE-only hack */
}
.day h2 {
display: none;
font-size: ;
font-weight: ;
font-family: ;
margin: ;
}
.entry {
margin: 0px;
}
.entryheader {
}
.entryheader .entrytimestampdate {
}
.page_entry .entryheader .entrytimestampdate, .page_reply .entryheader .entrytimestampdate {
display: inline;
}
.comments .entry {
margin-left: 0;
margin-bottom: 8px;
}
.comments .entry .entryheader {
background: ;
}
.calendarmonth {
width: 60%;
margin-right: auto;
margin-left: auto;
border-collapse: collapse;
margin-bottom: 2em;
}
.calendarmonth td, .calendarmonth th {
padding: 0.5em;
margin: 0;
}
.calendarmonthlink {
text-align: center;
}
.calendarmonthheader h2 {
font-size: ;
margin: 0;
text-align: left;
}
.page_month #main form, .page_month #main dl {
margin: 8px;
}
#server_sig {
font-size: 0.75em;
text-align: left;
clear: both;
padding: 0 3px;
width: ;
}
div.ljtags { display: inline; }
texarea {
font-family: Arial, sans-serif;
padding: 1px;
font-size: 10px;
color: #000000;
background-color: #FFFFFF;
}
input {
font-family: Arial, sans-serif;
padding: 1px;
font-size: 10px;
color: #000000;
background-color: #FFFFFF;
border: solid 1px #CCD1D1;
}
form {
font-family: Arial, sans-serif;
font-size: 10px;
color: #000000;
margin-left: 0px;
padding: 1px;
width: 250px;
}
textarea, input, select, option, .area {
font-family: Arial, sans-serif;
font-size: 10px;
background-color: #FFFFFF;
border: solid 1px #CCD1D1;
}
select, option {
font-family: Arial, sans-serif;
padding: 1px;
font-size: 10px;
color: #000000;
background-color: #FFFFFF;
border: dashed 1px #CCD1D1;/
}
.journallinkbar {
text-align: center;
display: none;
}
.entry {
margin-bottom: 2em;
font-size: 11px;
/*clear: both;*/
}
.entry .entryheader {
font-size: 11px;
text-align: left;
}
.entry .entryheader h3 {
font-size: 14px;
font-family: "arial black", arial, helvetica;
color: #000000;
margin: 0;
padding: 1px 8px;
border-top: 4px solid #000000;
font-weight: normal;
}
.entryheader .entryicon {
float: left;
margin-right:0em;
}
.entryheader .entryuserpic {
float: left;
margin-top: 0em;
clear: left;
display: block;
padding: 10px 8px;
display: none;
}
.page_friends .entryheader .entryuserpic {
display: block;
}
.entryheader .entryposter {
display: inline;
float:left;
margin-right: 1em;
padding: 0 8px;
font-size: 11px;
}
.entryheader .entryposter:after {
content: ;
}
.entryposter img, .collapsed_entry img {
height: 12px;
width: 10px;
}
.entryheader .entrytimestamp {
display: inline;
padding: 0 8px;
}
.entrylinkbarpre, .entrylinkbarpost {
display: none;
}
.page_entry .entrylinkbarpre, .page_reply .entrylinkbarpre {
display: block;
float: right;
}
.entry .entrycontent {
margin: 8px;
}
.entrymeta {
list-style: none;
vertical-align: middle;
font-size: 10px;
margin: 0px;
display: block;
padding: 4px 0 2px 8px;
background: #EFEFEF;
}
.metadata {
list-style: none;
vertical-align: top;
font-size: 10px;
margin: 0px;
display: block;
padding: 4px 0 2px 8px;
background: #EFEFEF;
}
.entrymeta .entrymetacaption {
font-weight: bold;
}
.entrymeta li {
white-space: no-wrap;
}
.entry .entryfooter {
clear: both;
margin: 0;
}
.entryfooter .entrycmdlinks {
list-style: none;
vertical-align: middle;
margin: 0px;
padding: 2px 8px;
white-space: no-wrap;
text-align: right;
font-size: 10px;
border-top: 2px solid #E2E2E2;
}
.entryfooter .entrycmdlinks:before {
content: ;
}
.entryfooter .entrycmdlinks:after {
content: ;
}
.entrycmdlinks li {
display: inline;
padding: 0px;
}
* html .entrycmdlinks li {
margin-left: 1em;
}
.entrycmdlinks li:before {
content: ;
}
.entrycmdlinks li:first-child:before {
content: ;
}
.comments {
list-style: none;
padding: 0;
margin-left: 0px;
}
.comments .comments {
margin-left: 25px;
background: ;
}
.comments > li {
margin: 0;
padding: 0;
}
.viewspecnavbar {
}
.calendarmonthheader h2{
font-size: 14px;
font-family: "arial black", arial, helvetica;
color: #000000;
margin: 0;
padding: 1px 2px;
border-top: 4px solid #000000;
font-weight: normal;
}
.calendarmonthheader {
font-size: 1px;
font-family: "arial black", arial, helvetica;
color: #000000;
margin: 0;
padding: 1px 2px;
font-weight: normal;
text-align: left;
}
.calendarmonthlink {
list-style: none;
vertical-align: middle;
margin: 0px;
padding: 1px 8px;
white-space: no-wrap;
text-align: right;
border-top: 1px #6F8D04 dashed;
font-size: 10px;
z-index: 25;
}
.emptyday {
border: 1px #6F8D04 dashed;
}
#calendarmonthcontainer{
}
.calendarmonth {
width: 447px;
}
.calendardaynum {
text-align: right;
}
.calendardaycount {
text-align: right;
}
.calendarday {
margin: 20px;
padding: 1px;
width: 50px;
border: 1px #6F8D04 dashed;
}
.itemrange {
list-style: none;
padding: 0;
margin: 0.5em;
text-align: center;
}
.itemrange li {
display: inline;
margin: 0 0.25em;
background: ;
color: ;
}
.itemrange li a:before, .itemrange li.current:before {
content: ;
}
.itemrange li a:after, .itemrange li.current:after {
content: ;
}
.dayview {
background: ;
color: ;
}
#server_sig {
font-size: 0.8em;
text-align: left;
clear: both;
padding: 3px 4px;
border-bottom: 4px solid #000000;
width: ;
}
Plus Account Theme Overrides (for use with vertical ads)
body {
background-color: #8DA32A!important;
background-color: #8DA32A;
background-image: url(
http://i75.photobucket.com/albums/i304/girlboheme/LJ/bg.png);
background-attachment: scroll;
background-repeat: repeat-y;
background-position: top center;
width: 100%;
height: 100%;
font-family: arial, sans-serif;
font-size: 11px;
text-align: justify;
}
/*html body {
padding:0px 19px 0 0;}*/
body, td, table, th, tr {
}
#lj_controlstrip{
display: none;
white-space: no-wrap;
background-color:#76911C !important;
background-color:#76911C;
}
blockquote {
border-bottom: 2px solid #E2E2E2;
background: #EFEFEF;
padding: 6px 6px;
}
#shadowhack1 {
position:absolute;
top:0px;
width: 600px;
left:50%;
margin-left:-296px!important;
margin-left:-290px;
float: left;
}
#shadowhack2 {
margin: 0px;
background: transparent;
background-position: top right;
background-repeat: repeat-y;
min-height: 100%;
width: 100%;
}
#pagecontainer {
width: 100%;
background: #FFFFFF;
background-image: ;
color: ;
margin: ;
border-top: 12px solid #63A6DD;
border-bottom: 12px solid #63A6DD;
border-right: ;
overflow: hidden;
}
a:link {
color: #6F8D04;
text-decoration: none;
}
a:visited {
color: #6F8D04;
text-decoration: none
}
a:hover {
color: #FFFFFF;
background: #63A6DD;
text-decoration: none;
}
/* TITLE */
#title {
color: #000000;
height: 55px;
width: 600px;
background: #FFFFFF;
background-image: ;
background-repeat: no;
border-top: 4px solid #000000;
}
#title h1 {
color: #000000;
font-size: 28px;
font-family: "arial black", arial, helvetica;
font-weight: normal;
margin: 0px;
padding: 0px 0px 0 3px;
overflow: hidden;
text-align: left;
white-space: no-wrap;
}
#title #journal_subtitle {
font-size: 11px;
font-family: arial, helvetica
font-weight: bold;
margin: 0px;
padding: 0px 0px 0 3px;
white-space: no-wrap;
}
#title h1 {
/*display: none;*/
margin-top: -12px;
margin-left: -4px;
}
#title #journal_subtitle {
display: none;
}
/* SIDEBAR */
#paraphernalia {
position:absolute!important;
position: absolute;
left: 50%;
margin-top: 0px;
margin-left: 122px!important;
margin-left: 122px;
width: 178px!important;
width: 178px;
height: auto;
visibility: visible;
z-index:3;
font-size: 11px;
font-family: Arial;
}
#paraphernalia h2 {
font-size: 14px;
font-family: "arial black", arial, helvetica;
color: #000000;
margin: 0;
padding: 1px 2px;
border-top: 4px solid #000000;
font-weight: normal;
}
#paraphernalia .pbox {
margin-left: 0px;
margin-right: 0px;
clear: both;
}
#journalinfouserpic {
margin-top: 0px;
margin-right: 8px;
margin-bottom: 5px;
text-align: left;
}
.pboxcontent {
margin: 5px 10px 15px 5px;
}
.pbox dt {
font-weight: normal;
margin-top: 5px;
}
.pbox dd {
padding: 0;
margin-left: 15px;
}
.pbox ul {
margin: 0;
padding: 0;
list-style: none;
}
.pbox ul ul {
margin-left: 15px;
}
.pbox li {
margin: 0;
padding: 0;
}
.pbox li.current {
font-weight: bold;
}
.pbox p {
margin: 0;
}
#main {
postition: absolute;
margin: 0;
min-height: 1024px;
padding: 0px;
width: 422px!important;
width: 422px;
}
* html #main {
height: 1024px; /* IE-only hack */
}
.day h2 {
display: none;
font-size: ;
font-weight: ;
font-family: ;
margin: ;
}
.entry {
margin: 0px;
}
.entryheader {
}
.entryheader .entrytimestampdate {
}
.page_entry .entryheader .entrytimestampdate, .page_reply .entryheader .entrytimestampdate {
display: inline;
}
.comments .entry {
margin-left: 0;
margin-bottom: 8px;
}
.comments .entry .entryheader {
background: ;
}
.calendarmonth {
width: 60%;
margin-right: auto;
margin-left: auto;
border-collapse: collapse;
margin-bottom: 2em;
}
.calendarmonth td, .calendarmonth th {
padding: 0.5em;
margin: 0;
}
.calendarmonthlink {
text-align: center;
}
.calendarmonthheader h2 {
font-size: ;
margin: 0;
text-align: left;
}
.page_month #main form, .page_month #main dl {
margin: 8px;
}
div.ljtags { display: inline; }
texarea {
font-family: Arial, sans-serif;
padding: 1px;
font-size: 10px;
color: #000000;
background-color: #FFFFFF;
}
input {
font-family: Arial, sans-serif;
padding: 1px;
font-size: 10px;
color: #000000;
background-color: #FFFFFF;
border: solid 1px #CCD1D1;
}
form {
font-family: Arial, sans-serif;
font-size: 10px;
color: #000000;
margin-left: 0px;
padding: 1px;
width: 250px;
}
textarea, input, select, option, .area {
font-family: Arial, sans-serif;
font-size: 10px;
background-color: #FFFFFF;
border: solid 1px #CCD1D1;
}
select, option {
font-family: Arial, sans-serif;
padding: 1px;
font-size: 10px;
color: #000000;
background-color: #FFFFFF;
border: dashed 1px #CCD1D1;/
}
.journallinkbar {
text-align: center;
display: none;
}
.entry {
margin-bottom: 2em;
font-size: 11px;
/*clear: both;*/
}
.entry .entryheader {
font-size: 11px;
text-align: left;
}
.entry .entryheader h3 {
font-size: 14px;
font-family: "arial black", arial, helvetica;
color: #000000;
margin: 0;
padding: 1px 8px;
border-top: 4px solid #000000;
font-weight: normal;
display: block;
}
.entryheader .entryicon {
float: left;
margin-right:0em;
}
.entryheader .entryuserpic {
float: left;
margin-top: 0em;
clear: left;
display: block;
padding: 10px 8px;
display: none;
}
.page_friends .entryheader .entryuserpic {
display: block;
}
.entryheader .entryposter {
display: inline;
float:left;
margin-right: 1em;
padding: 0 8px;
font-size: 11px;
}
.entryheader .entryposter:after {
content: ;
}
.entryposter img, .collapsed_entry img {
height: 12px;
width: 10px;
}
.entryheader .entrytimestamp {
display: inline;
padding: 0 8px;
}
.entrylinkbarpost {
display: none;
}
.entrylinkbarpre {
display: none;
}
.page_entry .entrylinkbarpre, .page_reply .entrylinkbarpre {
display: block;
float: right;
}
.entry .entrycontent {
margin: 8px;
}
.entrymeta {
list-style: none;
vertical-align: middle;
font-size: 10px;
margin: 0px;
display: block;
padding: 4px 0 2px 8px;
background: #EFEFEF;
}
.metadata {
list-style: none;
vertical-align: top;
font-size: 10px;
margin: 0px;
display: block;
padding: 4px 0 2px 8px;
background: #EFEFEF;
}
.entrymeta .entrymetacaption {
font-weight: bold;
}
.entrymeta li {
white-space: no-wrap;
}
.entry .entryfooter {
clear: both;
margin: 0;
}
.entryfooter .entrycmdlinks {
list-style: none;
margin: 0px;
padding: 2px 8px;
white-space: no-wrap;
text-align: right;
font-size: 10px;
border-top: 2px solid #E2E2E2;
display: block;
}
.entryfooter .entrycmdlinks:before {
content: ;
}
.entryfooter .entrycmdlinks:after {
content: ;
}
.entrycmdlinks li {
display: inline;
padding: 0px;
}
* html .entrycmdlinks li {
margin-left: 1em;
}
.entrycmdlinks li:before {
content: ;
}
.entrycmdlinks li:first-child:before {
content: ;
}
.comments {
list-style: none;
padding: 0;
margin-left: 0px;
}
.comments .comments {
margin-left: 25px;
background: ;
}
.comments > li {
margin: 0;
padding: 0;
}
.viewspecnavbar {
}
.calendarmonthheader h2{
font-size: 14px;
font-family: "arial black", arial, helvetica;
color: #000000;
margin: 0;
padding: 1px 2px;
border-top: 4px solid #000000;
font-weight: normal;
}
.calendarmonthheader {
font-size: 1px;
font-family: "arial black", arial, helvetica;
color: #000000;
margin: 0;
padding: 1px 2px;
font-weight: normal;
text-align: left;
}
.calendarmonthlink {
list-style: none;
vertical-align: middle;
margin: 0px;
padding: 1px 8px;
white-space: no-wrap;
text-align: right;
border-top: 1px #6F8D04 dashed;
font-size: 10px;
z-index: 25;
}
.emptyday {
border: 1px #6F8D04 dashed;
}
#calendarmonthcontainer{
}
.calendarmonth {
width: 422px;
}
.calendardaynum {
text-align: right;
}
.calendardaycount {
text-align: right;
}
.calendarday {
margin: 20px;
padding: 1px;
width: 50px;
border: 1px #6F8D04 dashed;
}
.itemrange {
list-style: none;
padding: 0;
margin: 0.5em;
text-align: center;
}
.itemrange li {
display: inline;
margin: 0 0.25em;
background: orange;
color: green;
}
.itemrange li a:before, .itemrange li.current:before {
content: ;
}
.itemrange li a:after, .itemrange li.current:after {
content: ;
}
.dayview {
background: orange;
color: green;
}
#server_sig {
font-size: 0.8em;
text-align: left;
clear: both;
padding: 3px 4px;
border-bottom: 4px solid #000000;
width: ;
}
Paid Account Theme Overrides (for mood icon to left of meta)
layerinfo "type" = "theme";
layerinfo "name" = "Custom 1";
function Entry::lay_print_metadata() {
var string tags_header = "Tags"; # text for tags header, "Current Tags"
var string tags_joiner = ""; # text for tags joiner, ":"
var string tags_sep = ", "; # text for tags separator, ", "
var bool show_edit_tags_link = false; # set to true if you want edit tags link as tags header
var string currents_open = """
"""; # html for opening of currents container
var string currents_close = """
"""; # html for closing of currents container
var bool loc_after_mood = false; # set to true to print location after mood
var bool vanilla_loc = false; # set to true to delinkify location
# if you need data specific to the meta to be in these strings you'll have to set those individually down further
# one example is provided with meta_label_open
var string meta_label_open = """
"""; # html for opening of metadata label
var string meta_label_close = """: """; # html for closing of metadata label
var string meta_val_open = ""; # html for opening of metadata value
var string meta_val_close = """
"""; # html for closing of metadata value
var Link edit_tags = $this->get_link("edit_tags"); # helper var to see if remote user can edit tags
if ((size $.metadata > 0) or ((size $.tags > 0) and ($*tags_aware))){
if($.metadata{"mood"} == "" and $loc_after_mood) {
# if we're printing loc after mood but we have no mood, set loc_after_mood to false
$loc_after_mood = false;
}
var string currents = ""; # make var for printing
$currents = $currents_open; # add opening of currents container
if(defined $.mood_icon) {
var Image i = $.mood_icon;
$currents = $currents + """
| """;
}
foreach var string k ($.metadata){ # step thru metadata
var string text = $k; # set text to key
var string val = $.metadata{$k}; # get val
if ($k == "mood"){ # if mood, set text to mood property
$text = $*text_meta_mood;
}
elseif ($k == "music") { # if music, set text to music property
$text = $*text_meta_music;
} elseif ($k == "location") { # if location, set text to loc variable
$text = $*text_meta_location;
if($vanilla_loc) { # if vanilla loc, striphtml() it
$val = striphtml($val);
}
}
if(not ($k == "location" and $loc_after_mood)) {
# if we're doing loc right now and printing loc after mood, skip it
# if we're doing loc right now and we're not printing loc after mood, print it now
# if we're not doing loc right now, print this piece of meta
# add the meta
$currents = $currents + """$meta_label_open$text$meta_label_close$meta_val_open$val$meta_val_close""";
}
if($k == "mood" and $loc_after_mood) {
# if we just now did the mood and we're printing loc after mood, print the loc
$k = "location"; # set meta key to "location"
$text = $*text_meta_location; # set text to loc variable
$val = $.metadata{$k}; # get val
# if we have a loc, do stuff
if($val != "") {
# if vanilla loc, striphtml() it
if($vanilla_loc) {
$val = striphtml($val);
}
# add the meta
$currents = $currents + """$meta_label_open$text$meta_label_close$meta_val_open$val$meta_val_close""";
}
}
}
if ((size $.tags > 0) and $*tags_aware) {
var string k = "tags"; # set key to "tags"
var int tcount = 0; # set counter for tags
if($edit_tags.url != "" and $show_edit_tags_link) { # if remote user can edit tags, let's give them a link
$tags_header = """$tags_header""";
}
# add text, open val container
$currents = $currents + """$meta_label_open$tags_header$tags_joiner$meta_label_close$meta_val_open""";
# build tag list
foreach var Tag t ($.tags) {
$currents = $currents + """$t.name""";
$tcount++;
# if we haven't hit the last tag, add a separator
if ($tcount != size $.tags) { $currents = $currents + $tags_sep; }
}
# close val container
$currents = $currents + $meta_val_close;
}
if(defined $.mood_icon) {
$currents = $currents + """ |
""";
}
# close currents container
$currents = $currents + $currents_close;
# print currents
println "$currents";
}
}
Credits for the code go to
kunzite1 at
S2layers for his boxer overrides that I customized for Quite Lickable.
Rules:
1. When taking, please comment.
2. Please credit in user info or on sidebar.
3. Do not steal or claim as your own.
4. Customize to your hearts content.
5. But still credit me, please.
Notes:
Very easy to add a custom header.
1. Just add url to #title in the place provided for background pic and don't forget to put in the height of the image in as well.
2. Then scroll down to #title h1 and uncomment the display: none, that will take away the journal name from the top of the page.
If Sidebar doesn't Show Up.
1. go to Journal Display> Custom CSS
2. Make sure that » Use layout's stylesheet(s) is set to NO.
Sidebar Customizations.
I will provide some easy instructions for sidebar customizations for Paid and Plus accounts. Basic (or Free) will only allow you to have the built in sidebar options of User Pic & Blurb, View, Navigation and Links. All other customizations have to be done through Theme Layers and require Paid or Plus account access :)
Useful Communities:
everything_lj
s2lickable
s2layers
I will do my best to answer questions, though.
Thanks :)
girlboheme