Download Layout codes and Images (media challenge entries)
Round 8 LJ-Layout "All in one family"
Layout preview: hyesungstory
Contest entry: http://community.livejournal.com/kkm_media/115560.html
Images:
HEADER image
BACKGROUND image
MOOD Theme : http://www.livejournal.com/moodlist.bml?moodtheme=460036&mode=tree
4 cutie icons to accompany the layout:
*
*
*
CSS Code:
Hi...!???! Thank you for using this layout!!?
S2 SMOOTH SAILING --- Alice * Blues ---
Made by Wingweaver22 aka Malice ...
More layouts at http://community.livejournal.com/fruitstyle/ ...?!!
Please don't remove this..! Thank you very much..! */
/* ------------------------------ PAGE ------------------------------ */
body {
font-family: tahoma; font-size: 9px;
margin: 0; padding: 0;
background-image: url(BACKGROUND IMAGE URL); background-attachment: fixed; background-color: #dddddd;
}
a, a:visited {
color: #62493B; background-color: transparent;
text-decoration: none;
padding: 0px;
border: 0;
}
a:hover { color: #D4C1B4; cursor: help; }
blockquote{
background-color: #f8f8f8; color: #bbbbbb;
border: 1px dashed #dddddd;
font-size: 9px;
margin: 10px 140px 0 0; padding: 5px;
}
blockquote:first-line { letter-spacing: 3px; }
blockquote:hover { background-color: #ffffff; cursor: text; }
input, select {
background-color: #f8f8f8; color: #888888;
font-family: tahoma; font-size: 9px;
border: 1px solid #dddddd;
margin-top: 5px;
}
input:hover, select:hover {
background-color: #ffffff; color: #888888;
border: 1px solid #dddddd;
cursor: help;
}
textarea {
width: 200px; padding: 5px;
border: 1px solid #dddddd;
background-color: #f8f8f8; color: #888888;
font-size: 9px; font-family: tahoma;
}
/* ------------------------------ LAYOUT ------------------------------ */
.pageblock{ width: 770px; margin: auto; }
.pagefooterblock { display: none; }
/* ------------------------------ HEADER ------------------------------ */
.pageheaderblock { width: 100%; }
.header-icon { display: none; }
.header-title {
text-align: center; text-decoration: none;
font-size: 60px; font-family: georgia; font-style: italic; font-weight: bold;
color: #62493B;
padding: 30px 0 0; margin: auto; margin-bottom: -14px;
letter-spacing: -4px;
width: 770px;
}
.header-subtitle{
background-image: url(HEADER IMAGE URL); background-position: center bottom; background-repeat: no-repeat;
height: 300px; width: 770px;
margin: auto; padding: 0;
font-size: 0px;
border-top: 5px solid #62493B;
}
/* ------------------------------ LINKBAR ------------------------------ */
.header-menu {
font-family: tahoma; font-size: 9px;
letter-spacing: 2px;
text-transform: lowercase; text-align: center;
padding: 15px 0 15px 0; margin: auto;
background-color: #D4C1B4;
width: 770px;
border-top: 5px solid #62493B;
}
.header-menu a, .header-menu a:visited {
padding: 1px 10px 1px 10px; margin: 0 0 0 10px;
color: #ffffff;
word-spacing: -1px;
border-right: 3px solid #D4C1B4; border-left: 3px solid #D4C1B4;
}
.header-menu a:hover {
color: #f8f8f8;
border-right: 3px solid #ffffff; border-left: 3px solid #ffffff;
}
.header-menu ul, #footer-menu ul {
margin: 0px; padding: 0px;
}
.header-menu li, #footer-menu li { display: inline; }
/* ------------------------------ BODY ------------------------------ */
.bodyblock {
width: 770px; margin: auto; padding: 0;
background-color: #f8f8f8;
}
.bodyheaderblock { display: none; }
.bodynavblock {
background-color: transparent; color: #888888;
margin-top: 5px; margin-left: 10px;
text-align: left;
}
.bodynavblock a, .bodynavblock a:visited {
color: #888888; background-color: transparent;
border: none;
text-align: left;
}
.body-title { display: none; }
.body-midtitle { display: none; }
/* ------------------------------ SIDEBAR ------------------------------ */
.sidebar {
width: 180px;
padding: 10px; margin: 0;
color: #888888;
}
.sidebox{
margin: 0 0 10px 0; padding: 0;
display: block;
}
.sideboxTitle {
text-transform: lowercase; text-align: center;
font-size: 9px;
letter-spacing: 1px;
color: #bbbbbb; background-color: #ffffff;
padding: 2px; margin: 0 0 5px 0;
border-top: 1px dashed #dddddd; border-bottom: 1px dashed #dddddd;
}
.sideboxContent {
text-align: left;
padding-left: 3px; margin: 0;
}
.sideboxContent .listitem:hover, .sideboxContent .listitem a:hover{
background-color: #ffffff; color: #888888;
cursor: help;
}
.sideboxContent .summaryList{ margin: 10px 0 10px 0;}
.sidebox #freetext { text-align: left; }
.sidebox #latestmonth, .sidebox #profile { text-align: center; }
.sidebox #search { text-align: justify;}
.latestmonth-inactive {
text-align: center;
width: 25px;
padding: 0px; margin: 0px;
}
.latestmonth-active {
text-align: center;
width: 25px;
padding: 0px; margin: 0px;
}
#tags_sidebox a {
display: block;
font-size: 9px;
}
#tags_sidebox {
font-size: 0;
text-align: left;
}
.profile-label {margin-right: 5px;}
/* ------------------------------ ENTRIES ------------------------------ */
.entryHolder {
padding: 10px;
color: #888888; background-color: #ffffff;
text-align: justify;
font-family: tahoma; font-size: 10px;
width: 550px;
}
#welcomenoteText {
text-align: center;
color: #888888; background-color: transparent;
padding: 5px;
letter-spacing: 2px;
font-size: 9px;
border: 1px dashed #dddddd;
}
.entryUserinfo {
font-family: tahoma; font-size: 9px; font-weight: normal;
text-align: center;
padding: 10px; margin: 0 0 0 10px;
border-left: 1px dashed #dddddd;
float: right;
}
.entryUserinfo-usericon img {
padding: 5px;
border: 1px dashed #dddddd;
background-color: #f8f8f8;
}
.entryUserinfo-usericon img:hover { background-color: #ffffff;}
.entryText {
text-align: justify;
word-spacing: 2px;
margin: 5px;
}
.entryText img { border: 1px dashed #dddddd; padding: 5px; background-color: #f8f8f8;}
.entryHeader {
font-family: tahoma; font-weight: none; font-size: 9px;
border-bottom: 1px dashed #dddddd;
padding: 0px 0px 2px 4px;
letter-spacing: 1px;
text-transform: lowercase;
}
.entryHeaderSubject {
padding-left: 4px;
letter-spacing: 2px;
color: #888888;
}
.entryHeaderDate{
color: #bbbbbb;
letter-spacing: 1px;
}
.entryLinkbar {
text-transform: lowercase; text-align: center;
font-size: 9px; font-family: tahoma;
margin: 10px 0px 0px 0px;
}
.entryLinkbar ul { margin: 0; }
.entryLinkbar li {
padding-right: 5px;
display: inline;
}
/* ------------------------------ META ------------------------------ */
.entryMetadata { margin-top: 8px;}
.entryMetadata img { padding: 5px; float: right;}
.entryMetadata ul { margin: 0; padding: 1px; }
.entryMetadata li {
list-style: none; display: block;
padding: 2px 0 0 0;
}
.entryMetadata a { padding: 0 4px 0 4px; }
.entryMetadata-label {
margin: 10px; padding: 0px 5px 1px 5px;
color: #bbbbbb;
border-top: 1px dashed #dddddd; border-bottom: 1px dashed #dddddd;
text-transform: lowercase;
}
/* ------------------------------ FOOTER ------------------------------ */
#footer-menu {
background-color: #ffffff;
width: 550px;
text-transform: lowercase; text-align: left;
font-family: tahoma; font-size: 9px;
margin: 0 0 0 0; padding: 10px;
}
#footer-menu a, .footer-menu a:visited {
padding: 1px 10px 1px 10px;
color: #62493B;
white-space: nowrap;
}
#footer-menu a:hover { color: #D4C1B4; }
/* ------------------------------ COMMENTS PAGE ------------------------------ */
.commentHolder {
color: #888888; background-color: #ffffff;
font-family: tahoma; font-size: 10px;
padding: 10px; margin: 10px 0 10px 10px;
}
.commentUserinfo {
font-weight: normal;
text-align: center;
}
.commentUserinfo b{font-weight: lighter !important;}
.commentUserinfo-usericon img {
padding: 5px; margin: 5px;
border: 1px dashed #dddddd;
background-color: #f8f8f8;
height: 50px; width: 50px;
}
#qrform table{
width: 500px;
border: 1px solid #dddddd !important;
background-color: transparent;
margin: 0; padding: 0;
}
#qrform .textbox{
width: 400px !important;
font-family: tahoma; font-size: 9px;
border: 1px solid #dddddd !important;
background-color: transparent !important;
}
#qrform .textbox:hover {
background-color: #dddddd; color: #888888;
border: 1px solid #bbbbbb;
cursor: text;
}
.commentHeader {
font-family: tahoma; font-size: 9px; font-weight: none;
color: #bbbbbb;
border-bottom: 1px dashed #dddddd;
letter-spacing: 1px;
text-transform: lowercase;
}
.commentHeader a{ color: #888888; }
.commentHeaderScreened {
background-color: #f8f8f8;
padding: 2px 0 2px 5px;
border: 1px dashed #dddddd;
letter-spacing: 1px;
}
.commentHeaderSubject { font-weight: normal; font-family: tahoma; font-size: 9px; }
.commentLinkbar {
border: 0;
font-family: tahoma; font-size: 9px;
color: #888888;
text-transform: lowercase; text-align: left;
padding-bottom: 10px;
}
.commentLinkbar ul { margin: 0; padding: 0; text-align: center;}
.commentLinkbar li { padding: 0px 0 0px 5px; margin: 0; display: inline; }
.replyform {
margin: 10px;
border: 0px;
background-color: #bbbbbb; color: #888888;
}
.commentText{ margin: 5px; }
#postform{ background-color: #ffffff; }
#commenttext { width: 100%;}
/* ------------------------------ ARCHIVE ------------------------------ */
.yearlinks { text-align: right; }
.yearlink{ padding:0 4px 0 4px; }
.entryHeader a{}
.entryHeader a:hover{}
.month {
width: 100%;
border: 1px solid #f8f8f8;
margin: 10px 0 0 0; padding: 10px;
}
.daysubjects {
color: #888888;
letter-spacing: 1px;
padding: 6px 0 6px 0;
}
.daytitles {
text-align: center; margin: 0; padding: 0;
background-color: #f8f8f8; color: #bbbbbb;
border-left: 2px solid #ffffff; border-right: 2px solid #ffffff; border-bottom: 5px solid #ffffff;
}
.day-blank { padding: 2px 2px 1px 2px; }
.day { padding: 2px 2px 1px 2px; }
.day-date {
color: #888888;
text-align: right;
padding: 0px 3px 0 0;
border-right: 1px dashed #dddddd; border-top: 1px dashed #dddddd;
}
.day-count {
width: 50%;
float: right;
}
/* ------------------------------ TAGS ------------------------------ */
.tagstable td { padding: 5px 0px 5px 0px; }
.tagstable { text-transform: lowercase; letter-spacing: 1px; width: 400px; }
/* ------------------------------ EXTRAS ------------------------------ */
::-moz-selection { background: #bbbbbb; color: #ffffff; }
::selection { background: #bbbbbb; color: #ffffff; }
code::-moz-selection { background: #bbbbbb; color: #ffffff;}
code::selection { background: #bbbbbb; color: #ffffff;}
/*------ Look of contextual Popup ------*/
/* general positioning */
div.ContextualPopup {
margin: 10px 0 0 0px;
font: normal 10px "tahoma" !important;
}
/* userpic */
div.ContextualPopup img {
border-left: 1px dashed #dddddd;
border-right: 1px dashed #dddddd;
padding: 0 5px 0 5px;
margin: 0 1px 0 5px !important;
}
/* defines general look, font color/size/background color*/
div.ContextualPopup div.Inner {
background-color: #f8f8f8 !important;
color: #888888 !important;
border: 1px dashed #dddddd;
padding: 0px;
width: 220px;
text-align: right;
}
/* defines left side of popup without the user icon*/
div.ContextualPopup .Content {
padding: 2px 4px 6px 4px;
}
/* defines the text that shows the relation to the user (XYZ is your mutual friend) */
div.ContextualPopup .Relation {
font-weight: normal !important;
letter-spacing: 2px;
}
/* look of words LJ Talk */
div.ContextualPopup .Content .OnlineStatus {
font-weight: normal;
}
/* element that contains the user icon */
div.ContextualPopup .Userpic {
padding: 4px 4px 0 0;
}
/* defines the look of the links */
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #62493B !important;
}
div.ContextualPopup div.Inner a:hover {
color: #D4C1B4!important;
}
/* so that IE users will see a new image */
* html span.ljuser{
background-image: url(http://img169.imageshack.us/img169/5397/userqa7.png) !important;
background-repeat: no-repeat;
background-position: left middle;
padding: 10px 8px 0px 0px !important;
}
* html span.ljuser img{ visibility: hidden; }
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://img169.imageshack.us/img169/5397/userqa7.png) !important;
padding: 10px 8px 0 4px !important;
}
.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://img169.imageshack.us/img169/6885/communityky4.png) !important;
padding: 11px 8px 0 4px !important;
}
img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 10px;
background: url(http://img169.imageshack.us/img169/6231/lockediy6.png);
}
img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 10px;
background: url(http://img148.imageshack.us/img148/3078/privatefy4.png);
}
#lj_controlstrip {
top: 0; left: 0; width: 100%; height: 50px;
margin: 0; padding: 0;
position: absolute;
background: #dddddd !important;
}
#lj_controlstrip table { margin: 0; padding: 0; width: auto; }
#lj_controlstrip td {
font-family: tahoma, sans-serif;
color: #888888 !important;
font-size: 10px;
}
#lj_controlstrip a {
font-family: tahoma, sans-serif; font-size: 9px;
color: #62493B !important;
text-decoration: none;
border: 0; margin: 0; padding: 0;}
#lj_controlstrip a:hover {
text-decoration: none; color: #D4C1B4!important;
}
#lj_controlstrip img, #lj_controlstrip a img, #lj_controlstrip form { background: none; margin: 0; padding: 0; border: 0; }
#lj_controlstrip input {
font-family: tahoma, sans-serif; color: #888888 !important;
font-size: 10px; background-color: #f8f8f8 !important; border: 1px solid #ffffff;}
}
#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember {
font-family: tahoma, sans-serif;
font-size: 10px;
padding: 0; margin: 0;
}
#lj_controlstrip_userpic {margin: 0; padding: 0;}
#lj_controlstrip_userpic img{
width: 50px; height: 50px;
}
#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_login, #lj_controlstrip_search{
text-align: left;
border-right: 1px solid #ffffff;
}
#lj_controlstrip_statustext {
font-size: 9px; font-weight: bold;
letter-spacing: 2px; color: #ffffff;
}
.ControlStrip_SPlus, .ControlStrip_AdPlacementFree, .ControlStrip_AdPlacementPlus, .ControlStrip_ExpressiveThemes { right: 0; margin: 0; padding: 0; text-align: right; }