mintyapple: s2 flexisquares: lafayette

your heart's a mess. (

introject) wrote in

mintyapple,
@ 2008-04-07 18:22:00

Current mood:	rushed
Entry tags:	flexible squares

s2 flexisquares: lafayette
My friend told me to stop arial-abusing, so I made this. |D

Theme: S2 Flexible Squares
Browser: Functions on Firefox/IE, 800x600+. Not tested with plus ads.
ENABLED: Comment pages, div-contexual pop-up, SIDEBAR (omg) & tiny icons.
TURNED OFF: Title/subtitles.

| Live Preview ; Image Preview |

Codes:

/* made by INTROJECT @ LIVEJOURNAL.COM
also available at UNEQUALLY @ LIVEJOURNAL.COM */

/* ----------- BODY ---------------
- includes links & font changes - */
body
{
    background: #eee;
    text-align: justify;
    color: #666;
    font: 7.5pt tahoma, serif;
    margin: 8px 0 8px 0;
    line-height: 10px;
}

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

img.snap_preview_icon#snap_com_shot_link_icon {
display:none
}

.defaultuserpic {display:none;}

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

a:active
{
    outline: none;
}

::-moz-selection
{
    background: #DFD9C9;
    color: #7A7067;
}

small
{
    font-size: 7pt;
}

blockquote
{
    padding: 5px;
    color: #8B3646;
    line-height: 18px;
    text-align: justify;
    background: #F7F7ED;
    width: 70%;
}

p, td
{
    border: 0px !important;
}
code, kbd, pre, tt
{
    font-family: monospace;
}

/* ----------- CONTENT ---------------
- entry, maincontent & subcontent - */

#content
{
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;

}

#maincontent
{
    margin: 0;
    width: auto;
    padding-top: 12px;
    margin-top: 0px;
    background: #e2e2e2;
}

#maincontent h2
{
display: none;
}

/* ------ USERPIC SETTINGS ------
- includes userpics & friends!up  - */

.userpic {
position: relative;
float: right;
text-align:center;
color:#cacaca;
margin: 40px 0px 0px 5px;
padding:4px;
background: #fff;
}

.userpic img {
padding:8px;
background:#fff;
}

.userpicfriends {
position: relative;
float: right;
text-align:center;
color:#cacaca;
margin: 40px 0px 0px 5px;
padding:4px;
background: #fff;
}

.userpicfriends img {
padding:8px;
background:#fff;
}

/* ------ SIDEBAR ------
- the sidebar, 'nuff said. - */

#sidebar {
padding: 30px;
margin: 0px;
color: #444;
background-color: #fff;
border-left: 0px;
text-align: justify;
border-bottom: 15px solid #eee;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #666666;
text-decoration: none;
}

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

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

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

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

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

.sbarcalendar {
padding: 3px;
border: 1px solid #e7e7e7;
background: #eee;
text-align: center;
color: #8B8B8B;
font-size: 10px;
}

.sbarcalendarposts {
padding: 3px;
border: 0px;
background: #eee;
text-align: center;
color: #000;
font-size: 10px;
background-image: url('http://i25.tinypic.com/2d0nn8j.gif');
background-repeat: repeat-x;
background-position: top-left;
}

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

li.sbaritem {
padding: 3px;
color: #D5D5D5;
list-style: lower-roman;
border-bottom: 1px dotted #F0F0F0;
text-align: right;
background-color: #fff;
}

li.sbaritem:hover {
background-color: #F8F8F8;
}

li.sbartitle {
list-style: none;		
text-align: left;
text-transform: lowercase;
margin-top: 15px;
color: #585858;
font-size: 9pt;
padding: 4px;
letter-spacing: 2px;
background-color: #fff;
}

ul.ljtaglist li{
padding: 0px;
margin: 0px;
list-style: upper-roman;
list-style-position: inside;
}

.sbarbody#siderbar_linklist, #sidebar_summary, table.calendar, ul.sbarlist {
display:none
}

/* NON VISIBLE STUFF */

.title, .subtitle {
display:none
}

.userpicfriends {
background-color: transparent !important;
}

/* ------ HEADER / FOOTER ------
- includes header, footer & images  - */

#header
{
text-align:center;
color:#7A7067;
letter-spacing:.5pt;
font-family: tahoma, sans-serif;
font-size: 7pt;
border-top: 10px solid #e2e2e2;
background: #fff;
text-transform: lowercase;
padding: 5px;
font-weight: bold;
line-height: 80%;
position: relative;
margin-bottom: -14px;
}

#footer
{
    padding: 15px;
    width: auto;
    text-align: center;
    margin-top: 15px;
    text-transform: lowercase;
    letter-spacing: 1px;
    font-size: 7pt;
    color: #444;
    background: #fff;
    border-top: 10px solid #e2e2e2;
    z-index: 50;
    clear: both;
}

div#header a, div#header a:link, div#header a:visited
{
    color: #D6AB8D;
    padding: 10px;
    text-transform: lowercase;
}

div#footer a, div#footer a:link, div#footer a:visited
{
    color: #ccc;
    padding: 6px;
    font-family: georgia, sans-serif;
    background: #fafafa;
    text-transform: lowercase;
}

ul.navheader
{
    text-align: center;
    padding: 0;
    margin: 5;
}
ul.navheader li
{
    display: inline;
    list-style: none;
    padding: 0;
}
div#header li.view
{
    font-size: 7pt;
    
}

div#footer li.viewing
{
    font-size: 9px;
    padding: 0;
    margin-top: -5px;
}
#footer .viewing
{
    display: none;
}

ul.navfooter
{
    padding: 0;
    margin: 0;
}
ul.navfooter li
{
    list-style: none;
    display: inline;
    margin: 0;
    padding: 0;
}
.clearfoot
{
    display: none;
    clear: both;
}

ul.ljtaglist li
{
    text-align: center;
    padding-left: 5px;
    margin-left: 12px;
    list-style: lower-roman;
    list-style-position: outside;
}

ul.ljtaglist
{
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    padding: 35px;
    background:#fff;
    border:1px solid #e9e9e9;
}

.subcontent
{
    padding: 25px;
    background: #fff;
}

/* ------ ENTRY ------
- includes date, subject formatting and general entry  - */

.entry
{
    padding: 8px;
    line-height: 13px;
    text-align: justify;
}

hr
{
    color: inherit;
    height: 1px;
    border-style: none;
    border-bottom: 1px dashed #D1D1D1;
}

.entry ul li, .entry ol li, .entry li
{
    padding-left: 5px;
    margin-left: 0px;
    list-style: lower-roman;
    list-style-position: outside;
}

.ljsyndicationlink
{
    padding: 8px;
    text-align: center !important;
}

.date
{
    font-family: tahoma, sans-serif;
    font-size: 7pt; 
padding-left: 14px;
padding-bottom: 3px;
    text-align: left;
    color: #aaa;
    text-transform: uppercase;
    background: url('http://img260.imageshack.us/img260/3817/clockoo8.gif')

0px 1px no-repeat;
}

/* SUBJECT */

.subject
{
    text-align: right;
    padding-bottom: 5px;
    color: #555;
    border-bottom: 1px solid #ccc;
    font-size: 7pt;
    letter-spacing: .5pt;
    line-height: 85%;
    font-family: arial;
    text-transform: uppercase;
}
.subject a, .subject a:link, .subject a:visited
{
    color: #333;
    letter-spacing: -1px;
    font-size: 12pt;
}
.subject a:hover
{
    color: #121212;
    letter-spacing: -1px;
    font-size: 12pt;
}
.datesubject
{
    padding: 8px;
}

/* META SECTION - CURRENT MOOD/MUSIC/LOCATION ETC. */
.currents, .currentmood, .currentmusic, .currentlocation
{
    color: #888;
    text-align: left;
    font-size: 10px;
}

.currentmood { 
padding-left: 10px;
margin-top: 2px; 
background: url('http://img513.imageshack.us/img513/6791/heartlr1.gif') 0px

8px no-repeat;
}

.currentmusic { 
padding-left: 12px;
margin-top: 3px; 
font-size: 10px; 
background: url('http://i25.tinypic.com/2d1l3e0.gif') 0px 0px no-repeat;
}

.currentlocation { 
padding-left: 12px;
margin-top: 4px; 
background: url('http://i26.tinypic.com/2ii8h0y.gif') 0px 0px no-repeat;
}

.ljtags { 
padding-left: 10px;
margin-top: 3px; 
    color: #888;
    text-align: left;
    font-size: 10px;
    line-height: 140%;
background: url('http://i27.tinypic.com/3479w6w.gif') 0px 2px no-repeat;
}

/* FORMATTING COMMENT LINK */
.comments
{
    text-align: right;
    color: #ccc;
    clear: center;
    font-family: "arial";
    font-size: 8pt;
    position: relative;
    padding: 0 0px 25px 0;
    text-transform: lowercase;
    top: 20px;
    font-weight: bold;
}

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

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

/* ------ ARCHIVE ------
your seperate archive page  - */

ul.year
{
    text-align: center;
    padding-bottom: 0px;
    color: #e5689d;
    font-size: 14pt;
    text-transform: lowercase;
    font-family: georgia;
    font-style: italic;
    font-weight: normal;
}
ul.year li
{
    list-style: none;
    color: #121212;
    font-size: 12pt;
    display: inline;
}
table.yeartable
{
    margin-right: auto;
    margin-left: auto;
    padding: 30px;
    background:#fff;
    border:1px solid #e2e2e2;
    width: 100%;
}

table.yeartable td.yearday
{
    text-align: center;
    background: #fafafa;
}
td.yearmonth
{
    padding-bottom: 5px;
    color: #333;
    font-size: 14pt;
    letter-spacing: 2px;
    text-transform: lowercase;
    font-family: tahoma;
    font-style: italic;
    font-weight: normal;
}

.clear
{
    display: none;
    height: 0px;
}
.skiplinks
{
    text-align: center;
    margin: 8px 0 8px 0;
    padding: 6px;
    background: #e2e2e2;
    color: #aaa;
}

.separator
{
    height: 0px;
}

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

.datesubjectcomment {
background-color: #fafafa;
padding: 5px;
}

.userpiccomment {
position: relative;
background-color: #FFFFFF;
top: -30px;
left: 0px;
padding: 10px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}

.box {
padding: 15px;
clear: right;
}

input, textarea {
color: #999;
font-family:"arial", sans serif;
font-size: 9px;
background: #ffffff;
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: "georgia";
font-size: 10px;
line-height: 125%;
background:#fff;
color: #7EBDC1;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 7pt;
font-family: "arial";
color: #555;
}

.commentbox {
border:1px solid #e2e2e2;
padding: 10px;
margin: 10px;
background:#fff;
}

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

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

.commentboxpartial {
border:1px solid #e2e2e2;
padding: 10px;
margin: 10px;
background:#fff;
}

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

textarea.textbox {
background:#fff;
border:1px solid #e2e2e2;
}

textarea.textbox#commenttext {
font-size: 7.5pt;
}

img#subjectIconImage {
display:none
}

input {
background:#fff;
border:1px solid #e2e2e2;
}

input#spellcheck {
display:none
}

select {
background:#fff;
border:1px solid #e2e2e2;
font-size: 7pt;
font-family: arial;
color: #444;
}

/* ---- TINY ICONS ----- */

.ljuser img { 
  		width: 0;
  		height: 0;
  		background-repeat: no-repeat;
  		background-color:transparent;
  		background-image: url(http://i27.tinypic.com/90n9za.gif); 
  		padding: 10px 10px 3px 0px !important;
		}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
		background-color:transparent;
  		background-image: url(http://i27.tinypic.com/90n9za.gif);
  		padding: 11px 10px 3px 0px !important;
		}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
display:none
}

.ljuser img { 
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     background-color: transparent;
     background-image: url(http://i27.tinypic.com/90n9za.gif); 
     padding: 8px 4px 4px 2px;
     }

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

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
display:none;
     }

.currentmood img
{
    border: 1px solid #e9e9e9;
    background: #fff;
}

.currentmood
{
    padding-top: 5px;
}

/*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: 0 0 10px 8px;
background: url(http://i25.tinypic.com/2i11ptz.gif);
}

/* div contextual */

div.ContextualPopup div.Inner {
background:transparent!important;
color: #5C2A3A!important;
border:none;
padding:7pt;
width: 245px;
font-family:"tahoma";
font-size: 7pt;
}

div.ContextualPopup .Content {
padding:7px 10px 7px 10px;
margin-right:80px;
line-height: 1.4;
background: #FAF6E3;
border:1px solid #EBC69B;
}

div.ContextualPopup .Userpic {
padding:10px;
background:#FAF6E3;
margin-left:55px;
border:1px solid #EBC69B;
}

div.ContextualPopup span.OnlineStatus, span {
font-size: 8pt;
text-transform: uppercase;
}

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

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

div.ContextualPopup .Relation {
letter-spacing:1px;
border-bottom: 1px dotted #eee;
text-transform: uppercase;
margin-bottom:4px;
padding-bottom:4px;
}

- Everything's hosted on TinyPic.
The header-ish picture is here though, if you want to reupload.

The image is actually inserted in your blurb (as the rest of it), but it's 400x200 pixels. If you want to make your own, you can go up to 450px (width) without it looking squishy - the height can be as long as you want.

Scroll down for how to install the horizontal sidebar.

SET-UP?
1) Customize CSS page, select S2 Flexible Squares.
2) Go to Sidebar and paste the following into the "Text to be added to the sidebar" textarea. You don't need to include the blurb/title, as it has been disabled.

<CENTER><IMG src="http://i27.tinypic.com/2iudfg9.jpg"></CENTER> <TABLE cellSpacing=2 cellPadding=10 width="100%"><TBODY><TR><TD vAlign=top align=justify width="50%"><EM><FONT face=Arial color=#c4625b size=2>put header title here</FONT></EM> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed consequateros sit amet sapien mollis dictum. Etiam malesuada. Donec ac tellus.Nulla facilisi. Fusce risus. Morbi consectetuer sapien quis risus.Proin ac orci in orci placerat rutrum. Nunc eleifend massa id leo. <TD vAlign=top align=justify width="42%"><FONT face=Georgia color=#a4a4a4><I><FONT face=Arial color=#c4625b size=2>put header title here</FONT> </I></FONT>Inut lacus. Nam euismod enim ut lorem. Sed sollicitudin lacinia pede.Integer faucibus, sapien non sollicitudin condimentum, eros nisl variuseros, eget lobortis augue magna luctus leo. </TD></TD></TR></TBODY></TABLE>

3) Edit the HEADER and LOREM IPSUM into the text you want. I've disabled the calender and linklist and all that from the sidebar in the code, as a btw.

4) Go back to Custom CSS and put all drop-downs to no. !important
5) Copy and paste above CSS into 'Custom stylesheet'
6) Hit save changes, and you're done!

- Header image is totally replaceable. See above for instructions.

- Contextual Pop-up codes = cartonage.
- Tiny LJ icons = damnicons.
- Please credit introject or unequally, somewhere in sight please. ;)
- Find spelling errors? Something not quite working out? Post, and I'll try to help.
- If you like what you see, maybe visit unequally? :)

Customize

Page 1 of 3
<<	[1] [2] [3]	>>

(Post a new comment)

	oh_mango 2008-04-08 12:33 am UTC (link)
	your stuff is amazing :D (Reply to this)(Thread)

(no subject) -

oh_mango, 2008-04-11 05:56 am UTC

(no subject) -

introject, 2008-04-11 06:26 am UTC

	holdthe_fort 2008-04-08 12:42 am UTC (link)
	oooh i love this! are you able to like scroll back to earlier posts and stuff on it? :S (Reply to this)(Thread)

(no subject) -

introject, 2008-04-08 12:55 am UTC

	aiiri 2008-04-08 12:50 am UTC (link)
	this is very cute! (Reply to this)

	pureuda 2008-04-08 12:53 am UTC (link)
	Very pretty :OOO ♥ (Reply to this)

	starsurfer 2008-04-08 01:16 am UTC (link)
	cute! and it's kind of different. i like it. ♥mem'ed. (Reply to this)

	lapiccolina 2008-04-08 01:54 am UTC (link)
	Awww, this is pretty! Gonna mem and will credit when used! (Reply to this)

	maxpermita 2008-04-08 02:04 am UTC (link)
	So pretty!! Taking! Thank you =) (Reply to this)

	lovewls 2008-04-08 02:40 am UTC (link)
	Lovely! Saved in memories for future layout. (Reply to this)

	seroquels 2008-04-08 02:56 am UTC (link)
	mmhmm, yeah. I love that. Mem'ing for later use. (Reply to this)

	tehsexypotato 2008-04-08 03:17 am UTC (link)
	I love it, am using it now! :) (Reply to this)

	michaeleen 2008-04-08 03:37 am UTC (link)
	Oh my! Everything you make I just fall in love with. Meming of course! ♥ Thankkssss (Reply to this)

	seekingdeeper 2008-04-08 04:16 am UTC (link)
	you shouldn't be hating on the sidebar. see, you make good stuff with it. (Reply to this)

	futekitwilight 2008-04-08 04:31 am UTC (link)
	Using, will credit...thanks for making it, its so easy to use. (Reply to this)

	plast_i_liina 2008-04-08 04:56 am UTC (link)
	спасибо! (Reply to this)

	stitchfrequency 2008-04-08 05:01 am UTC (link)
	Cute! I'm using it, I credited you :) (Reply to this)

	_remains 2008-04-08 05:29 am UTC (link)
	this is amazing!! saving, will credit when used! (Reply to this)

	macaron_crisp 2008-04-08 09:28 am UTC (link)
	OMG this layout is awesome makes me want to change mine (Reply to this)

	xenachan 2008-04-08 10:22 am UTC (link)
	Woah ! PRETTY <3 Mem, will credit when use thanks =) (Reply to this)

	gazely 2008-04-08 10:38 am UTC (link)
	Adding to memories to apply later :D It's goregous, thanks for sharing! (Reply to this)

	clod_81 2008-04-08 12:46 pm UTC (link)
	add to memories,thanks! (Reply to this)

	sundancingstar 2008-04-08 05:04 pm UTC (link)
	Very pretty layout! I like the way the header is placed! Adding to mems :) (Reply to this)

	masiru_chan 2008-04-08 06:05 pm UTC (link)
	Oooh, so pretty <3 (Reply to this)

	summer_lie 2008-04-08 07:24 pm UTC (link)
	very pretty♥ credit when i use it (Reply to this)

	exmemoriter 2008-04-08 07:58 pm UTC (link)
	Mem-ed! This is lovely. (Reply to this)

	teh_haley 2008-04-08 09:24 pm UTC (link)
	very pretty, I love this! adding to memories for future use, and I'll go visit unequally, for sure! (Reply to this)(Thread)

(no subject) -

introject, 2008-04-08 10:15 pm UTC

Page 1 of 3
<<	[1] [2] [3]	>>

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

Advertisement

About

Help

Get Involved

Legal

Store

LJ Labs