mintyapple: S2 Flexible Squares: Dark

Jessica (

touchthestars) wrote in

mintyapple,
@ 2008-02-29 01:37:00

Entry tags:

flexible squares

S2 Flexible Squares: Dark

Preview: Image or Live

Style: S2 Flexible Squares
Notes: Includes custom comment pages & custom contextual pop-ups. Tested in the latest versions of firefox and internet explorer.
Credit: touchthestars

/* Cleaned CSS: */

/* stylesheet by touchthestars @ http://community.livejournal.com/demanding_love */

body {
background-color: #131313;
background-image: url(http://i194.photobucket.com/albums/z40/duchess_mia/icons/bg.gif);
text-align: center;
color: #c6c6c6;
font-family: "Trebuchet", sans-serif;
font-size: 11px;
margin: 50px 0 20px 0;}

a, a:link, a:visited {
color: #81a717;
text-decoration: none;
font-weight: bold;}

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

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

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

#content {
width: 700px;
margin-left: auto; margin-right: auto;
border: 0;
padding: 0;
margin-top: 0;}

#maincontent {
text-align: left;
}

#header {
width: 100%;
padding: 10px 0 10px 0;
margin: 30px 0 0 0;
text-align: right;
font-family: "G", sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 2px;
border: 0;
color: #555555;
text-transform: lowercase;
font-style: italic;
background-color: #0e0e0e;}

.headerimage {
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #81a717;
font-weight: bold;
padding: 10px;}

div#header a:hover, div#footer a:hover {
color: #227e84;
text-decoration: none;
border-bottom: 0;
background-color: #0e0e0e;}

.title, .subtitle{
display: none;}

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

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

.subcontent {
margin: 0;
padding: 0;
background-color: #262626;
border-top: 30px solid #0e0e0e;}

.entry {
margin: 0px 15px 10px 143px;
padding: 0px 10px 10px 10px;
background-color: #262626;
color: #676767;
font-family: "Trebuchet", sans-serif;
font-size: 11px;
line-height: 15px;
text-align: left;
border: 0;
min-height: 120px;}

.userpic {
position: relative;
float: left;
background-color: #2b2b2b; 
padding: 10px;
margin: 15px;
z-index: 15;
border-right: 1px solid #222222;
border-bottom: 1px solid #222222;}

.date {
color: #4f4f4f;
font-family: "Trebuchet", sans-serif;
font-size: 11px;
margin-top: 8px;
line-height: 7px;
text-transform: lowercase}

.subject {
font-weight: bold;
font-style: italic;
color: #227e84;
font-family: "Georgia", times new roman, serif;
font-size: 17px;
text-transform: uppercase;
border-bottom: 1px solid #222222;
margin-left: 50px;
margin-right: 15px;
margin-bottom: 5px;
padding-bottom: 3px}

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

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

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

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

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

.currents {
font-family: "Trebuchet", sans-serif;
font-size: 10px;
padding: 2px;}

.currentmood, .currentmusic {
font-family: "Trebuchet", sans-serif;
font-size: 10px;
line-height: 10px;}

.currents a:hover, .currents a {
border-bottom: 0;
font-weight: normal;
font-size: 10px;}

.ljtags {
font: 10px "Trebuchet", sans-serif;
padding-top: 5px;}

.comments {
font-family: "Trebuchet", sans-serif;
font-size: 14px;
text-align: right;
background-color: #262626;
padding: 0;
position: relative;
border: 0;
margin-top: 0;
border-top: 1px solid #222222;
text-transform: lowercase;
font-style: italic;
padding-top: 5px;}

div.comments a, div.comments a:link, div.comments a:visited{
color: #227e84;
font-weight: normal;}

div.comments a:hover {
color: #818181;
text-decoration: none;
border: 0;}

.separator{
height: 0;}

.userpicfriends {
position: relative;
float: left;
font-family: "Trebuchet", sans-serif;
font-size: 11px;
text-align: center;
background-color: #2b2b2b !important; 
padding: 10px;
margin: 15px;
z-index: 15;
border-right: 1px solid #222222;
border-bottom: 1px solid #222222;
color: #2b2b2b;}

.userpicfriends font {
color: #227e84;}

#sidebar {
padding: 25px;
margin-bottom: 20px;
background-color: #262626;
font-size: 10px;
font-family: "trebuchet", sans-serif;
color: #727272;}

.defaultuserpic {
display: none;}

.sbarheader {
padding: 0;
display: none;}

.sbarbody {
text-align: center;}

.sbarbody2 {
text-align: justify;
border-bottom: 1px solid #222222;
padding-bottom: 4px;}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #227e84;
font-weight: normal;
font-size: 10px;}

div#sidebar a:hover {
text-decoration: none;
color: #404040;
border-bottom: 1px solid #222222;}

ul.sbarlist {
list-style: none;
font: 11px "Trebuchet", sans-serif;
text-align: left;}

li.sbaritem {
float: right;
padding-left: 5px;}

li.sbartitle{
display: none;}

#footer {
width: 100%;
padding: 0;
margin: 0 0 10px 0;
text-align: right;
font-family: "Trebuchet", sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 2px;
border: 0;
color: #555555;
text-transform: lowercase;
font-style: italic;
z-index: 100;
clear: both;}

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

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

.clearfoot {
clear: both;}

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 {
background-color: #262626;
font-size: 10px;
font-family: "trebuchet", sans-serif;
color: #727272;}

table.yeartable td.yearday {
background-color: #262626;
text-align: center;}

td.yearmonth {
border-style: none;}

.datesubjectcomment {
background-color: #262626;
padding: 0;
margin-top: 0px;}

.userpiccomment {
position: relative;
float: left;
padding: 10px;
margin: 0 10px 10px 0;
z-index: 15;
background-color: #2b2b2b !important; 
border-right: 1px solid #222222;
border-bottom: 1px solid #222222;}

.box {
border: 0;
padding: 0;
clear: left;
color: #676767;}

input, textarea {
background-color: #262626;
font: 11px "Trebuchet", sans-serif;
color: #676767;
border: 1px solid #0e0e0e;
padding: 2px;
}

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

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Trebuchet", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #d4dce8;
color: #000000;}

.replytosubject {
font-weight: bold;}

.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Trebuchet", sans-serif;
color: #676767;
line-height: 15px;}

.commentbox {
padding: 10px;
margin: 10px;
min-height: 120px;
background-color: #262626;
border: 5px solid #0e0e0e;
font-size: 10px;
font-family: "trebuchet", sans-serif;
color: #727272;}

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

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

.commentboxpartial {
border-color: #0e0e0e;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #2b2b2b;
color: #676767;}

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

.skiplinks {
text-align: center;}

ul.ljtaglist {
font-size: 11px;
margin-left: auto; 
padding-left: 0;}

.ljtaglist { 
list-style-type: none; 
text-align: left; 
padding: 15px;
background-color: #262626;}

.ljtaglist li { 
padding: 3px 2px 0 15px; 
color: #888888; 
margin}

h2 { 
text-align: left;
line-height: 12px; 
font-weight: bold; 
font-size: 14px; 
font-face: Trebuchet; 
color: #227e84;
padding: 15px 0 0 15px;
margin-bottom: -15px;
background-color: #262626;
border-top: 30px solid #0e0e0e;}

.clear {
height: 15px;}

.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 5px 4px 5px 5px;
background: url(LOCK IMAGE URL);
}

.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 5px 5px 5px 5px;
background: url(LOCK IMAGE URL);
}
.ljuser img { 
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(USER ICON URL); 
padding: 13px 2px 0 14px;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(USER ICON URL);
padding: 12px 2px 0 8px;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(COMMUNITY ICON URL);
padding: 12px 5px 0 9px;
}

div.ContextualPopup { 
margin: 5px 0 0 20px; 
font: normal 10px "Trebuchet", "Verdana", sans-serif !important; 
}

div.ContextualPopup div.Inner { background-color: #2b2b2b !important; color: #676767 !important; 
border: 1px solid #222222; padding: 5px; 
width: 230px; 
}

div.ContextualPopup .Content { padding: 2px 4px 6px 4px; margin-right: 50px; 
line-height: 12px; 
}

div.ContextualPopup .Relation { font-weight: bold !important; border-bottom:1px solid #222222; padding:0px 0px 4px 0px; 
margin:0px 0px 4px 0px; 
}

div.ContextualPopup .Content .OnlineStatus { 
font-weight: bold; 
}

div.ContextualPopup .Userpic { padding: 4px 4px 0 0; 
}

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

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

Images used (please save and upload to your own server)

Tiny icons by

_excentric_.

Installation
1. Go to Journal > Customize Journal
2. Select Flexible Squares
3. Go to Customize Your Theme > Custom CSS
4. Put all the drop-down boxes to No
5. Enter the CSS
6. And there you have it!

Please credit me, preferably in your userinfo. Enjoy! :)

(Post a new comment)

	masiru_chan 2008-02-29 09:47 am UTC (link)
	Oh, what a lovely lay-out <3 I just adore the style. I'll try it out and make sure to credit you if I end up using it :D (Reply to this)

	izzatee 2008-02-29 09:55 am UTC (link)
	loving it! will credit when use (: (Reply to this)

	tvxqisdalove 2008-02-29 10:05 am UTC (link)
	using, thanks so much. <3 (Reply to this)

	mandy_jg 2008-02-29 10:37 am UTC (link)
	Love this! Using at my writing journal. ♥ (Reply to this)

	dillspond 2008-02-29 10:41 am UTC (link)
	Lovely, I adore it (Reply to this)

	smellbeforerain 2008-02-29 11:23 am UTC (link)
	Love this immensely, definitely using! (Reply to this)

	blooms 2008-02-29 12:28 pm UTC (link)
	Very nice, will credit when used. Thanks :) (Reply to this)

	darknumb 2008-02-29 01:21 pm UTC (link)
	beautiful layout! add to mem for later... :) (Reply to this)

	worship_elle 2008-02-29 01:49 pm UTC (link)
	Wonderful, mem'ed (Reply to this)

	teh_haley 2008-02-29 02:16 pm UTC (link)
	I love this layout, adding to memories! (Reply to this)

	rebelliousheart 2008-02-29 02:32 pm UTC (link)
	very beautiful layout, adding to memories <3 (Reply to this)

	magicprophecy 2008-02-29 03:21 pm UTC (link)
	THIS IS SO BEAUTIFUL. memming ♥ (Reply to this)

	michaeleen 2008-02-29 03:36 pm UTC (link)
	Love this! Saving to mems to use later :D Thanks! (Reply to this)

	holbytla 2008-02-29 04:25 pm UTC (link)
	Lovely layout! I think I'm going to try it out later today. Thanks! (Reply to this)

dekolette
2008-02-29 04:41 pm UTC (link)

Using for my person journal, I've got 2 question though. Hope you don't mind =)

Image Hosted by ImageShack.us

The space between the tags and the mood is rather big (I marked it red on the picture). Any idea how to make it smaller? I tried a few things but it didn't work.

I was also wondering if it's possible to change the link color of the tags only, without changing the color of the link that appears in the entry itself (sorry for the edit)?

Thanks in advance

Edited at 2008-02-29 04:41 pm UTC

(Reply to this)(Thread)

	touchthestars 2008-02-29 07:25 pm UTC (link)
	To fix that big gap, add `margin-bottom: -30px` to .ljtags (that's probably not the right way to do it, but it works! lol ;D) And to change the link color of the tags, add in these classes to your CSS (you can change the colors): `.ljtags a, a:visited { color: #ffffff; } .ljtags a:hover { color: #000000; }` Hope that helps! Edited at 2008-02-29 07:26 pm UTC (Reply to this)(Parent)(Thread)

	dekolette 2008-02-29 07:36 pm UTC (link)
	Excellent! Thank you so much ♥ =D (Reply to this)(Parent)

	mundodeamor 2008-04-25 01:31 pm UTC (link)
	Hm, I tried this but it doesn't work? =/ (Reply to this)(Parent)

	fallenmelody 2008-02-29 05:05 pm UTC (link)
	Oh. Em. Gee. I'm kind of in love with this layout. ♥ (Reply to this)

	hiddenxharmony 2008-02-29 05:11 pm UTC (link)
	This is beautiful! Adding to memories, will most definitely credit if I use it. (Reply to this)

	ainodeluca 2008-02-29 09:00 pm UTC (link)
	I really like all of your layouts so far, but this is my very favorite. ♥ This absolutely gorgeous! Meming. :3 (Reply to this)

	jude_judith82 2008-02-29 11:07 pm UTC (link)
	I love this layout. (Reply to this)

	nirnaeth 2008-02-29 11:50 pm UTC (link)
	yay, using this :D thank you! (Reply to this)

	alessandrafaery 2008-03-07 11:34 pm UTC (link)
	beautiful. using with credit. (Reply to this)

	heart_scribble 2008-03-08 10:49 pm UTC (link)
	'tis lovely - I'll be using this, and crediting :) (Reply to this)

	twilit_rain 2008-03-09 01:58 am UTC (link)
	Looks fantastic in Safari as well :) Snagging, thanks! :) (Reply to this)

	fieldofsoul 2008-03-10 05:33 pm UTC (link)
	This is cute! Taking and crediting, thanks! (Reply to this)

	sovietkiki 2008-03-13 11:00 am UTC (link)
	Wonderful layout! I'm using it on my creative stuff community ^__^ Two quick questions about the top box - A) I've entered my links in my link list and they're not showing up there! and B) How do I get the text to show up there? I'm having a really thick day today. >___< Thank you! ♥ (Reply to this)

	13thmuse 2008-03-15 10:47 am UTC (link)
	GORGEOUS! (Reply to this)

	force_oblique 2008-03-17 01:47 pm UTC (link)
	I adore this layout!Definately using it in the future!! (Reply to this)

	sugarfied 2008-03-19 07:48 am UTC (link)
	Love this one. Using this one right now. And credit is put on it ! (Reply to this)

	krisgoespop 2008-03-21 04:06 am UTC (link)
	Stole'd and credited. Thank you; this is absolutely gorgeous. (Reply to this)

	junyoo 2008-03-25 07:11 am UTC (link)
	how would i add a header to this? i tried using my basic knowledge, and ended up with this: iconsnobs DD: Edited at 2008-03-25 07:11 am UTC (Reply to this)(Thread)

	main_titles 2008-03-30 11:10 pm UTC (link)
	.headerimage { position: relative; width: 700px; height: 430px; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: -20px; background-image: url('http://i28.tinypic.com/29xazop.png'); background-repeat: no-repeat; } (Reply to this)(Parent)

	daydreamdrifter 2008-04-12 10:07 am UTC (link)
	Lovely! Will credit. (Reply to this)

	districtavenue 2008-04-14 11:12 am UTC (link)
	don't understand how to use it where on earth is the flexible squares at? just create an acc, so maybe they changed it? thks (Reply to this)

	mundodeamor 2008-04-25 01:18 pm UTC (link)
	using right now :) (Reply to this)

	hypnotized_moon 2008-05-05 09:52 am UTC (link)
	I'm using it, credit. Thanks for sharing. ^.^ (Reply to this)

	pale_septembre 2008-05-17 06:36 pm UTC (link)
	Taking, thanks a lot, it's gorgeous! (Reply to this)

	eveliiina 2008-05-21 02:52 pm UTC (link)
	taking and crediting! thank you! (Reply to this)

	suicide_poem 2008-05-29 10:55 am UTC (link)
	i love it! thank you! (Reply to this)

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