My Thoughts, Art, and Writing - 2 LiveJournal Layouts

Previous | Memories | Tell a Friend | Next

janine42584

30 December 2007 @ 04:11 pm

2 LiveJournal Layouts - Sylar

~Please Comment if Taking
~Please Credit

janine42584 if using

Okie dokie. So apparently I really need to brush up on my reading. Last night when I was making all my Sylar layout requests (yes I have gone though all requests up to date, all 30 some odd pages of them, and organized them so I can hopefully get through as quickly as I'm able), back to my stupid story. So

acevilla3 requested a Sylar layout as well, from the same episode range as the other person. So I make the layout (actually two of them, I just love Sylar) and figure I'll code everything in the morning. When I go to start it today and I actually READ that it says it's a MySpace layout request ::face palm:: What does this little tale mean for all of you lovely people? It means you get even more layouts! Two MySpace, and two LiveJournal. This is the link to the My Space layouts post :)

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

/* Cleaned CSS: */

body {
	background: url(http://img295.imageshack.us/img295/5177/backgroundfd3.jpg) top center repeat-y #6a6e19;
        text-align: center;
        color: #81d73b;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        margin: 0px;
        }

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

a:hover {
        color: #48c524;
        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: #81d73b;
        text-align: left;
        }

#sidebar {
	background: url(http://img262.imageshack.us/img262/6117/sidebardg5.jpg) top left no-repeat transparent;
        padding-top: 80px;
        margin-top: 0px;
          font-size: 11px;
        font-family: "Verdana", sans-serif;
          color: #81d73b;
        width: 200px;
        float: left;
        text-align: left;
        }

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

#footer {
        text-align: center;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 1px;
        color: #81d73b;
        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:visited, div#footer a, div#footer a:link, div#footer a:visited {
        color: #c9f057;
    }

div#header a:hover, div#footer a:hover {
        color: #48c524;
        text-decoration: none;
    }

ul.navheader
        {
        padding-top: 345px;
        margin: 0px;
        }

ul.navheader li  {
        display: inline;
        padding: 0 3px 0 3px;
        }

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

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

/* sidebar */

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

div#sidebar a:hover {
        color: #48c524;
        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 #142008 solid;
    }

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

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

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

ul.sbarlist
    {
        margin-right: 15px;
        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-width: 2px;
        border-top-color: #cef56b;
        border-top-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #cef56b;
        border-bottom-style: solid;
	color: #cef56b;
    }

/* maincontent */

.subcontent {
    }

.entry    {
        margin: 0px 10px 10px 30px;
        padding: 10px;
        color: #81d73b;
        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;
        }

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

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

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

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

.subject a:hover {
        color: #48c524;
        }

.datesubject {
        padding: 5px;
        border-top-width: 2px;
        border-top-color: #cef56b;
        border-top-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #cef56b;
        border-bottom-style: solid;
	margin-top:20px;
	margin-right:120px;
        }

.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;
        }

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

div.comments a:hover {
        color: #48c524;
        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;
        }

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

input, textarea {
        background-color: #142008;
        color: #81d73b;
        }

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

.replytosubject {
        font-weight: bold;
        }

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

.commentbox {

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

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

.datesubjectcomment a:hover {
        color: #48c524;
        }

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

.commentinfo {
        background-color: #142008;
        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: #142008;
        }

table.yeartable td.yearday {
        background-color: #142008;
        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;
    }

* 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: #142008;
        background-color: #6a6e19;
    }

#lj_controlstrip {
	background: url(http://img255.imageshack.us/img255/2104/controlstripbggf3.jpg) top center repeat-y #6a6e19;
	margin:auto;
	width:950px;
	text-align:center;
}

#lj_controlstrip td {
    color: #81d73b;
    border:0px;
}

#lj_controlstrip_statustext {
    color: #81d73b;
    border:0px;
}

#lj_controlstrip a {
    color: #c9f057;
    border:0px;
}

#lj_controlstrip_user,
#lj_controlstrip_userlinks,
#lj_controlstrip_actionlinks,
#lj_controlstrip_search,
#lj_controlstrip_login,
#lj_controlstrip_loggedout_userpic {
        border:0px;
}

#lj_controlstrip_login td {
	border:0px;
}

#lj_controlstrip td td {
    border:0px;
}

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

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

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

Override Code

/* Cleaned CSS: */

body {
	background: url(http://img244.imageshack.us/img244/6526/backgroundbf8.jpg) top center repeat-y #211c09;
        text-align: center;
        color: #c5ae44;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        margin: 0px;
        }

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

a:hover {
        color: #a19a6d;
        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: #c5ae44;
        text-align: left;
        }

#sidebar {
	background: url(http://img143.imageshack.us/img143/2563/sidebarlt1.jpg) top left no-repeat transparent;
        padding-top: 100px;
        margin-top: 0px;
          font-size: 11px;
        font-family: "Verdana", sans-serif;
          color: #c5ae44;
        width: 200px;
        float: left;
        text-align: left;
        }

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

#footer {
        text-align: center;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 1px;
        color: #c5ae44;
        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:visited, div#footer a, div#footer a:link, div#footer a:visited {
        color: #fffffd;
    }

div#header a:hover, div#footer a:hover {
        color: #a19a6d;
        text-decoration: none;
    }

ul.navheader
        {
        padding-top: 347px;
	padding-right:25px;
        margin: 0px;
        }

ul.navheader li  {
        display: inline;
        padding: 0 3px 0 3px;
        }

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

div#sidebar a:hover {
        color: #a19a6d;
        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 #211e0b solid;
    }

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

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

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

ul.sbarlist
    {
        margin-right: 10px;
        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-width: 2px;
        border-top-color: #9f9557;
        border-top-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #9f9557;
        border-bottom-style: solid;
	color:#9f9557;
    }

/* maincontent */

.subcontent {
    }

.entry    {
        margin: 0px 10px 10px 30px;
        padding: 10px;
        color: #c5ae44;
        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;
        }

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

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

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

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

.datesubject {;
        padding: 5px;
        border-top-width: 2px;
        border-top-color: #724526;
        border-top-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #724526;
        border-bottom-style: solid;
	margin-top:20px;
	margin-right:120px;
        }

.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;
        }

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

div.comments a:hover {
        color: #a19a6d;
        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;
        }

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

input, textarea {
        background-color: #211e0b;
        color: #c5ae44;
        }

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

.replytosubject {
        font-weight: bold;
        }

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

.commentbox {

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

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

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

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

.commentinfo {
        background-color: #211e0b;
        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: #211e0b;
        }

table.yeartable td.yearday {
        background-color: #211e0b;
        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;
    }

* 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: #211e0b;
        background-color: #211c09;
    }

#lj_controlstrip {
	background: url(http://img182.imageshack.us/img182/6812/controlstripbgor9.jpg) top center repeat-y #211c09;
	margin:auto;
	width:950px;
}

#lj_controlstrip td {
    color: #c5ae44;
    border: 0;
}

#lj_controlstrip_statustext {
    color: #c5ae44;
    border: 0;
}

#lj_controlstrip a {
    color: #fffffd;
    border: 0;
}

#lj_controlstrip_user,
#lj_controlstrip_userlinks,
#lj_controlstrip_actionlinks,
#lj_controlstrip_search,
#lj_controlstrip_login,
#lj_controlstrip_loggedout_userpic {
    border: 0;
}

#lj_controlstrip_login td {
    border: 0;
}

#lj_controlstrip td td {
    border: 0;
}

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

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

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

Textures used created by: