My Thoughts, Art, and Writing - LiveJournal Layout: Bioshock

Previous | Memories | Tell a Friend | Next

janine42584

13 April 2008 @ 11:22 am

LiveJournal Layout: Bioshock

~Please Comment if Taking
~Please Credit

janine42584 if using

Note: While it is not ever required that you host the image on your own server (or really somewhere free like Photobuck or ImageShack) I am going to start requesting that you do.

There are three images within the code: under "body," "#sidebar," and "#header." All you need to do to host these somewhere else is (for example with ImageShack) under upload click "URL" then paste any of the urls from the code (from http://... to .jpg) and click upload, a new url will be given to you (make sure to take the last one it says "direct link to image") then copy and paste that url where the old one use to be in the code. And there you have it, your own hosted image for the layout.

Now the reason I'm asking this is because, while ImageShack (and Photobucked) do offer quite a bit of hosting time and bandwith use for image you have on there, I've had problems with some layouts in the past having headers or backgrounds disappear. I'm just trying to make it so this will hopefully no longer happen. Thanks!

Made With S2 and Flexible Squares Layout

UPDATE: USING NEW CUSTOMIZE SYSTEM

1. Click "Customize"
2. In the cute little search thing type "flexible squares"
3. Click the "Apply Theme" button for any theme (I'm clicking "Black, White, and Red All Over," but honesly I don't believe it matters which theme you pick so long as it's a flexible squares one)
4. Click "Customize" Under the theme
5. Click the last link in this new section "Custom CSS"
6. Make sure all dropdown boxes say "NO"
7. Copy and paste the override code into the box provided
8. Click "Save Changes" and there you have it!

Override Code

/* Layout Created By Janine  - http://janine42584.livejournal.com */

/* Cleaned CSS: */

body {
	background: url(http://img176.imageshack.us/img176/8184/backgroundld2.jpg) top center repeat-y #0e240f;
        color: #9c9f64;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
	margin:0px;
	padding:0px;
	text-align:center;
        }

a, a:link, a:visited {
        color: #887a79;
        text-decoration: none;
        }

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

p, td, blockquote {
            font-size: 11px;
        }

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

#content
    {
        width: 950px;
        margin-left: auto; margin-right: auto;
        padding: 0px;
    }

#maincontent {
 	margin: 0px 20px 0px 220px;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        color: #9c9f64;
        text-align: left;
        }

#sidebar {
	background: url(http://img211.imageshack.us/img211/2465/sidebarxb3.jpg) top left no-repeat transparent;
        padding-top: 50px;
        margin-top: 0px;
          font-size: 11px;
        font-family: "Verdana", sans-serif;
          color: #9c9f64;
        width: 200px;
        float: left;
        text-align: left;
        }

#header {
	background: url(http://img441.imageshack.us/img441/1879/headerdg7.jpg) top center no-repeat transparent;
	height:350px;
        margin: 0px;
        text-align: center;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 2px;
        color: #887a79;
        }

#footer {
        text-align: center;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 1px;
        color: #9c9f64;
        z-index: 100;
        clear: both;
        }

/* header -- links to views; title of journal; subtitle of journal */

div#header a, div#header a:link, div#header a:active, div#header a:visited {
	color: #887a79;
	font-weight: bold;
	text-decoration; none;
	border:0px;
}
div#header a:hover {
	color:#ffa9c1;
	border: 0px;
	font-weight: bold;
	text-transform:uppercase;
	text-decoration: none;
}
div#footer a, div#footer a:link, div#footer a:active, div#footer a:visited {
	color: #887a79;
	padding: 5px;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	border:0px;
}
div#footer a:hover {
	color: #ffa9c1;
	font-weight:bold;
	padding: 5px;
	font-weight: normal;
	text-decoration; none;
	border:0px;
}
ul.navheader {
	margin:0px;
	height: 350px;
	position: relative;
	padding-top:175px;
	padding-left:350px;
}
ul.navheader li {
	text-align: left;
	list-style-type: none;
	padding: 0 3px;
	margin: 3px 0;
	color: #887a79;
	font-weight:bold;
	font-variant:small-caps;

}

.title    {
	display:none;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        font-weight: normal;
        line-height: 200%;
        top: 10px;
        }

.subtitle{
	display:none;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        font-weight: normal;
        top: 10px;
        }

/* sidebar */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
        color: #887a79;
    }

div#sidebar a:hover {
        color: #ffa9c1;
        text-decoration: none;
    }

.defaultuserpic {
        text-align: center;
        }

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

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

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

#sidebar_summary li.sbaritem {
        margin: 0 10px;
        padding: 3px 0;
        border-bottom: 1px #000201 solid;
    }

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

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

.sbarcalendarposts {
        border-color:  #9c9f64;
        border-width: 1px;
        border-style: solid;
        background-color: #000201;
        text-align: center;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        }

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

li.sbaritem, .tagcloud
    {
        padding-left: 5px;
        list-style: none;
    }

li.sbartitle
    {
        padding-left: 5px;
        list-style: none;
        margin-bottom: 10px;
        margin-top: 10px;
        font-size: 13px;
	font-weight:bold;
	font-variant:small-caps;
	border-top-style:solid;
	border-top-width:2px;
	border-top-color:#467152;
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-bottom-color:#467152;
	color:#467152;
    }

/* maincontent */

.subcontent {
    }

.entry    {
        margin: 0px 10px 10px 30px;
        padding: 10px;
        color: #9c9f64;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        text-align: left;
        }

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

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

.userpic {
        position: relative;
        float: right;
        padding: 5px;
        margin: 10px;
        z-index: 15;
	background-color:transparent !important;
        }

.userpicfriends {
        position: relative;
        float: right;
        padding: 5px;
        margin: 10px;
        text-align: center;
        font-family: \"Verdana\", sans-serif;
        font-size: 11px;
        z-index: 15;
	background-color:transparent !important;
        }

.userpicfriends a font{
	color: #887a79 !important;
        text-decoration: none;
	}

.userpicfriends a:hover font{
	color: #ffa9c1 !important;
        text-decoration: none;
	}

.date {
        line-height: 200%;
        top: 5px;
        color: #467152;
        font-family: "Verdana", sans-serif;
        font-size: 12px;
	font-weight:bold;
        }

.subject {
        font-weight: bold;
        padding: 10px;
        color: #467152;
        font-family: "Verdana", sans-serif;
        font-size: 13px;
	font-weight:bold;
	font-variant:small-caps;
        }

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

.subject a:hover {
        color: #ffa9c1;
        }

.datesubject {
        padding: 5px;
	border-top-style:solid;
	border-top-width:2px;
	border-top-color:#467152;
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-bottom-color:#467152;
	margin-right:120px;
	margin-top:10px;
	background: url(http://img241.imageshack.us/img241/8803/datesubjectqc2.jpg) center right no-repeat transparent;
        }

.currents, .currentmood, .currentmusic {
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        }

.comments {
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        text-align: right;
        padding: 0px 5px 0px 5px;
        position: relative;
        top: 15px;
	height:35px;
        }

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

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

/* maincontent --  entry, reply pages */

.datesubjectcomment {
            padding: 5px;
            margin-top: 20px;
            }

.userpiccomment {
        position: relative;
        top: -30px;
        left: 0px;
        padding: 5px;
        margin: 10px 10px -20px 10px;
        z-index: 15;
        float: right;
	background-color:transparent !important;
        }

.userpiccomment a font{
	color: #887a79 !important;
        text-decoration: none;
	}

.userpiccomment a:hover font{
	color: #ffa9c1 !important;
        text-decoration: none;
	}

.box {
        border-style: solid;
        border-width: 1px 0px 0px 0px;
        border-color: #000201;
        padding: 10px;
        clear: right;
        }

input, textarea {
        background-color: #000201;
        color: #9c9f64;
        }

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

.reply    {
        position: relative;
        margin: 20px 30px 10px 30px;
        padding: 25px 10px 10px 10px;
        text-align: left;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        line-height: 125%;
        color: #9c9f64;
        }

.replytosubject {
        font-weight: bold;
        }

.commentreply {
        position: relative;
        margin: 10px;
        font-size: 11px;
        font-family: "Verdana", sans-serif;
        color: #9c9f64;
        }

.commentbox {

border-color: #000201;
        border-width: 1px;
        border-style: solid;
        padding: 10px;
        margin: 10px;
        background-color: #000201;
        }

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

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

.commentboxpartial {
        border-color: #000201;
        border-width: 1px;
        border-style: solid;
        padding: 10px;
        margin: 10px;
        background-color: #000201;
        }

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

/* maincontent -- year/achive pages */

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: #000201;
        }

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

td.yearmonth {
        border-style: none;
        }

/* footer */

ul.navfooter{
        padding: 0px;
        margin: 0px;
        }

ul.navfooter li  {
        display: inline;
        margin: 0 5px 0 5px;
        }

.clearfoot {
        clear: both;
        }

/* misc  */

.clear {
        height: 15px;
        }

.skiplinks {
        text-align: center;
        }

.headerimage {
        /* for formatting header image */
        }

.separator{
        /* for formatting separators between entries */
        height: 35px;
	background: url(http://img397.imageshack.us/img397/8060/sepzd9.jpg) center center no-repeat transparent;
    }

* html div.subcontent {
        /* fixes an IE reply page bug */
        height: 1%;
        clear: none;
    }

* html div.box#commentform {
        /* fixes an IE reply page bug */
        position: absolute;
        border-width: 1px;
        border-style: solid;
        border-color: #000201;
        background-color: #0e240f;
    }

div.ljtags {
	margin: 10px 0px 0px 0px;
	font-weight: bold;
	}

#lj_controlstrip {
    background-color: #000201;
    background-image: url(http://stat.livejournal.com/palimg/controlstrip/bg.gif/pt000201373a23);
}

#lj_controlstrip td {
    color: #887a79;
    border-bottom: 1px solid #000201;
}

#lj_controlstrip_statustext {
    color: #887a79;
}

#lj_controlstrip a {
    color: #887a79;
}

#lj_controlstrip a:hover {
    color: #ffa9c1;
}

#lj_controlstrip_user,
#lj_controlstrip_actionlinks,
#lj_controlstrip_search,
#lj_controlstrip_login,
#lj_controlstrip_loggedout_userpic {
    border-right: 1px solid #000201;
}

#lj_controlstrip_login td {
    border-bottom: 0;
}

#lj_controlstrip td td {
    border-bottom: 0;
}

#lj_controlstrip_userpic {
    background-image: url(http://stat.livejournal.com/palimg/controlstrip/ljlogo.gif/pt000201dbe087);
}

#lj_controlstrip_loggedout_userpic {
    background-image: url(http://stat.livejournal.com/palimg/controlstrip/ljlogo-loggedout.gif/pt000201dbe087);
}

Tags: layout - livejournal, layout - livejournal - flexible squares, video game - bioshock

Current Mood:

stressed

15 comments | Leave a comment

( Post a new comment )

nerdfury on April 13th, 2008 09:14 pm (UTC)

Oooh! So seriously taking! <3

I wish you could do an Okami layout! I've got all this hi-res stuff from the game that would seriously make an awesome layout.

(Reply) (Thread) (Link)

pleasuresick on April 13th, 2008 09:14 pm (UTC)

it's absolutely adorable that she calls him mr. bubbles. makes me kind of sad when you have to kill him they seem like such a sweet duo.

(Reply) (Thread) (Link)

janine42584 on April 25th, 2008 07:12 pm (UTC)

So sorry it's taken me so long to respond to your comment :) I totally feel the same way about killing Mr. Bubbles. But then again, the Little Sisters voice just kinda gets more and more eerie. Whenever I hear it I just tense up. Such a great game! Glad you like the layout!

(Reply) (Parent) (Thread) (Link)

force_oblique on April 14th, 2008 08:15 pm (UTC)

Oh wow this is excellent and so pretty!
Thanks so much for sharing!!

(Reply) (Thread) (Link)

fembuck on April 21st, 2008 02:47 am (UTC)

OMG!

So cool.

I don't even know what Bioshock is and this amazes me. Your work is so *bows down*. Grabbing. Thanks so much for sharing your talent with us all :D

(Reply) (Thread) (Link)

janine42584 on April 25th, 2008 07:08 pm (UTC)

Bioshock is a really awesome and fun video game (for XBox360 and PC). It's my current obsession. I'm so happy you like the layout! Thanks!!!

(Reply) (Parent) (Thread) (Link)

sexodevil on May 1st, 2008 07:52 pm (UTC)

Wow, i love your work!! I really love it!! and i was wonderinf if you are taking request now... I would LOVE if you can make a Warrick (CSI: Vegas) layout ^.^

I hope you can. Kisses.

(Reply) (Thread) (Link)

spooky_window on May 2nd, 2008 08:15 pm (UTC)

ok i know nothing about video game (please dont hit me XD) but i love the layout
1> it's a dark one, and as you know i love dark layouts
2> i love that it's just black and green, even if i dont know the game i think it really fit the pics =)

(Reply) (Thread) (Link)

janine42584 on May 5th, 2008 03:58 am (UTC)

Video games aren't for everyone ;) I just so happen to LOVE them, but I'm glad you like the layout even without knowing the subject matter.
You totally know how much I agree with you about dark layouts... I just love darker colors. And green and black are two of the prettiest colors around. Thanks so much hun for the comment! You know how much your opinion means to me!

(Reply) (Parent) (Thread) (Link)

jaykhew on June 7th, 2008 05:45 am (UTC)

thanks dude!! im using your layout with my own banner ..will credits u

(Reply) (Parent) (Thread) (Link)

oscar_jarjayes on July 5th, 2008 11:51 am (UTC)
two qestions

hi!
i use one of you'r stylsheet(first the HP i've changet and now the LotR), but i've a question. (sry for my english ^^;)
if i click on leave a comment thay changed to a other normal ly site. but i'll that he drop down the comment box in my styl, and not changed the page into a other. how i cant make this that he don't do this again? somewhere i've chaend it and one day it was running but now i don't know where i can found this option.
and a other question is, how i can change the color of the navigation strip?

i hope you understand me lol
i wish a nice day and i ♥ your styl's!

thx for helping
oscar♥♥♥

(Reply) (Thread) (Link)

janine42584 on July 5th, 2008 06:13 pm (UTC)
Re: two qestions

I am not sure if I completely understand the first question clearly, but I will try to answer as best I can. I think you are saying that when you click "leave a comment" and then are sent to the comment page the style of the page goes back to the LiveJournal basic one. This is because you have a "Basic" account. The only way I know to change this is to have a paid account. There may be another way to do this, but I am not aware of it.

For your second question, to change the color of the navigation strip:

If you mean to change the color of the links in the navigation strip go to the "#header {" portion of the code and change "color: #887a79;" to whatever color you want it to be.

Next find this section " /* header -- links to views; title of journal; subtitle of journal */"

Right under that you'll see this code:
"div#header a, div#header a:link, div#header a:active, div#header a:visited {
color: #887a79;
font-weight: bold;
text-decoration; none;
border:0px;
}"

And again for that "color: #887a79;" be whatever color you want the text to be.

I really hope this helped :) I love the graphics you're using with the layout! Great job!!!

(Reply) (Parent) (Thread) (Link)

oscar_jarjayes on July 5th, 2008 07:35 pm (UTC)
Re: two qestions

ah ok! i see. i'm not shure about the changing in to a paid accound (mony and so on lol).

with this navi.strip i mean this thing in the top of the page(username/log out button...). it is alway blak and gray at my lj and i've change the colors in edit journal->Customize your theme->and under display/nav.strip i've activate the Custom colors thing and change the colors there. but he didn't do anything on my lj. that sucks. :(

but thank you very much! :D~
and thx you'r like my graphics, that makes me glory! :D

(Reply) (Parent) (Thread) (Link)

janine42584 on July 5th, 2008 11:23 pm (UTC)
Re: two qestions

Hmmmm... Under customize, try selecting "Default Layout Colors" and see if that does it for you... but really that should be overridden by the code. I hope that work!

(Reply) (Parent) (Thread) (Link)

oscar_jarjayes on July 7th, 2008 09:08 am (UTC)
Re: two qestions

hm ok thank you! i will do my best :D~

(Reply) (Parent) (Thread) (Link)