My Sweetest Sin

Designer's Comments

Look carefully for specific instructions

My first Layout.
Not that hard to use. Just Copy the code, (make sure the journam is 'Flexible Squares) click on customize Journal Style, and Past where it says 'Custom CSS'.

Make sure where it says:

Use layout's stylesheet(s) - NO
Use layout's stylesheet(s) when including custom external stylesheet - NO
Use external stylesheets - YES

Edit: Due to people using my layout and not thanking me or giving me credit out of their own will, I'd appreciate it that from now on my livejournal account: "xDevilsxAngelsx" be credited.

Using This Layout

For specific instructions read designer's comments

1. Log into livejournal.com (customize)
2. Set Style System to S2
3. Click on Look and Feel
4. Set Layout to Flexible Squares
5. Click on Custom Options
6. Click on Custom CSS
7. Copy (ctrl c) and paste (ctrl v) code to Custom CSS

Layout Code

Copy and paste to Custom Style Sheet

Help

Set style to Flexible Squares

/* Cleaned CSS: */

body {
        background-color: #838383;
        
    background-image: url("");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
        
        ;
        color: #838383;
        font-family: "Arial", sans-serif;
        font-size: 11px;
        margin: 20px 0 20px 0;
        }

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

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

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

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

#content
    {
        width: 715px;
        margin-left: auto; margin-right: auto;
        background-color: #040404;
        border-width: px;
        border-style: solid;
        border-color: #040404;
        padding: 15px;
    }

#maincontent {
        width: 545px;
        margin-top: 15px;
        font-family: "Arial", sans-serif;
        font-size: 11px;
        background-color: #040404;
        color: #838383;
        border-style: solid;
        border-color: #484848;
        border-width: 1px;
        text-align: left;
        }

#sidebar {

padding-top: 15px;
        margin-top: 15px;
        background-color: #040404;
        border-color: #484848;
        border-width: 1px;
        border-style: solid;
          font-size: 11px;
        font-family: "Arial", sans-serif;
          color: #838383;
        width: 160px;
        float: right;
        text-align: left;
        }

#header {
        padding: 10px 0px 20px 0px;
        margin: 0px;
        text-align: center;
        font-family: "Arial", sans-serif;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 2px;
        border-style: solid;
        border-color: #484848;
        border-width: 0px;
        background-color: #040404;
        color: #838383;
        }

#footer {
        text-align: center;
        font-family: "Arial", sans-serif;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 1px;
        background-color: #040404;
        color: #838383;
        border-color: #484848;
        border-width: 1px;
        border-style: solid;
        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: #484848;
    }

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

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

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

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

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

/* sidebar */

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

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

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

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

.sbarcalendarposts {
        border-color:  #484848;
        border-width: 1px;
        border-style: solid;
        background-color: #040404;
        text-align: center;
        font-family: "Arial", sans-serif;
        font-size: 11px;
        }

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

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

li.sbartitle
    {
        padding-left: 15px;
        list-style: none;
        border-style: solid;
        border-width: 1px;
        border-color: #484848;
        background-color: #040404;
        margin-bottom: 10px;
        margin-top: 10px;
    }

/* maincontent */

.subcontent {
    }

.entry    {
        margin: 0px 10px 10px 30px;
        padding: 10px;
        background-color: #040404;
        color: #838383;
        font-family: "Arial", sans-serif;
        font-size: 11px;
        text-align: left;
        border-width: 1px;
        border-color: #484848;
        border-style: solid;
        }

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

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

.userpic {
        position: relative;
        float: left;
        background-color: #040404;
        padding: 5px;
        margin: 10px;
        z-index: 15;
        border-width: 1px;
        border-color: #484848;
        border-style: solid;
        }

.userpicfriends {
        position: relative;
        float: left;
        padding: 5px;
        margin: 10px;
        text-align: center;
        border-style: solid;
        border-width: 1px;
        border-color: #484848;
        font-family: "Arial", sans-serif;
        font-size: 11px;
        z-index: 15;
        }

.date {
        line-height: 200%;
        top: 5px;
        color: #484848;
        font-family: "Arial", sans-serif;
        font-size: 11px;
        }

.subject {
        font-weight: bold;
        padding: 10px;
        color: #484848;
        font-family: "Arial", sans-serif;
        font-size: 11px;
        }

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

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

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

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

.comments {
        font-family: "Arial", sans-serif;
        font-size: 11px;
        text-align: right;
        background-color: #040404;
        padding: 0px 5px 0px 5px;
        position: relative;
        top: 15px;
        }

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

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

/* maincontent --  entry, reply pages */

.datesubjectcomment {
            background-color: #040404;
            padding: 5px;
            margin-top: 20px;
            }

.userpiccomment {
        position: relative;
        border-width: 5px;
        border-style: solid;
        border-color: #484848;
        background-color: #040404;
        top: -30px;
        left: 0px;
        padding: 5px;
        margin: 10px 10px -20px 10px;
        z-index: 15;
        float: left;
        border-width: 1px;
        border-color: #484848;
        border-style: solid;
        }

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

input, textarea {
        background-color: #040404;
        color: #838383;
        }

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

.reply    {
        position: relative;
        margin: 20px 30px 10px 30px;
        padding: 25px 10px 10px 10px;
        text-align: left;
        font-family: "Arial", sans-serif;
        font-size: 11px;
        line-height: 125%;
        background-color: #040404;
        color: #838383;
        border-color: #484848;
        border-width: 1px;
        border-style: dashed;
        }

.replytosubject {
        font-weight: bold;
        }

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

.commentbox {

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

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

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

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

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

table.yeartable td.yearday {
        background-color: #040404;
        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 {
    position: relative;
    width:  750px; /* Width of the banner, in pixels */
    height: 400px; /* Height of the banner, in pixels */
    margin-left: auto; /* To center image leave as auto */ 
                        /* To right align leave as auto */
                        /* To left align change to 20px */
    margin-right: auto; /* To center image leave as auto */ 
                         /* To right align change to 20px */
                         /* To left align leave as auto */
    margin-bottom: 10px;    
    background-image:

url("http://cbimg6.com/layouts/08/09/31467aa.png"); /* Header image URL */
    background-repeat: no-repeat;

/* 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: #484848;
        background-color: #040404;
    }

Layout Comments

Showing latest 10 of 12 comments

/:{ it wont work :{ help

By Britdafish422 on May 1, 2011 6:30 pm

ville :D

By SaturdayRiot on Aug 14, 2009 12:49 am

Cool, Thank you

By akai69 on Jul 6, 2009 1:50 am

Oh wow ...
Nevermind. I figured it out -_-
Silly me! I needed to change the layout style to flexible squares >.> That's what it meant..

By miila on May 7, 2009 1:21 am

I am having troubles :(
I have it in S2. and I put the code into the css box
And I changed 'use layout's stylesheets' to no
But I do not know what to do where it says 'use layout's theme stylesheet'
Do I select yes or no?
And I cannot find 'Use layout's stylesheet(s) when including custom external stylesheet'
When I just did it the way I did it my page just came up gray :(

Any help?! I really love this layout! :(

By miila on May 6, 2009 9:56 pm

I love it. you should make one for myspace

By Katehness on Jan 28, 2009 11:40 am

Thanks for sharing this awesome layout! Am currently using!

By colonoscarpeay on Dec 12, 2008 12:46 pm

Vey nice, using! ^^

By evershadowangel on Nov 29, 2008 11:15 am

Can someone tell me how to make a own layout please?
please mail me
nayrakyllek@yahoo.de

By jiaxin on Oct 30, 2008 11:39 am

w00t! thanks for uploading this! Helped out a LOT. Question though: in IE there's a huuge gap from the first entry from where the links are, how do I fix that? -> http://bastduluna.livejournal. com/

By Toffeecoo on Sep 23, 2008 3:19 am

View all »

Layout Details

Designer	Perkele-x-Enkeli
Submitted on	Sep 18, 2008
Page views	22,310
Favorites	10
Comments	12
Reviewer	schizo
Approved on	Sep 18, 2008

My Sweetest Sin

Designer's Comments

Using This Layout

Layout Code

Layout Comments

Layout Details

Layout Colors

Layout Tags

Layout Tools

Layout Affiliates