unequally: [13] s2 flexisquares: forgery

septimal (

introject) wrote in

unequally,
@ 2008-04-25 20:32:00

Current mood:	satisfied
Entry tags:	s2: flexible squares, stylesheet

[13] s2 flexisquares: forgery
Weird notebook design layout... This is old, so I thought I'd share. *is currently working on the custom requests* x)). I'll get the icons posted up soon, too? I'm not much of an icon-maker though, so it's a little intimidating..

anyway.. rambling. Sorry!

Theme: S2 Flexible Squares
Browser: Functions on Firefox/IE, 800x600+. Not tested with plus ads.
ENABLED: Custom comment pages, sidebar, div-contexual pop-up, tiny icons.
TURNED OFF: title/subtitle.

| Live Preview ; Image Preview |

Codes:

/* made by INTROJECT @ LIVEJOURNAL.COM
can also be found at UNEQUALLY @ LIVEJOURNAL.COM */

body {
        background: #3bb3c0 url() top right repeat-y;
        text-align: left;
        margin: 0 auto 0 auto;
        font-family: arial, verdana, sans-serif;
        color: #d3d3d3;
        font-size: 8pt;
        }

a, a:link, a:visited, a:active {
        color: #117B86;
        text-decoration: none;
        }

a:hover {
        color: #656565;
        text-decoration: none;
        }

strong, b {
        color: #3D585B;
        }

em, i {
        color: #444;
        }

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

h2 {
    padding-left: 15px;
    }

blockquote {
        margin: 0 8px 0 8px; 
        padding: 8px;
        background-color: transparent;
        color: #416E85;
        line-height: 13px;
        font-family: arial, sans-serif;
        font-size: 7pt;
        text-align: justify;
        border: 0px;
        }

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

#content {
        width: 900px;
        border: 0px;  
        background: #3BB3C0 url(http://i31.tinypic.com/1231ppu.jpg) top left repeat-y; 
        padding: 0px;
        margin: 0;
        }

#maincontent {
        float: right;
        width: 69%;
        margin: 3px 40px 0 0px;
        background: #3BB3C0 url(http://i27.tinypic.com/2mnfy2r.jpg) top left repeat-y; 
        color: #1a1a1a;
        border: 0px;
        text-align: left;
        }

.subcontent {
background:transparent;
padding:15px 25px 25px 15px;
margin-top:0px;
}

#sidebar {
        float: right;
        padding: 2px 6px 2px 0;
        margin: 0px -25px 0 0;
        background: #54C3D1;
        width: 18%;
        text-align: left;
        }

#header {
        margin-bottom: 25px;
        font-family: arial, sans-serif;
        text-align: center;
        font-size: 7pt;
        font-weight: normal;
        background-color: transparent;
        color: #0A7988;
        text-transform: uppercase;
        line-height: 15px;
        }

#footer {
        text-align: center;
        font-family: georgia, sans-serif;
        font-size: 7pt;
        font-weight: normal;
        background-color: transparent;
        text-transform: uppercase;
        color: #218997;
        border: 0px;
        clear: both;
        }

div#footer a, div#footer a:link, div#footer a:visited {
        color: #606060;
        font-weight: normal;
     }

div#footer a:hover {
        color: #1a1a1a;
        font-weight: normal;
        }

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

div#header a, div#header a:link, div#header a:visited {
        color: #fff;
	}

div#header a:hover {
        color: #efefef;
        }

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

ul.navheader li  {
        display: inline;
        padding: 8px;
        background-color: #50C1CF;
        }

.title, .subtitle {
    	display: none;
    	}

/* sidebar */

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

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

.defaultuserpic {
        display: none;
        }

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

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

.sbarbody2 {
        padding: 0 5px 0 9px;
        color: #111;
        font-family: Arial, sans-serif;
        font-size: 7.5pt;
        line-height: 12pt;
        text-align: left;
    	}

#sidebar_summary li.sbaritem {
        margin: 0;
        padding: 0;
        border: 0px;
    	}

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

.sbarcalendar {
        border: 1px solid #5BC7D4;
        background-color: #65D1DF;
        text-align: center;
        font-family: arial, sans-serif;
        font-size: 10px;
        padding: 1px;
        color: #686868;
        }

.sbarcalendarposts {
        border: 1px solid #389EAB;
        text-align: center;
        font-family: arial, sans-serif;
        font-size: 10px;
        padding: 4px;
        }

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

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

li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {
        font-family: arial, sans-serif;
        font-size: 8pt;
        color: #1a1a1a;
        line-height: 20px;
        text-transform: lowercase;
        border: none;
        padding-left: 4px;
        }

li.sbartitle {
        text-align: left;
        font-weight: none;
        padding: 0 0 0 4px;
        color: #1a1a1a;
        letter-spacing: -1px;
        font-size: 12pt;
        text-transform: lowercase;
        list-style: none;
        border-bottom: 1px dashed #248CAA;
        border-top: none;
        border-right: none;
        border-left: none;
        background-color: transparent;
        margin-bottom: 10px;
        margin-top: 10px;
        }

span.count {
        display: none;
        }

/* maincontent */

.entry    {
        margin: 0 5px 0 5px;
        padding: 0px 12px 0px 12px;
        background-color: transparent;
        color: #1b1b1b;
        font-family: arial, sans-serif;
        font-size: 11px;
        line-height: 18px;
        text-align: justify;
        border-width: 0px;
        }

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

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

.userpic {
position: relative;
float: left;
text-align:center;
margin: 10px 10px 0 20px;
padding:4px;
background-color: transparent !important; 
color: #535353 !important;
z-index: 15;
}

.userpic img 
{
        border-width: 0px;
        background-color: transparent;
        padding: 10px;
}

.userpicfriends 
{
position: relative;
float: left;
text-align:center;
margin: 10px 10px 0 20px;
padding:4px;
background-color: transparent !important; 
color: #535353 !important;
z-index: 15;
}

.userpicfriends img 
{
        border-width: 0px;
        background-color: transparent;
        padding: 10px;
}

.userpicfriends a font {
        font-family: arial, verdana, sans-serif;
        font-size: 7pt;
        color: #606060;
        }

.userpicfriends a:hover font {
        color: #000;
        }

.date {
        text-align: left;
        color: #aaa;
        text-transform: lowercase;
        font-family: georgia;
        font-size: 7pt;
        }

.subject {
        text-align: left;
        font-weight: none;
        padding-bottom: 5px;
        color: #606060;
        letter-spacing: -1px;
        font-size: 12pt;
        text-transform: lowercase;
        border-bottom: 1px dashed #8FC8CE;
        }

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

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

.datesubject {
       padding: 2px;
        }

.currents, .currentmood, .currentmusic, .currentlocation {
        text-transform: uppercase;
        color: #777;
        font-size: 7pt;
        font-family: arial, sans-serif;
        }

.currents strong, .currentmood strong, .currentmusic strong {
        color: #444;
        }

.ljtags {
        padding: 0;
        font-family: arial, sans-serif;
        font-size: 7pt;
        color: #666;
        font-weight: bold;
        text-transform: uppercase;
        }

.ljtags a:link, .ljtags a:visited, .ljtags a:active {
        color: #71969A;
        font-weight: normal;
        text-transform: lowercase;
        font-size: 7pt;
        }

.ljtags a:hover {
        color: #6EB4BD;
        text-decoration: none;
        font-weight: normal;
        text-transform: lowercase;
        }

.comments {
        text-align: right;
        padding: 0 0 12px 0;
        text-transform: lowercase;
        color: #F6F7FC;
        }

div.comments a, div.comments a:link, div.comments a:visited{
        color: #606060;
        letter-spacing: -1px;
        font-size: 12pt;
        }

div.comments a:hover {
        color: #000;
        text-decoration: none;
        letter-spacing: -1px;
        font-size: 12pt; 
        }

/* maincontent -- year/achive pages */

ul.year {
        text-align: center;
        padding: 10px 0 10px 0;
        }

ul.year li {
        display: inline;
        }

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

table.yeartable td.yeardate, table.yeartable td.yearday {
        border: 1px solid #D0D0D0;
        }

table.yeartable, td.yearday {
        background-color: transparent;
        text-align: center;
color: #8A8A8A;
        }

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 {
        font-size: 3pt;
        }

.skiplinks {
        text-align: center;
        padding-top: 15px;
        }

.separator{
        height: 0px;
        }

.ljuser a:hover b {
        color: #2B747C;
        }

/* ------ LIVEJOURNAL ICONS ------
the tiny user icons for communities/ljnames  - */

.ljuser img { 
  		width: 0;
  		height: 0;
  		background-repeat: no-repeat;
  		background-color:transparent;
  		background-image: url(http://i30.tinypic.com/24fmqu9.gif); 
  		padding: 14px 14px 3px 0px !important;
		}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
		background-color:transparent;
  		background-image:

url(http://img522.imageshack.us/img522/84/usergrey2byexcentricqp2.gif);
  		padding: 10px 10px 3px 0px !important;
		}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
		background-color:transparent;
 		background-image:

url(http://img522.imageshack.us/img522/84/usergrey2byexcentricqp2.gif);
 		padding: 10px 10px 3px 0px !important;
		}

.ljuser img { 
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     background-color: transparent;
     background-image: url(http://i30.tinypic.com/24fmqu9.gif); 
     padding: 16px 16px 16px 16px;
     }

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
     background-color: transparent;
     background-image: url(http://i30.tinypic.com/24fmqu9.gif);
     padding: 15px 15px 15px 15px;
     }

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
     background-color: transparent;
     background-image: url(http://i31.tinypic.com/9tfxj4.gif);
     padding: 10px 13px 6px 10px;
     }

/*For the private (locked) symbol! */
img[src="http://stat.livejournal.com/img/icon_protected.gif"],

img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(http://i26.tinypic.com/t9h2fp.png);
}
/* misc */
::-moz-selection
{
    background: #F6F6F6;
    color: #178DBD;
}

/* ------ COMMENT PAGES ------
remove this if you can't have them  - */

.datesubjectcomment 
{
background-color: #fff;
border: 1px solid #eee;
width: 95%;
padding: 5px;
}

input.ljcomsel {
display:none;
}

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

.box 
{
padding: 10px;
clear: right;
text-align: center;
}

input, textarea 
{
background-color: #fff;
color: #888;
font-family: "arial", sans serif;
font-size: 10px;
border: 1px solid #eee;
padding: 3px;
}

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

.reply 
{
position: relative;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: left;
font-family: "arial";
text-transform: uppercase;
font-size: 10px;
line-height: 125%;
background-color: #fff;
color: #34B5DF;
}

.replytosubject 
{
font-weight: bold;
}

select
{
font-size: 7.5pt;
font-family: arial;
color: #777;
border: 1px solid #eee;
background: #fff;
}

.commentreply 
{
position: relative;
margin: 10px;
font-size: 7.5pt;
font-family: "arial";
color: #424242;
text-align: left;
}

.commentbox 
{
padding: 10px;
margin: 10px;
text-align: center;
}

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

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

.commentboxpartial 
{
padding: 10px;
margin: 10px;
background-color: #fff;
}

.commentinfo 
{
background-color: #fff;
margin-top: 10px;
text-align: center;
width: 100%;
}

/* DIV CONTEXUAL POP-UP */

div.ContextualPopup div.Inner {
background:transparent!important;
color: #3e3e3e !important;
border:none;
padding:10px;
width: 245px;
font-family:"arial";
}

div.ContextualPopup .Content {
padding:7px 10px 7px 10px;
margin-right:80px;
line-height: 1.4;
background: #fff;
border:0px;
}

div.ContextualPopup .Userpic {
padding:15px;
background: #fff;
margin-right: -20px;
border:0px;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #41C5D3 !important;
}

div.ContextualPopup div.Inner a:hover {
text-decoration: none !important;
font-weight: normal;
color: #6ADEEA !important;
}

div.ContextualPopup .Relation {
letter-spacing:0px;
border-bottom: 0px;
margin-bottom:4px;
padding-bottom:4px;
}

- All images are upped on Tinypic, or on my LJ scrapbook. Both can handle the bandwidth. ;)

SET-UP?
1) Customize CSS page, select S2 Flexible Squares.
2) Custom CSS, put all drop-downs to no. !important
3) Copy and paste above CSS into 'Custom stylesheet'
4) Hit save changes, and you're done!

- If you want a header (it is doable, I believe), use this:
.headerimage { background-image: url('INSERTURL'); background-color: #fff; background-repeat: no-repeat; background-attachment: scroll; background-position: center; margin: auto; height: ###px; width: ###px; }

- Contextual Pop-up codes = cartonage.
- Please credit introject or unequally; preferably in your profile or somewhere in sight. :)
- Comments, questions, various french desserts? Post!

(Post a new comment)

	summernap 2008-04-28 06:39 am UTC (link)
	So cute &hearts (Reply to this)

	celestica 2008-04-29 04:53 pm UTC (link)
	Sweet notebook layout &hearts <3 using & crediting &hearts (Reply to this)

	parallesis 2008-04-30 09:02 pm UTC (link)
	argh DD: the plus ads mess it all up T_T fecking adorable though 8D ♥ (Reply to this)

	foenixgirl 2008-05-02 12:48 am UTC (link)
	I like the layout but I have a question. It seems like the mini icon in front of usernames is placed about 10 pixels upward from its usual position. Is there a way to fix this? (Reply to this) (Thread)

	introject 2008-05-02 01:13 am UTC (link)
	It doesn't actually do that in your LJ - the tiny icons are just like that on my live preview host (which is external from LJ) b/c it doesn't have the exact base css that LJ does. (Reply to this) (Parent)(Thread)

	foenixgirl 2008-05-02 01:21 am UTC (link)
	Ahhhhhhhhh. Got it. Thank you very much. I love your layouts, by the way. Simple, clean, and have very good color schemes! I'm glad I happen to stumble upon this community. :) (Reply to this) (Parent)

	huongle 2008-05-04 08:02 pm UTC (link)
	Oh, this layout is sooooo pretty, thanks for sharing ^.^ (Reply to this)

	bakabanri 2008-05-25 06:31 pm UTC (link)
	nice, thank you :) (Reply to this)

	abbeyloveshero 2008-05-28 01:31 pm UTC (link)
	So pretty! Will use this & credit you <3 (Reply to this)

	benched 2008-06-16 08:50 am UTC (link)
	Took the layout. Thanks! (Reply to this) (Thread)

	benched 2008-06-17 09:56 pm UTC (link)
	Is there a way to get the side image to extend into the header section? (Reply to this) (Parent)(Thread)

	introject 2008-06-17 10:39 pm UTC (link)
	Hmm, haven't tried it yet, but set the header background (not the headerimage) to the repeating background? I have no clue if it'll work; I'll get back to you once I fiddle with it. :) (Reply to this) (Parent)

	king_guu 2008-06-24 05:03 pm UTC (link)
	Such a cute thing. Trying this out! Thanks! (Reply to this)

	suah 2009-02-04 06:40 pm UTC (link)
	i love the colouring of the thing. it's really good. (Reply to this)

Username:		Create an Account Forgot your login? Login w/ OpenID
Password:
	Remember Me
	English • Español • Deutsch • Русский…

About

Help

Get Involved

Legal

Store

LJ Labs