Two more BBM journal layouts

Mar 22, 2008 10:07

I needed a break from all the writing at work and on my story, which is why I played a bit with one of my (almost finished) layout ideas yesterday. Consider it an Easter gift ;) I should probably also mention that it's only one layout, but with two different color schemes and background images; like I said, I needed a break, not necessarily more work... Next time I post, it will be the next chapter of my story, not another layout, but after that there will be a layout for all the Jake fans in this fandom, I promise :) Happy Easter (to those who celebrate it)!

Cross-posted to wranglers.



Layout details

Style: Expressive

Best view: 1024x768 or higher

Browser compatible: FF 2.0 and up, Opera 9.0 and up, IE 7 (IE 6 maybe...), Konqueror 3.0 and up, not sure about Safari

Work with navigation bar? Yes.

Work with ads in Plus accounts? Yes.

Mini pictures and (one) live preview



likethisalways


Larger image

CSS Code

/*likethisalways (red)*/
/*Layout by frijo.livejournal.com. Based on Expressive unstyled.*/

/********************/
/*General formatting*/
/********************/
html {padding: 0; margin: 0;}

body {
margin: 0px;
padding: 0px;
background-color: #555;
font-family: "trebuchet ms", tahoma, verdana, helvetica, sans-serif;
font-size: 12px;
text-align: justify;
}

a {color: #d5362c; text-decoration: none;}

a:hover {color: #cecece;}

/*****************/
/*Structure */
/****************/

#page{
position: relative;
width: 800px;
margin: auto;
background-color: #555;
padding-bottom: 5px;
}

#page-inner{position: static;}

#content{
padding-top: 40px;
background-color: #fff;
}

#content-inner {
position: static;
background: url(http://i228.photobucket.com/albums/ee6/frijo_swe/alphabackground-3.png) center top no-repeat !important;
}

#alpha {
display: inline;
position: relative; top: 0px;
width: 75%;
border-right: 1px solid #f5f5f5;
}

#alpha-inner{width: auto !important; overflow: hidden;}

#beta {display: inline; width: 23%;}
.layout-wt #beta-inner{width: auto !important; overflow: hidden;}

#footer, #footer-inner {
margin: 0px auto;
height: 20px;
background: #a10000;
}

/*==============================*/
/*Header css*/
/*==============================*/
#header{overflow: hidden; }

/*Links in header */
#header-inner {
background: #555;
width: 800px;
height: 130px;
}

ul.nav{
position: relative;
top: 90px;
height: 35px;
background-color: #a10000;
}

#header-photo-inner {width: auto !important;}

#header-text ul.nav .item {
border-left-style: none;
margin:0px 5px;
line-height: 35px;
}

#header ul.nav li {
font-size: 12px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
}

#header ul.nav li a {
color:#555;
padding: 5px 5px 5px 5px;
}

#header ul.nav li a:hover {color: #cecece;}

#header ul.nav .current a {
font-weight: bold;
color: #cecece;
}

/*Title and subtitle*/
#header-name, #header-name a {
font-size: 35px;
color: #cecece;
}

#header-description {display: none;}

/**************************************/
/*Sidebar */
/**************************************/

.widget .widget-header {
margin-top: 5px;
margin-left: 10px;
margin-right: 10px;
padding: 5px 0px 5px 0px;
font-size: 12px;
color: #cecece;
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: right;
border-bottom: 1px solid #f5f5f5;
}

/*Profile widget*/
.widget .widget-header a {
color: #cecece;
text-decoration: none;
}

.profile-name {display: none;}

.widget-content .user-pic{
width: 100px;
border: 0px;
padding-bottom: 5px;
}

/*Content*/
.widget-content {
margin: 10px;
padding: 0px 0px;
font-size: 11px;
color: #555;
text-align: left;
}

.widget a:hover {
color: #cecece;
text-decoration: none;
}

.widget-footer {display: none;}
.powered-widget {display: none;}

/*calendar-widget*/
.calendar-widget table {
margin-left: -5px;
text-align: right;
}

.calendar-widget th{display: none;}
.calendar-widget td {
height: 15px;
border: 1px solid #cecece;
padding: 2px;
line-height: 15px;
text-align: center;
color: #cecece;
}

.calendar-widget tr:first-child td,
.calendar-widget tr:first-child a,
.calendar-widget tr:first-child a:hover {
background-color: transparent;
border: 0px;
text-align: left;
font-weight: normal;
}

.calendar-widget td a {font-weight: bold;}
.calendar-widget td a:hover {font-weight: normal;}

/*Tags list*/
.categories-widget li.item a {
display: block;
padding: 0px 2px 0px 2px;
border-bottom: 1px solid #f5f5f5;
}

.categories-widget li.item a:hover {
display: block;
color: #cecece;
}

/*Links list*/
.typelist-widget a {
display: block;
padding-bottom: 2px;
padding-left: 2px;
border-bottom: 1px solid #f5f5f5;
color:#d5362c;
font-weight: normal;
}

.typelist-widget a:hover {
display: block;
color: #cecece;
}

/*Page summary*/
.archive-widget ul.widget-list .item,
.widget a {
color: #d5362c;
text-decoration: none;
}

.archive-widget .widget-list .item{
padding-bottom: 2px;
padding-left: 2px;
}

.archive-widget .widget-list .item a {
color:#d5362c;
font-weight: normal;

}

.archive-widget .widget-list .item a:hover{
color: #cecece;
font-weight: normal;
}

.archive-widget .widget-list .item:hover{
color: #cecece;
}

.widget-list .item {
width: auto !important; /*fixes bullets in IE*/
}

/***********************/
/* Entries */
/***********************/

/* previous and next links */
.prevnext {
margin-left: 5px;
text-align: left;
color: #cecece;
}

/*Entry subject*/
.page-header2, .post-asset .asset-name a {
font-size: 16px;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #f5f5f5;
}

.asset-name a:hover{
text-decoration: none;
color: #cecece;
}

/*Sticky post*/
.asset .asset-name-hover {
width: 98%;
color: #d5362c;
background: none;
}

/*Entry subject header*/
.asset-header-content {
width: 98%;
padding-top: 5px;
padding-left: 5px;
}

.asset-meta .datetime {
color: #cecece;

}

/*Entry content*/
.asset-body, .comment-body {
margin-top: 25px;
padding-left: 5px;
text-align:justify;
text-indent: none;
color: #555;
}

/*User icon*/
.asset-inner .user-icon {
margin-right: 10px;
margin-bottom: 5px;
width: 100px;
padding: 5px;
border: 1px solid #cecece;
}

.user-icon .ljuser {font-size: 9px;}

/*Blockquote*/
.asset-body blockquote {
clear: left;
margin-right: 25px;
padding: 5px 10px 5px 5px;
border-left: 3px solid #d5362c;
border-right: 3px solid #d5362c;
background-color: #f5f5f5;
}

/*Mood, location, music*/
.lj-currents .entryMetadata-label {
padding-left: 5px;
font-size: 11px;
font-weight: bold;
color: #555;
}

.lj-currents .entryMetadata-content {
font-size: 11px;
color: #555;
}

.lj-currents a, a:hover{text-decoration: none;}

/*Tags beneath entries*/
.asset-tags{padding-left: 5px;}
.asset-tags-header{
font-size: 11px;
font-weight: bold;
color: #555;
}

.asset-tags-list {color: #cecece;}

.asset-tags-list a{
position: relative;
font-size: 11px;
color: #d5362c;
text-decoration: none;
}

.asset-tags-list a:hover {
color: #cecece;
text-decoration: none;
background-color: #fff;
}

/*Link bar beneath entries*/
.asset-meta-list{padding-left: 5px;}
.asset-meta-list .item {
border-left-style: none;
}

.asset-meta-list a:link,
.asset-meta-list a:visited,
.asset-meta-list a:active {
color: #cecece;
font-size: 12px;
text-decoration: none;
}

.asset-meta-list a:hover {
color:#d5362c;
text-decoration: underline;
}

.asset-footer{margin-top: 35px;}

/*************/
/*Comments*/
/*************/

/* Fix height in IE */
.comment {height: 1%;}

div.comments-inner h2 {display: none;}

.comments-nav {
text-align:center;
margin:25px;
color: #747474;
}

.comment-date{color: #cecece; margin-top: 3px;}
.comment-subject {margin-top: 10px; font-weight:bold;}

.comment-body{margin-top: 15px;}

/*Link-bar in comments*/
.comment-links {/*reply, freeze, screen, etc*/
padding: 3px;
font-weight:normal;
text-align:right;
font-size: .95em;
}

#comments .separator {color: #f5f5f5;}

.comment-links a{
color: #cecece;
text-decoration: none;
}

.comment-links a:hover{
color: #d5362c;
text-decoration: underline;
}

.comment-even {
padding: 5px;
border: 1px solid #cecece; !important;
color: #555;
}

#comments .replyform {color: #fff;}

#qrform table{ border:1px solid #cecece !important; }

#commenttext, #subject {width: 90%;}

#comments table {border: 1px solid #cecece; !important; color: #555;}

/*Icon position in comments*/
.user-icon {
margin-right: 10px;
width : 100px;
padding: 5px;
border: 1px solid #cecece;
}

/**********/
/*Archieve*/
/**********/

ul.year {
text-align: center;
padding: 0px;
color: #cecece;
}

ul.year li {
display: inline;
padding: 0px 5px;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yearday {
background-color: #f5f5f5;
text-align: center;
border: 1px solid #cecece;
color: #555;
}

table.yeartable td.yeardate{
padding: 5px;
border: 1px solid #cecece;
color: #cecece;
}

td.yearmonth {
color: #555;
font-weight: bold;
}

dd.viewsubjects {margin: 0 0 .75em .75em;}

/***************************************/
/*Different lj-user icons and comm-icons*/
/***************************************/

/*User/comm icon from street_of_mercy.livejournal.com*/

.ljuser img {
width: 0px;
height: 0px;
background-repeat: no-repeat;
background-image: url(http://i228.photobucket.com/albums/ee6/frijo_swe/tiny_icon_user.png);
padding: 14px 0px 0px 14px !important;
}

.ljuser img[src="http://stat.livejournal.com/img/user.gif"] {
background-image: url(http://i228.photobucket.com/albums/ee6/frijo_swe/tiny_icon_user.png);
padding: 14px 0px 0px 13px;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"]{
background-image: url(http://i228.photobucket.com/albums/ee6/frijo_swe/tiny_icon_community.png);
padding: 13px 0px 0px 20px;
}

/*********************/
/*Popups user icons**/
/*********************/

div.ContextualPopup div.Inner {
background: #fff !important;
color: #555 !important;
border: 3px solid #cecece;
padding: 4px;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: bold;
color: #d5362c !important;
}

div.ContextualPopup div.Inner a:hover {
text-decoration: none !important;
font-weight: bold;
color: #cecece !important;
}
div.ContextualPopup .Relation {
font-weight: bold !important;
letter-spacing:1px;
border-bottom: 1px solid #cecece;
margin-bottom: 5px;
padding-bottom: 5px;
text-align: center;
}

div.ContextualPopup .Userpic {
min-height: 50px;
min-width: 50px;
padding: 5px;
background:#fff;
border: 1px solid #cecece;
margin-top: 8px;
}