thirteen {revised}

May 24, 2010 14:12

XIII | Hollywood





XVIII; Hollywood
LIVE PREVIEWS

Hollywood

style

S2; Flexible Squares

accounts

Basic & Paid

browsers

All

Resolutions

works in all

disabled features

control strip, current location

INSTALLATION
HOW TO INSTALL

if you need help installing your S2 layout, click the "how to install" link for a detailed guide on how to install any S2 layout.

install the code

/*-------------------------------------------
NAME: Hollywood
STYLE: S2 | Flexible Squares
ACCOUNTS: basic & paid
TINY ICONS: pinvoke
CREDIT: apologize @ jealouss
---------------------------------------------*/
/*---------page--------*/

body {
background: #fff url(http://i48.tinypic.com/141qznp.jpg);
text-align: center;
color: #000000;
font-family: "arial", sans-serif;
font-size: 12px;
margin: 20px 0 20px 0;
}

#lj_controlstrip{display: none;}

/*---------body--------*/

#content
{
width: 50%;
margin-left: auto; margin-right: 330px;
background-color: #fff;
border-width: 5px;
border-style: solid;
border-color: #fff;
padding: 0px;
margin-top: 95px;
}

#maincontent {
margin-top: 0px;
font-family: "arial", sans-serif;
font-size: 14px;
background-color: #eee;
color: #000000;
border: none;
text-align: left;
}

/*---------header--------*/

#header {
width: 70%;
padding: 0px 0px 0px 0px;
margin: 0px;
text-align: right;
font-family: "arial black", sans-serif;
font-size: 24pt;
font-weight: normal;
letter-spacing: -1px;
border: none;
background-color: transparent !important;
color: #000;}

div#header a, div#header a:link, div#header a:visited {
color: #000;
background-color: #fff;
}
div#footer a, div#footer a:link, div#footer a:visited{color:#fff;}

div#header a:hover {
color: #fff;
text-decoration: none;
background-color: #000;
}

div#footer a:hover{color:#000; text-decoration: none;}
.title {
font-family: "arial black", sans-serif;
font-size: 30px;
font-weight: normal;
line-height: 80%;
top: 0px;
position: absolute;
right: 100px;
text-transform: uppercase;

}

.subtitle{
font-family: "georgia", sans-serif;
font-size: 18px;
font-weight: lighter;
top: 20px;
right: 100px;
font-style: italic;
position: absolute;
color: #fff;
}

ul.navheader
{
padding: 0px;
margin-top: 10px;
position: absolute;
top: 145px;
left: 50px;
text-transform: uppercase;
line-height: 200%;
}

ul.navheader li {
display: block;
padding: 0;
margin: 5px;
text-align: right;
}
li.view{background-color:#fff; margin: 0px; padding: 0px;}
li.view:hover{background-color: #000; color:#fff;}

/*---------entries--------*/

.subcontent {
}

.entry {
margin: 0px 10px 10px 10px;
padding: 10px;
background-color: #eee;
color: #666;
font-family: courier new, sans-serif;
font-size: 13px;
text-align: justify;
border: none;
letter-spacing: -1px;
}

.userpic{
position: relative;
float: right;
background-color: transparent !important;
padding: 0px 0px 0px 7px;
margin: 40px 4px 0px 0px;
z-index: 15;

}

.userpic img{width: 50px; height:50px; background-color: #eee; padding: 10px; margin-bottom: 5px;}
.date {text-align: left; color: #fff; font-family: arial; font-size: 8pt; position: absolute; line-height:

15px; width: 100px; font-weight: bold;}

.subject {
font-weight: normal;
padding: 13px;
color: #fff;
font-family: "arial", sans-serif;
font-size: 20px;
border-top: 1px solid #fff;
border-right: none;
text-align: left;
width:97%;
line-height: 190%;
margin-top: 30px;
}

.subject a, .subject a:link, .subject a:visited {
color: #ffffff;
}

.subject a:hover {
color: #888;
text-decoration: none;
}

.datesubject {
background-color: #000;
padding: 5px;
}

.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}

.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}

/*---------tags--------*/
.ljtags{
padding: 5px 10px 0px 10px;
font-family: tahoma;
font-size: 14px;
text-align: right;
font-weight: lighter;
margin: 5px;
color: #777;
text-transform: lowercase;
line-height: 6px;
background: transparent !important;
border-top: 1px solid #888;

}

/*---------currents--------*/

.currents, .currentmood, .currentmusic {
font-family: arial, sans-serif;
font-size: 14px;
letter-spacing: 0px;
text-align: right;
margin: 0px;
background-color: transparent !important;
}

.currents strong, .currentlocation, .clear{display:none;}
/*---------comments--------*/

.comments {
font-family: "arial", sans-serif;
font-size: 20px;
text-align: right;
background-color: transparent !important;
padding: 0px 5px 0px 5px;
position: relative;
top: 0px;
border-top: 1px solid #888;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #000000;
}

div.comments a:hover {
color: #ffffff;
text-decoration: none;
}

/*---------separator--------*/

.separator{
/* for formatting separators between entries */
height: 35px;
display:none;
}

/*---------friends page--------*/

.userpicfriends {
position: relative;
float: right;
padding: 10px;
margin: 5px 10px 10px 10px;
text-align: center;
border:none;
font-family: "tahoma", sans-serif;
font-size: 9px;
z-index: 15;
background-color: #000;
height: 100px;
width: 100px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
}

.userpicfriends img{width:100%; height:100%;}
/*---------sidebar--------*/

#sidebar {
padding-top: 5px;
margin-top: 10px;
background-color: transparent !important;
border-color: none;
font-size: 12px;
font-family: "courier new", sans-serif;
color: #888;
width: 210px;
text-align: left;
position: absolute;
right: 125px;
top: 125px;
letter-spacing: 0px;
}

.defaultuserpic{display:none;
}

.sbarheader {
padding: 0px 5px 0px 5px;
}

.sbarbody {
padding: 0px 5px 0px 5px;
}

.sbarbody2 {
padding: 0 15px 0 15px;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #fff;

}

div#sidebar a:hover {
color: #000;
text-decoration: none;
background-color: #fff;
}

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

.sbarcalendar {
border-color: #888;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "arial", sans-serif;
font-size: 11px;
color: #000;
}

.sbarcalendarposts {
border-color: #eee;
border-width: 1px;
border-style: solid;
background-color: #eee;
text-align: center;
font-family: "arial", sans-serif;
font-size: 9px;

}

ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}

li.sbaritem
{
padding-left: 15px;
list-style: none;
border-bottom: 1px solid #fff;
color: #fff;
background-color: #000;
}
li.sbaritem:hover{background-color:#fff; color:#000;}
li.sbartitle
{
padding-left: 25px;
list-style: none;
border-bottom: 2px solid #fff;
margin-bottom: 0px;
margin-top: 20px;
color: #fff;
font-size: 27px;
font-family: arial black;
text-transform: uppercase;
background: #000;
width: auto;
}
li.sbartitle:hover{background: #fff; color:#000; border-bottom: 2px solid #000;}
#sidebar_summary{display:none;}
/*---------footer--------*/

#footer {
width: 10%;
text-align: center;
font-family: "arial black", sans-serif;
font-size: 30px;
font-weight: lighter;
letter-spacing: 1px;
background-color: #fff;
color: #000000;
border: none;
z-index: 100;
clear: both;
}

#footer .viewing {display:none;}

ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter:hover, ul.navfooter li:hover{background-color:#000; color:#fff;}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

/*---------archive page--------*/

ul.year {
text-align: center;
padding-bottom: 40px;
}

ul.year li {
display: inline;
}

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

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #fff;
}

table.yeartable td.yearday {
background-color: #fff;
text-align: center;
}

td.yearmonth {
border-style: none;
}

/*---------comment page--------*/

.datesubjectcomment {
background-color: transparent !important;
padding: 5px;
margin-top: 15px;
border-bottom: 1px solid #eee;
color: #888;
font-family: arial;
}

.userpiccomment {
position: relative;
border:none;
border-color: none;
background-color: #eee;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: right;
border:none;
width: 100px;
height: 100px;
}

.box {
border:none;
padding: 10px;
clear: left;
}

input, textarea {
background-color: #888;
color: #fff;
font-family: arial;
font-size: 12pt;
}

textarea.textbox {
width: 100% !important;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "arial", sans-serif;
font-size: 12px;
line-height: 125%;
background-color: #eee;
color: #000000;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 14px;
font-family: "georgia", sans-serif;
color: #888;
}

.commentbox {

border-top:1px solid #fff;
border-bottom: 1px solid #fff;
padding: 10px;
margin: 10px;
background-color: #fff;
color: #000;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #000;
}

.datesubjectcomment a:hover {
color: #888;
}

.commentboxpartial {
border: none;
padding: 10px;
margin: 10px;
background-color: #eee;
}

.commentinfo {
background-color: #eee;
margin-top: 10px;
width: 100%;
}

.skiplinks {
text-align: center;
}

/*---------misc--------*/

.clear {
height: 15px;
}

div.ContextualPopup div.Inner{
width: 235px;
color: #666666!important;
padding: 10px;
font: normal 10pt arial;
}

div.ContextualPopup .Content{
border: none;
}

div.ContextualPopup .Userpic{
padding: 10px;
background-color: #FFFFFF;
margin: 0px;
border: 1px solid #efefef;
}

textarea.textbox {
width: auto !important;
}

/*LINKS*/
a, a:link, a:visited {
color: #000;
text-decoration: none;
}

a:hover {
color: #3A3A3A;
text-decoration: underline;
}

p, td, blockquote {
font-size: 12px;
letter-spacing: 0px;
font-family: arial;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
padding: 5px;
color: #000;
}

code, kbd, pre, tt {
font-family: monospace;
}

b, s, u { color: #000;
}
i{font-family: georgia; color: #444;}
big, small{font-family: arial;}

/*---------tiny icons--------*/

img[src*="img/userinfo.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !

important;
background: transparent url(http://i41.tinypic.com/16is8yv.png) no-repeat; padding: 10px 0 0 10px !

important; }
img[src*="img/community.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height:

0 !important;
background: transparent url(http://i39.tinypic.com/2hi1nbd.png) no-repeat; padding: 10px 0 0 10px !

important; }
img[src*="img/syndicated.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height:

0 !important;
background: transparent url(http://i42.tinypic.com/2llzzls.png) no-repeat; padding: 16px 0 0 16px !

important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto;

height: 0 !important;
background: transparent url(http://i41.tinypic.com/52g85z.png) no-repeat; padding: 16px 0 0 16px !

important; }
img[src*="img/icon_private.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto;

height: 0 !important;
background: transparent url(http://i39.tinypic.com/2a9qmn9.png) no-repeat; padding: 10px 0 0 10px !

important; }

Features
topbar, sidebar

Additional Customization
depending on how long your journal title is, you may need to adjust the margins in the content so your title does not overlap your entries. to do that you will need to go to the #content and increase the value on the margin-top class.
you may also need to adjust the height of the navigation links and the sidebar. to do this, you will need to find the #sidebar section and the ul.navheader section. in both of these sections you will need to play around with the top value, making it either larger or smaller in order to align with your entries.
for any of these options, if you wish to hide them, you may always add display: none; tag after any one of these header items.

Credits

tiny icons by pinvoke

Questions

If you have a questions, please make sure you read through all the information provided here, and the FAQ before you ask. I will not answer/help if you don't take the time out to find an answer before coming to me.
FAQ | HOW TO CREDIT

like what you see?

watch | more layouts

type: layout, &style: flexible squares, !maker: apologize

Previous post Next post
Up