mintyapple: s2 flexisquares: epigone

☂☆ it rains all day (

introject) wrote in

mintyapple,
@ 2008-05-06 23:04:00

Current mood:	awake
Entry tags:	flexible squares

s2 flexisquares: epigone
Something quick and simple!

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

| Live Preview ; Image Preview |

Codes:

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

/* ----------- BODY ---------------
- includes links & font changes - */

body{
background: #f8f8f8;
font-family: "arial", sans-serif;
font-size:7.5pt;
margin:0px;
}

h2 {
font-size: 15pt;
letter-spacing: 2px;
color: #e1e1e1;
text-transform: uppercase;
padding-left: 50px;
}

a, a:link, a:visited, a:active {
color: #acacac;
text-decoration: none;
font-style: none;
font-weight: normal;
}

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

blockquote {
font-size: 11px;
color: #555 !important;
line-height: auto;
background-color: #f7f7f7;
width: 80%;
padding: 10px;
        }

code { 
font-family: "courier new";
font-size: 8pt !important;
background-color:
display: block;
background-color: #fafafa;
padding: 5px;
color:#222;
line-height: 200%;
}

#content {
width: 70%;
margin: auto;
}

#maincontent {
color: #5D5D5D;
text-align: left;
background: #fff;
border-top: 12px solid #fff;
margin-top: -25px;
}

.subcontent {
background:#ffffff;
padding:30px 30px 30px 20px;
margin-top:0px;
}

#header {
text-align:right;
letter-spacing:2px;
font-size:20pt;
text-transform:lowercase;
font-weight: bold;
font-family: arial;
padding: 4px;
background: #f8f8f8;
margin-top: 25px;
letter-spacing: -1pt;
}

div#header a, div#header a:link, div#header a:visited { 
color: #8a8a8a; 
padding: 3px;
}

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

div#header li.view { 
color: #bcbcbc;
background-color: transparent;
padding: 10px;
}

div#footer a, div#footer a:link, div#footer a:visited { 
font-size:8pt;
text-transform: uppercase;
font-family: arial;
color: #ccc;
}

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

ul.navheader li { 
display: inline; 
list-style: none; 
padding: 0; 
}

.entry {
margin: 10px 0px auto 140px;
padding: 5px;
line-height: 13px;
color: #131313;
text-align: justify;

}

.date
{
font-family: arial, sans-serif;
font-size: 15pt;
font-weight: bold; 
text-align: left;
color: #f1f1f1;
letter-spacing: -1pt;
text-transform: uppercase;
}

/* SUBJECT */
.subject
{
    text-align: left;
    padding-bottom: 0px;
    color: #888;
    font-size: 16pt;
    text-transform: lowercase;
    font-family: "arial";
letter-spacing: -1.5pt;
border-bottom:1px #f0f0f0 solid;
margin-top: -15px;
}
.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: 5px;
}

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

/* FORMATTING COMMENT LINK */

.comments
{
    text-align: right;
    color: #fff;
    clear: center;
    font-family: "arial", serif;
    position: relative;
    padding: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11pt;
    top: 20px;
}

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

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

#footer {
margin: 0;
padding:7px;
width: 100%;
text-align: right;
font-size:7pt;
text-transform: uppercase;
font-family: arial;
color: #888;
background: #f8f8f8;
margin: auto;
margin-right: 25px;
letter-spacing: .5pt;
}

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

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

.clearfoot {
display:none;
}

.clear {
height: 15px;
}

.ljtaglist{
padding:15px;
list-style:none;
background:#fff;
}

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

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

ul.year
{
    text-align: center;
    padding-bottom: 0px;
    color: #fff;
    font-size: 14pt;
    text-transform: lowercase;
    font-family: arial;
    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: 35px;
    background: #fff;
    width: 80%;
    border: 0px;
}

table.yeartable td.yearday
{
    text-align: center;
}
td.yearmonth
{
    padding-bottom: 0px;
    color: #eee;
    font-size: 14.5pt;
    text-transform: lowercase;
    letter-spacing: -2px;
    font-family: arial;
    font-weight: bold;
}

.title, .subtitle{
display:none;
}

.separator
{
    height: 0px;
}
.clear
{
    display: none;
    height: 0px;
}

.skiplinks
{
    text-transform: lowercase;
    text-align: center;
    padding: 10px;
display: block;
border-bottom: 25px solid #f8f8f8;
    background: #fff;
}

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

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

.userpic img {
        background-color: #fff;
        border: 1px solid #eee;
        padding: 5px;
}

.defaultuserpic {
display: none;
        }

.userpicfriends 
{
position: relative;
float: left;
text-align:center;
margin: auto 10px 10px 10px;
padding:4px;
background-color: transparent !important; 
color: #eee !important;
}

.userpicfriends img 
{
        background-color: #fff;
        border: 1px solid #eee;
        padding: 5px;
}

/* META SECTION - CURRENT MOOD/MUSIC/LOCATION ETC. */
.currents, .currentmood, .currentmusic, .currentlocation
{
    color: #555;
    text-align: left;
    font-size: 7pt;
letter-spacing: .5px;
    text-transform: uppercase;
font-family: arial, sans-serif;
}

.currentmood { 
padding-left: 20px;
margin-top: 4px; 
}

.currentmusic { 
padding-left: 20px;
margin-top: 4px; 
}

.currentlocation { 
padding-left: 20px;
margin-top: 4px; 
}

.ljtags { 
padding-left: 17px;
padding-top: 2px;
    text-transform: lowercase;
letter-spacing: .5px;
margin-top: 25px; 
font-family: arial, sans-serif;
    color: #444;
    font-size: 10px;
border-top: 5px solid #f8f8f8;
}

/* ------- SIDEBAR ----- */
#sidebar {
		padding: 10px;
		background-color: #fff;
                border-top: 12px solid #fff;
	  	font-size: 8pt;
		font-family: "arial", sans-serif;
	  	color: #000000;
		width: 97%;
                margin-bottom: 50px;
                margin-top: -13px;
		}

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

.sbarbody {
		padding: 0px 1px 0px -10px;
		}

.sbarbody2 {
		padding: 15px;
                font-size: 7pt;
                letter-spacing: 1.5pt;
                text-transform: lowercase;
	}

li.sbartitle {
list-style: none;
font-size: 7pt;
text-transform: uppercase;
letter-spacing: 1pt;
color: #444;
width: 15%;
text-align: center;
border-bottom: 5px solid #eaeaea;
}

li.sbaritem {
list-style: none;
border-bottom: 1px dotted #e1e1e1;
padding-top: 2px;
display: block;
width: 50%;
}

.sbarbody#sidebar_linklist {
display:none;
}

.sbarbody#sidebar_linklist {
padding: 3px;
}

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

.sbarbody#sidebar_calendar, .sbarbody#sidebar_summary {
display:none
}

span.count {
font-size: 6pt;
}

/* ------- MISCELLANEOUS -----
other things that don't quite fit - */

::-moz-selection
{
    background: #f7f7f7;
    color: #444;
}

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

.datesubjectcomment 
{
background-color: #fcfcfc;
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;
background-color: #fff;
}

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;
background-color: #fff;
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%;
}

/* ------ LIVEJOURNAL ICONS ------
the tiny user icons for communities/lj names  - */

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

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

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
		background-color:transparent;
 		background-image: url(http://i32.tinypic.com/jr4cvk.gif);
 		padding: 13px 17px 3px 0px !important;
		}

.ljuser img { 
display: none;
     }

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

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

/* DIV CONTEXUAL POP-UP!
- This needs to be here (at the front) otherwise it won't work */

div.ContextualPopup div.Inner {
background: #eee;
color: #444 !important;
border:1px solid #e3e3e3;
padding:10px;
font-size: 7.5pt;
width: 245px;
font-family:"arial";
}

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

div.ContextualPopup .Userpic {
padding:10px;
margin:0px;
background: #fafafa;
}

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

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

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

/*For the private (locked) symbol! */
img[src="http://p-stat.livejournal.com/img/icon_protected.gif"], img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 15px 11px 0px 0px;
background: url(http://i26.tinypic.com/10p5cg3.gif);
}

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

Replace the teal bits with your own. :)

- Contextual Pop-up codes = cartonage.
- Please credit introject or unequally; preferably in your profile or somewhere in sight. :)
- Comments, questions, suggestions, truffles? Post!
- If you like what you see, maybe visit unequally?

(Post a new comment)

	bijou 2008-05-07 05:14 am UTC (link)
	i really like this layout but is the title box or whatever supposed to be a bit shorter than the entry box? (Reply to this)(Thread)

	introject 2008-05-07 05:39 am UTC (link)
	The title box? Like, the blurb? Yes, it's supposed to only be that long. (Reply to this)(Parent)

	llean 2008-05-07 10:38 am UTC (link)
	This is wonderful! I'm in love with it) Save thank you) Will credit^__^ (Reply to this)

	goonerbabyy 2008-05-07 12:39 pm UTC (link)
	added to memories. I love it, thanks! (Reply to this)

	atearlydawn 2008-05-08 06:06 pm UTC (link)
	could you stop being so fucking awesome in everything you do? Amazing layout! ;) (Reply to this)

	pookieyamamama 2008-05-11 09:45 pm UTC (link)
	nice, clean, simple ... this will be my next layout! (Reply to this)

	agent00 2008-05-14 12:46 am UTC (link)
	taking, thanks! (Reply to this)

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