#55 - The Human Stain: gawariel

gawariel in gawariel_design

#55 - The Human Stain

Oct 10, 2007 19:09

D E S C R I P T I O N

Name:

The Human Stain

Description:

Dark layout in the S2 style Tranquility II.

For the header I used a scanned in image from the cd-booklet of Kamelot's latest cd 'Ghost Opera'. You can find the original scanned in image here.
The lyrics typed in the header come from a georgious song with deep lyrics from that particular cd called The Human Stain.

G E N E R A L I N F O R M A T I O N

Works with ads?:

Yes

Style:

Tranquility II.

Tested in:

IE and Mozilla Firefox.

Best Resolution:

1024*768 and above

Works with Navigation Strip?:

Yes

Credit:

Please put a link to gawariel_design in your profile or sidebar.

{Bigger}

I N S T A L L A T I O N

Go to Manage:

Customize

Select a New Theme:

Type Tranquility II in the search box.
Click 'Search'.
Apply any theme that you get in the search results, it doesn't really matter which one!

Choose a Page Setup:

Click Customize Selected Theme

Note:

The following section(s) can be found in the left, blue sidebar of the page.
Only the sections I mention are the ones you MUST adjust. You can play with the rest as you please.

Custom CSS:

Use layout's stylesheet(s): No
Custom external stylesheet URL: Leave empty
Custom stylesheet: Paste the stylesheet (given bellow) in this box.

Hit "save changes".

I M A G E S & C O D E

Images:

The images are hosted on my account, but it is recommended that you upload them yourself. Don't forget to change the URL's in the code!

Code:

/* LAYOUT 55: THE HUMAN STAIN */
/* S2 STYLE: TRANQUILITY II */
/* HEADER ART AND LYRICS: KAMELOT (http://www.kamelot.com/) */
/* AVAILABLE AT GAWARIEL_DESIGN (http://community.livejournal.com/gawariel_design/) */
/* CREATED BY GAWARIEL (http://gawariel.livejournal.com/) */
/* ALL IMAGES MADE IN PHOTOSHOP CS */
/*-----------------------------------------------------------------------------------------------*/

/*------------------------------*/
/*------------ MISC ------------*/
/*------------------------------*/

blockquote {
background: #17201D;
padding: 8px;
border: 1px solid #4A6C60;
border-left: 8px solid #4A6C60;
color: #798A84;
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(http://i19.photobucket.com/albums/b153/gawariel_design/55_The%20Human%20Stain/lj-user.png);
padding: 19px 15px 0 0!important;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i19.photobucket.com/albums/b153/gawariel_design/55_The%20Human%20Stain/lj-user.png);
padding: 19px 15px 0 0!important;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i19.photobucket.com/albums/b153/gawariel_design/55_The%20Human%20Stain/lj-comm.png);
padding: 18px 18px 0 0!important;
}

.ljuser a b{
padding-left:0px;
font-weight:normal;
}

/*------------------------------*/
/*------------ PAGE ------------*/
/*------------------------------*/

body {
background: #0F0F0F url(http://i19.photobucket.com/albums/b153/gawariel_design/55_The%20Human%20Stain/pattern.jpg);
font-family: georgia, serif;
font-size: 12px;
color: #728888;
text-align: justify;
}

a , a:visited {
color: #289494;
text-decoration: none;
font-weight: normal;
}

a:hover, a:visited:hover {
color: #47B3B3;
text-decoration: underline;
}

a img {
border: none;
}

/*------------------------------*/
/*------------ MAIN ------------*/
/*------------------------------*/

#container {
position: relative;
background: #181816 url(http://i19.photobucket.com/albums/b153/gawariel_design/55_The%20Human%20Stain/Container.jpg) repeat-y;
width: 850px;
margin: 0 auto;
text-align: left;
margin-top: -7px;
}

#content {
width: 649px;
position: relative;
margin-left: 201px;
margin-top: -40px;
text-align: justify;
}

#menu {
position: relative;
float: left;
width: 200px;
left: 50%;
margin-left: -425px;
margin-top: -430px;
color: #72827D;
text-align: justify;
}

/*------------------------------*/
/*----------- HEADER -----------*/
/*------------------------------*/

#header {
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/55_The%20Human%20Stain/Header.jpg) no-repeat top right;
height: 446px;
border: none;
}

#header h1 {
display: none;
}

/*------------------------------*/
/*----------- ENTRIES ----------*/
/*------------------------------*/

#entries {
padding: 8px;
}

.ind-entry {
padding-bottom: 20px;
}

.ind-entry h3 img,
.ind-comment-one h3 img,
.ind-comment-two h3 img,
.ind-comment-screened h3 img {
position: relative;
float: right;
margin: 8px 0px 8px 12px;;
border: 5px solid #487474;
}

.ind-entry h2 {
font-family: Georgia, serif;
color: #487474;
font-size: 20px;
border-bottom: 1px solid #487474;
padding: 0px 0px 10px 0px;
}

.ind-entry h4 {
margin: 10px 0px 15px 0px;
padding: 7px 10px;
border: 1px solid #2A2C26;
background: #1F231D;
font-size: 11px;
}

.ind-entry h4 b {
font-weight: normal;
}

.ind-entry .entry-item {
line-height: 20px;
}

.ind-entry .entry-item:first-letter {
font-size: 20px;
}

.ljtags {
display: block;
padding: 20px 0px 0px 0px;
text-align: left;
}

/*------------------------------*/
/*----------- SIDEBAR ----------*/
/*------------------------------*/

#menu h2 {
margin: 20px 8px 5px 5px;
padding: 0px 0px 5px 5px;
color: #328567;
border-bottom: 1px solid #328567;
font-size: 16px;
}

#menu h2.userpic {
margin: 0px;
padding: 0px 0px 30px 50px;
border: 0px;
}

#menu h2.userpic img {
padding: 2px;
background: #17201D;
border: 5px solid #4A6C60;
}

#menu a:link,
#menu a:visited,
#menu a:active {
color: #91CCB8;
}

#menu a:hover {
color: #91A09B;
}

#menu ul {
margin: 0px 15px 0px 10px;
padding: 0px;
}

#menu ul li {
padding: 5px 0px;
list-style: none;
border-bottom: 1px solid #1F3931;
}

ul#lj-links {
margin: 0px;
}

ul#lj-links li {
height: 29px;
margin: 0px 0px 5px 5px;
padding: 0px;
border: 0px;
list-style: none;
font-variant: small-caps;
font-family: verdana;
font-weight: bold;
}

ul#lj-links li.active {
padding: 0px 0px 0px 60px;
line-height: 29px;
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/55_The%20Human%20Stain/Navigation.png) 0px 0px no-repeat transparent;
color: #91A09B;
text-decoration: underline;
}

ul#lj-links li a {
display: block;
height: 29px;
line-height: 29px;
padding: 0px 0px 0px 80px;
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/55_The%20Human%20Stain/Navigation.png) 0px -29px no-repeat transparent;
color: #91CCB8;
font-weight: bold;
}

ul#lj-links li a:hover {
padding: 0px 0px 0px 80px;
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/55_The%20Human%20Stain/Navigation.png) 0px 0px no-repeat transparent;
color: #91A09B;
}

ul#user-links li {
padding: 0px;
}

ul#user-links li a {
display: block;
padding: 5px 0px;
}

/*--------------------------------*/
/*------------ FOOTER ------------*/
/*--------------------------------*/

#footer {
position: relative;
text-align: center;
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/55_The%20Human%20Stain/Footer.jpg) no-repeat bottom center;
height: 120px;
margin-bottom: -6px;
}

html*#footer {
margin: 0px;
}

#footer p {
padding: 20px;
}

#footer a {

}

#footer a:hover {

}

/*--------------------------------------*/
/*------------ COMMENT PAGE ------------*/
/*--------------------------------------*/

#comments .entry-item {
margin: 10px 0px;
}

.ind-comment-one h4,
.ind-comment-two h4,
.ind-comment-screened h4 {
margin: 10px 0px;
padding: 10px 0px;
border-top: 1px solid #487474;
border-bottom: 1px solid #487474;
}

.ind-comment-one,
.ind-comment-two,
.ind-comment-screened {
margin: 10px 0;
padding: 10px;
border: 1px solid #2A2C26;
text-align: left;
}

.ind-comment-one h2,
.ind-comment-two h2,
.ind-comment-screened h2 {
color: #289494;
font-size: 1.4em;
text-align: left;
}

.ind-comment-one {
background: #17201D;
}

.ind-comment-two {
background: #202B28;
}

input {
background: #171816;
color: #728888;
padding-left: 3px;
margin-bottom: 5px;
margin-top: 5px;
}

select {
background: #171816;
color: #728888;
}

textarea {
color: #728888;
background: #252624;
margin: 3px;
width: 95%;
padding-left: 3px;
}

E X T R A

Icons:

FO Banners:

T R O U B L E S H O O T I N G

Before asking any questions, make sure you read all information above thouroughly and that your question isn't adressed in the FAQ.

If your problem still isn't solved, you are welcome to ask your question here

Kamelot - The Human Stain

This is the song that inspired the layout.
Don't mind the dramatic metal-guys, lol. Just listen to the song and lyrics!

See the cemetery sky
Carmine red and deep
Watch the oceans rising high
It's the human stain

Talk about the growing hunger
Ask why with deep concern
Don't you think the human races
Is ceaselessly vain

[CHORUS]
But it hurts to be
Alive my friend
In this silent tide
We're driftwood passing by

Don't you wish you
Were a child again
Just for a minute
Just for a minute more

Hear the ticking of a clock
The sound of life itself
No one really wants to die
To save the world

Tell me that you're torn asunder
From how we fail to learn
And tell me as the Earth goes under
Where's your anger now

[CHORUS]
So it hurts to
Be alive, my friend
In this masquerade where all one day must die

Don't you wish you
Were unborn again
Just for a minute
Just for a minute more

[Solo]

Tic-Toc
The ticking at the tear asunder
The beating from a heart of stone
The loss of your divine prosperity

[CHORUS]
'Cause it costs to
Be alive, my friend
And this life that someone
Merely gave to you

That's the price you pay
Minute by minute
You beg for a minute more
Full lyrics

layouts: account status: plus, graphics, layouts: account status: paid, layouts: [s2]: tranquility ii, layouts: account status: basic, graphics: fo banners, layouts: [s2], layouts, graphics: icons