BETTER DOLPHIN

Fake default comments template for Flexible Squares

2011-12-23T03:41:02Z

UPDATED 12-23

I first went about this project for a specific game's layout that used Flexible Squares Gray as a base. I had wanted to make it a stylesheet that anyone with any custom layout could use but that was too much work that I had time for to do, as you have to consider every single style someone could apply to every element. HOWEVER, that doesn't mean the codes below won't work for your layout, it might work perfectly out of the box, or you might only have to tweek a couple things, so you might as well give it a shot if you use a Flexible Squares based layout! Unfortunately, due to lack of time, I cannot troubleshoot any issues you may have, but you can mess with my codes as much as you want, or have a friend!

You can see it in use right here or ON THIS VERY COMMUNITY GASP. Update The buttons on there are in their proper spot because someone else at CnC knew how to do LJ layers and tweeked things on their own. My codes are floated right and under the (reply) (expand) etc links. So a little odd, but easy to get used to.

NOTES
-Remember, I cannot help you troubleshoot, sorry!
-It was impossible to make it look like the old default style exactly through just CSS. However, I did as best as I could. It didn't seem to bother too many people. It works in all browsers and people said it worked fine on phones and such. I was also a bit lazy to style things like icons, sorry. |D
-There is a known issue with LJ that when a thread reaches a certain LENGTH it will break the comments beyond that final straw comment. Any comments or threads made after that comment will NOT be viewable. People can still COMMENT to those threads through their email notifs, but no one will be able to see the comments in the entry itself. However seeing as the other option is a new default style that people can't use at all it might not be too bad of a trade off. If your game/comms/whatever don't get that many super long threads you will be safe. UPDATE There was some confusion on this, this happens to ALL layouts, not just Flexible Squares. Thanks to LJ for telling us to use a workaround that was broken.
-There's another issue where some comms/journals canNOT get custom layouts to turn on for their comments. That's another LJ issue. So if no matter what you do you can't get them to show up on your journal/comm, alas, there's nothing I can do for you. :( UPDATE It's not a glitch, it's if your journal/comm is a basic account that you can't switch this.

UPDATE
I tweeked the code a little so you can use the base Flexible Squares by itself and these style overrides should work with it. (I didn't test on all the themes but I did 6 of them, including Circular, and they all worked.) So if you want to do it that way, just go choose a Flexible Squares template that offends you least (I kinda like Circular) and then go to where you would insert custom CSS and just paste the below code in there, save, and it should be good to go!

I've had people report to me this has worked great or adequately enough for their custom layouts, so here's hoping it's been helping more than I've been hearing about!

The Code
Paste this AT THE END OF YOUR STYLESHEET, so it will override other styles.

/* ENTRY VIEWS, REPLY PAGE & COMMENTS tobyfs edit*/

body.lj-view-reply, body.lj-view-entry, .lj-view-reply #content, .lj-view-entry #content, .lj-view-reply .subcontent, body.lj-view-entry .subcontent, body.lj-view-reply .entry, body.lj-view-entry .entry{
background: #fff !important;
border: 0 !important;
color: #202020 !important;
font: 12px "Verdana",sans-serif !important;
margin: 0 !important;
padding: 0 !important;
}

body.lj-view-reply .entry, body.lj-view-entry .entry{
font-size: 12px !important;
}

.lj-view-reply #content, .lj-view-entry #content{
padding: 40px 0 0 !important;
width: 100%;
}

.lj-view-reply #content-outer a, .lj-view-reply #content-outer a:link, .userpicfriends a:link font, .userpicfriends a font, .lj-view-entry .userpicfriends a, .lj-view-entry .userpicfriends a:link, .lj-view-entry #content a, .lj-view-entry #content a:link{
color: #004FAA !important;
text-decoration: underline !important;
}

.lj-view-reply #content-outer a:visited, .userpicfriends a:visited font, .lj-view-entry .userpicfriends a:visited, .lj-view-entry #content a:visited{
color: #54105B !important;
text-decoration: underline !important;
}

.lj-view-reply #content-outer a:hover, .userpicfriends a:hover font, .lj-view-entry .userpicfriends a:hover, .lj-view-entry #content a:hover{
color: #720000 !important;
text-decoration: underline !important;
}

.lj-view-entry .userpicfriends{
background: none !important;
border: 0 !important;
float: left !important;
margin: 0 20px 10px 0 !important;
padding: 0 !important;
}

.lj-view-entry .comments {
background: #fff !important;
color: #202020 !important;
font: bold 11px "Verdana",sans-serif !important;
}

.lj-view-entry .datesubject{
background: #fff !important;
color: #202020 !important;
font: 12px "Verdana",sans-serif !important;
margin: 0 !important;
padding: 0 0 20px;
}

.lj-view-entry .subject {
background: none !important;
color: #202020 !important;
font: italic bold 18px "Verdana",sans-serif !important;
line-height: normal !important;
padding: 3px 0 2px;
}

.lj-view-entry .date {
color: #202020;
font: 13px "Verdana",sans-serif;
letter-spacing: normal;
padding: 0;
text-transform: none;
}

.skiplinks {
color: #afafaf;
font: bold 10px "Tahoma", sans-serif;
text-align: center;
text-decoration: none !important;
}

.skiplinks a, .skiplinks a:link, .skiplinks a:visited {
color: #c0c0c0;
text-decoration: none !important;
}

.skiplinks a:hover, .skiplinks a:active {
color: #d8d8d8;
text-decoration: underline !important;
}

.box {
border: 0;
clear: right;
padding: 0;
}

.reply {
background: #fff;
color: #202020;
}

.replytoposter, .replytosubject {
color: #202020;
font: 12px "Verdana", sans-serif;
line-height: normal;
}

.replytosubject {
font-weight: bold;
padding-bottom: 2px;
}

textarea.textbox {
background: #b0b0b0;
color: #000;
width: 95% !important;
}

.commentinfo {
}

.commentbox, .commentboxpartial {
background: #fff;
border: 0;
margin: 5px 0;
padding: 0;
position: relative;
}

.commentbox {
min-height: 150px !important;
}

.commentbox a, .commentbox a:link{
color: #004FAA;
}

.commentbox a:hover, .commentbox a:visited{
color: #54105B;
}

.commentbox div + div + div{
font-size: 12px !important;
}

/*.commentbox div + div + div div{
right: 5px;
position: absolute;
top: 5px;
}

.commentbox div + div + div div div#qrdiv{
right: 5px;
position: relative !important;
top: 5px;
}*/

div#qrdiv table{
margin-top: 7px;
}

.datesubjectcomment {
background: #ABD0ED;
color: #202020;
font: 12px "Arial",sans-serif;
height: 90px;
line-height: normal;
margin-top: 0;
padding: 10px 0 0 0;
}

.lj-view-reply .datesubject{
background: #ABD0ED;
color: #202020;
font: 12px "Arial",sans-serif;
height: 90px;
line-height: normal;
margin-bottom: 5px;
margin-top: 0;
padding: 10px 0 0 0;
}

.datesubjectcomment strong{
font: bold 16px "Arial",sans-serif;
}

.datesubjectcomment a, .datesubjectcomment a:link, .datesubjectcomment a:hover, .datesubjectcomment a:active {
color: #004FAA;
text-decoration: none !important;
}

.datesubjectcomment a:visited{
color: #54105B;
text-decoration: none !important;
}

.lj-view-reply .userpic, .userpiccomment {
background-color: none !important;
border: 0 !important;
float: left;
position: relative;
margin: -10px 10px 0 0;
padding: 0 !important;
top: auto !important;
z-index: 15;
}

.lj-view-reply .userpic{
margin: 0 10px 0 0 !important;
}

.commentreply {
color: #202020 !important;
font: 12px "Verdana", sans-serif !important;
margin: 5px 5px 10px 0;
position: relative;
}

.lj-view-entry #sidebar, .lj-view-reply #sidebar {display: none;}

.lj-view-reply .navheader, .lj-view-reply .title,
.lj-view-entry #maincontent, .lj-view-reply #maincontent {
background: #fff !important;
border-left: 0;
color: #202020 !important;
margin-left: auto;
margin-right: auto;
width: 95%;
}

.lj-view-reply #header, .lj-view-entry #header, .lj-view-reply #header {
display: none !important;
}

.lj-view-reply input, .lj-view-reply textarea, .lj-view-reply select, .lj-view-reply textarea.textbox, .lj-view-entry input, .lj-view-entry textarea, .lj-view-entry select, .lj-view-entry textarea.textbox{
background-color: #fff !important;
color: #202020 !important;
}

.ljtags, .currents, .currentmood, .currentmusic{
	color: #202020 !important;
}

As a personal sidenote, unless LJ does some drastic changes, I may not update here again. I have set up a DW account, however, if I decide to make DW layouts, it can be found, unshockingly, at http://betterdolphin.dreamwidth.org. Thanks. :3

Flexible Squares: hooky

2011-11-26T18:42:17Z

Image Preview - Live Preview with Texture and Live Preview without Texture

"hooky"

Has many variations. There's a textured version with 4 colors, there's also a no texture version with just one color but that's because you can change colors on your own, and then both have a stickied sidebar and non-sticky sidebar option.

Notes: To turn OFF the sticky sidebar, search for #sidebar in the stylesheet. Replace "fixed" with "absolute." If you have a Plus account make sure you have ads between the entries or vertical, as horizontal will break it. Though when I tried to do ads between the entries it was oddly not showing up on my journal, so please comment if something is wrong on your end.

If you do use the sticky sidebar, keep in mind screen resolutions. If you have a lot of info in your sidebar it WILL be cut off. The sticky sidebar was made with RP journals in mind where the tag or link list would basically be the only important thing needed. If you have a lot of tags, use the tag cloud instead of list.

This was tested in IE9, FF4+ and Chrome, it should stand to reason it will work in Safari and Opera. However, when I tried to test it in IE7-8 it looked broken, but I wasn't sure if it was due to my codes (which it shouldn't) or my IE test browsers were faulty. Either way, be wary of IE users just in case.

Please upload all images to your own image server and replace the URLs in the style sheet!

Directions: Click here. In search box put "Flexible Squares" and choose the template called "Black and White and Red All Over". In the top right you'll see a box called Current Theme, click "Change page setup" and there choose "2 column (sidebar right)". Make sure your ads are either between entries or vertical here as well if you have a Plus account.

Click on Customize Selected Theme. On your left you'll see a blue sidebar, and click on "Customize CSS" menu link in the same sidebar. Make sure all options are set to "no", and "Custom external stylesheet URL" field remains blank.

Then, copy and paste the entire stylesheet below into "Custom stylesheet" field and click Save Changes.

Template: orange hooky

For: Flexible Squares

Images: These are hosted on my own domain, PLEASE save and upload to your own server/account. Just be sure to change the URLs in the style sheet when you do!

Here is a zip of the images and stylesheet.

Code:

/*
  Hooky
  For: Flexible Squares
  Available:  http://community.livejournal.com/betterdolphin/
  By:  Toby
*/

/* DIRECTIONS:  Full directions on how to install are on the bottom of this document! */

/* !PLEASE! remember to upload the images to YOUR own domain or some free image service and replace the links in this stylesheet! */

html, body{
	height: 100%;
	min-height: 100%;
}

body {
	background: #f3f3f1 url(http://hodo7.com/web/freebies/hooky/texture/bg.png);
	color: #797878;
	font: 13px "Arial", sans-serif;
	margin: 0 auto;
}

@font-face {
	font-family: 'Lobster';
	font-style: normal;
	font-weight: normal;
	src: local('Lobster'), url('http://themes.googleusercontent.com/static/fonts/lobster/v4/MWVf-Rwh4GLQVBEwbyI61Q.woff') format('woff');
}

a, a:link, a:visited {
	color: #fd9e52;
	text-decoration: underline;
}

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

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

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

/****************************************** header ******************************************/

#lj_controlstrip_new{
	position: fixed;
}

#header {
	background:url(http://hodo7.com/web/freebies/hooky/texture/nav-bg.png) bottom left repeat-x;
	position: fixed;
	width: 100%;
	height: 70px;
	z-index: 2;
}

.title{
	color: #FD9E52;
	font: 28px "Lobster", "Georgia", times, serif;
	margin: 5px 0 0 15px;
}

.subtitle{
	display: none;
}

/******* nav *******/

ul.navheader {
	float: right;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

ul.navheader li {
	background-color: #000;
	border: 1px solid #262626;
	-moz-border-radius: 0 0 7px 7px;
	-webkit-border-radius: 0 0 7px 7px;
	border-radius: 0 0 7px 7px;
	float: left;
	margin: 0 10px;
	position: relative;
	-webkit-transition:background-color .5s linear;
	-moz-transition:background-color .5s linear;
	-o-transition:background-color .5s linear;
	transition:background-color .5s linear;
}

ul.navheader li:hover {
	background-color: #d08448;
	-webkit-transition:background-color .5s linear;
	-moz-transition:background-color .5s linear;
	-o-transition:background-color .5s linear;
	transition:background-color .5s linear;
}

ul.navheader li a {
	color: #797878;
	display: block;
	padding: 10px 15px;
	text-decoration: none;
}

ul.navheader li:hover a {
	color: #fff;
	text-decoration: none;
	-webkit-transition:color .5s linear;
	-moz-transition:color .5s linear;
	-o-transition:color .5s linear;
	transition:color .5s linear;
}

ul.navheader li.view {
	background-color: #d08448;
	color: #fff;
	padding: 10px 15px;
}

ul.navheader li:hover.view {
	color: #fff;
}

/****************************************** content ******************************************/

/******* main *******/

#content {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

#content-outer{
}

#maincontent {
	float: left;
	left: 265px;
	position: relative;
	top: 120px;
	width: 75%;
}

/******* maincontent *******/

.subcontent {
	background: #f6f5f4;
	border: 1px solid #e1e1e1;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	box-shadow: 0 0 2px #fff inset;
	margin: 10px 0 20px;
	padding: 20px;
}

.entry {
}

.entry_text{
	margin-top: 20px;
}

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

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

.userpic{
	background:url(http://hodo7.com/web/freebies/hooky/texture/orange-bg.png);
	border: 1px solid #E5C4B1;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	float: left;
	margin: -40px 15px 15px -40px;
	padding: 10px;
}

.userpic img{
	border: 1px solid #E5C4B1;
}

.userpicfriends {
	background:url(http://hodo7.com/web/freebies/hooky/texture/orange-bg.png);
	border: 1px solid #E5C4B1;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	float: left;
	margin: -40px 15px 15px -40px;
	padding: 10px;
}

.userpicfriends a{
	color: #797878 !important;
	font-weight: bold;
	text-decoration: none !important;
}

.date {
	color: #a2a2a2;
	float: right;
	margin: -68px 0 0;
}

.lj-view-friends .date{
}

.subject{
	color: #FD9E52;
	float: right;
	font: 40px/20px "Lobster","Georgia",times,serif;
	margin: -50px 0 0;
	text-align: right;
	width: 80%;
}

.subject a{
	color: #FD9E52;
	text-decoration: none;
}

.subject a, .subject a:link, .subject a:visited, .subject a:hover  {
	text-decoration: none;
}

.datesubject {
}

.currents{
	clear: both;
}

.currents a{
	text-decoration: none;
}

.currentmood, .currentmusic, .currentlocation{
	padding: 5px 0 5px 25px;
}

.currentlocation {
	background: url(http://hodo7.com/web/freebies/hooky/texture/location.png) 5px center no-repeat;
}
	
.currentmusic {
	background: url(http://hodo7.com/web/freebies/hooky/texture/music.png) left center no-repeat;
}
	
.currentmood {
	background: url(http://hodo7.com/web/freebies/hooky/texture/mood.png) left center no-repeat;
}

.ljtags{
	background: url(http://hodo7.com/web/freebies/hooky/texture/tags.png) left center no-repeat;
	clear: both;
	font-weight: bold;
	padding: 5px 0 5px 25px;
}

.ljtags a{
	font-weight: normal;
	text-decoration: none;
}

.comments {
	border-top: 1px dotted #d7d7d7;
	clear: both;
	color: #95918F;
	font-size: 11px;
	margin: 20px auto;
	padding: 5px 5px 0 5px;
	position: relative;
	text-align: right;
	width: 96%;
}

.comments a, .comments a:link, .comments a:visited{
	color: #95918f;
	padding: 0 5px;
	text-decoration: none;
}

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

/******* entry *******/

.datesubjectcomment {
}

.userpiccomment {
	background:url(http://hodo7.com/web/freebies/hooky/texture/orange-bg.png);
	border: 1px solid #E5C4B1;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	float: left;
	margin: -40px 15px 15px -40px;
	padding: 10px;
}

.box {
}

input, textarea {
	background: #fff;
	color: #000;
}

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

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

.replytosubject {
	font-weight: bold;
}

.commentreply {
	margin: 10px;
	position: relative;
}

.commentbox {
	background: #e9e9e9;
	padding: 10px;
	margin: 10px;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {

}

.datesubjectcomment a:hover {
}

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

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

/******* sidebar *******/

#sidebar {
	padding: 78px 20px 10px;
	position: fixed;
	/*to make the sidebar scrollable, replace "fixed" with "absolute"*/ 
	width: 160px;
	z-index: 1;
}

#sidebar a, #sidebar a:link, #sidebar a:visited{
	color: #535352;
}

#sidebar a:hover {
	color: #7e7e7c;
}

.defaultuserpic {
	background:url(http://hodo7.com/web/freebies/hooky/texture/gray-bg.png);
	border: 1px solid #e5c4b1;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin: 0 auto 20px;
	padding: 10px;
	width: 100px;
}

.defaultuserpic  img{
	border: 1px solid #E1E1E1;
}

.sbarheader {
}

.sbarbody , .sbarbody2 {
	margin-bottom: 20px;
}

.sbarbody ul{
	margin: 0;
	padding: 0;
}

#sidebar_summary li.sbaritem {
}

.sbarlist li.sbaritem {
}

#sidebar_calendar{
}

table.calendar {
	margin: 0 auto;
}

.sbarcalendar {
	border: 1px solid #464646;
	text-align: center;
}

.sbarcalendarposts {
	background: #F7E2CF;
	border: 1px solid #464646;
}

.sbarcalendarposts a{
}

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

li.sbaritem, .tagcloud {
	list-style: none;
}

.tagcloud a{
	font-size: 11px !important;
}

li.sbaritem{
	border-bottom: 1px solid #e3c5a8;
	border-top: 1px solid #fbe8d6;
	padding: 5px 0;
}

li:first-child.sbaritem{
	border-top: 0;
}

li:last-child.sbaritem{
	border-bottom: 0;
}

li.sbaritem a{
	color: 535352;
	text-decoration: none;
}

li.sbartitle {
	font: 24px "Lobster", "Georgia", times, serif;
}

/******* archive *******/

ul.year {
	color: #797878;
	font: bold 15px "Arial Black", arial, sans-serif;
	padding-bottom: 40px;
	text-align: center;
}

ul.year li {
	display: inline;
}

table.yeartable {
	border-collapse: collapse;
	margin: 0 auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
	background: #F6F5F4;
	border: 1px solid #797878;
	padding: 2px 2px 10px 0;
}

table.yeartable td.yearday {
	background: #F5D5B5;
	color: #797878;
	font-weight: bold;
	text-align: center;
}

td.yearmonth {
	border: none;
	color: #797878;
	font: bold 15px "Arial Black", arial, sans-serif;
	padding: 0 0 10px 0;
}

/****************************************** footer ******************************************/

#footer {
	clear: both;
	float: right;
	margin: 130px 0 0;
	position: relative;
	z-index: 100;
}

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

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

ul.navfooter li{
	color: #797878;
	font: 20px "Lobster", "Georgia", times, serif;
	margin: 0 15px 0 0;
}

ul.navfooter li a{
	color: #797878;
	text-decoration: none;
}

ul.navfooter li + li{
	color: #FD9E52;
	margin: 0;
}

ul.navfooter li + li a{
	color: #FD9E52;
	text-decoration: none;
}

ul.navfooter li a:hover{
	color: #adadad;
}

ul.navfooter li.viewing{
	display: none;
}

ul.navfooter li a{
	text-decoration: none;
}

.clearfoot {
	clear: both;
	height: 0;
}

/****************************************** misc  ******************************************/

.clear {
	height: 0;
}

.skiplinks {
	margin: 10px 0 35px;
	text-align: center;
}

.skiplinks a{
	color: #797878;
	font-weight: bold;
	text-decoration: none;
}

.skiplinks a:hover{
	color: #FD9E52;
}

.headerimage {
  /* for formatting header image */
}

.separator{
	/* for formatting separators between entries */
	height: 35px;
}

* html .subcontent {
	/* fixes an IE reply page bug */
	clear: none;
	height: 1%;
}

* html .box#commentform {
	/* fixes an IE reply page bug */
	background: #000;
	border: 1px solid #fff;
	position: absolute;
}

/****************************************** contextual popup ******************************************/

div.ContextualPopup {
	text-shadow: none;
}

/****************************************** mini icons ******************************************/

.sbaritem img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
	background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png);
	padding: 11px 14px 8px 5px !important;
	width: 0;
	height: 0; 
}

.entry-title img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
	background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
	padding: 18px 0 0 29px !important;
	width: 0;
	height: 0; 
}
	
.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
	background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
	padding: 23px 0 0 29px !important;
  width: 0;
  height: 0;
 }

.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
	background: transparent url(http://hodo7.com/web/freebies/hooky/texture/private.png) no-repeat;
	padding: 18px 0 0 29px !important;
  width: 0;
  height: 0;
 }

.sbaritem img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
	background: transparent url(http://hodo7.com/web/freebies/hooky/texture/private.png) no-repeat;
  padding: 11px 6px 2px 16px !important;
  width: 0;
  height: 0;
 }

.entry-text dl dd img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
	background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
	padding: 18px 0 0 29px !important;
	width: 0;
	height: 0; 
}

.sidebar-summary img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
	background: transparent url(http://hodo7.com/web/freebies/hooky/texture/lock.png) no-repeat;
	padding: 16px 16px 0 0!important;
	width: 0;
	height: 0; 
}

/* DIRECTIONS:  To install, go to your Home section in LJ.  Scroll over Journal in the menu, click Journal Style.  Below you'll find a section of themes to select and a search field.  In the search box put in "Flexible Squares" and choose the template called "Black and White and Red All Over".  In the top right you'll see a box called Current Theme, click "Change page setup" and there choose "2 column (sidebar on the left)" and make your add placement between entries if you have a Plus account.  (Vertical banner may work as well, but horizontal will break the layout).  Then click the "Customize selected theme" button next to that.  On your left you'll see a blue sidebar, and click on "Custom CSS."  You'll see a drop down options, make sure they're all marked "No".  Leave "Custom external stylesheet URL" entry blank.

If you haven't already, you need upload all the images to your own server/image service and replace all the image URLs on this stylesheet with your own URLs.  Then copy and paste this WHOLE document into the "Custom stylesheet" box.

Click "Save Changes" and it should be ready to go! */

Template: green hooky

For: Flexible Squares

Code:

/*
  Hooky
  For: Flexible Squares
  Available:  http://community.livejournal.com/betterdolphin/
  By:  Toby
*/

/* DIRECTIONS:  Full directions on how to install are on the bottom of this document! */

/* !PLEASE! remember to upload the images to YOUR own domain or some free image service and replace the links in this stylesheet! */

html, body{
	height: 100%;
	min-height: 100%;
}

body {
	background: #f3f3f1 url(http://hodo7.com/web/freebies/hooky/texture/bg4.png);
	color: #797878;
	font: 13px "Arial", sans-serif;
	margin: 0 auto;
}

a, a:link, a:visited {
	color: #b7cd37;
	text-decoration: underline;
}

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

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

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

/****************************************** header ******************************************/

#lj_controlstrip_new{
	position: fixed;
}

#header {
	background:url(http://hodo7.com/web/freebies/hooky/texture/nav-bg.png) bottom left repeat-x;
	position: fixed;
	width: 100%;
	height: 70px;
	z-index: 2;
}

.title{
	color: #b7cd37;
	font: 28px "Lobster", "Georgia", times, serif;
	margin: 5px 0 0 15px;
}

.subtitle{
	display: none;
}

/******* nav *******/

ul.navheader {
	float: right;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

ul.navheader li:hover {
	background-color: #87962d;
	-webkit-transition:background-color .5s linear;
	-moz-transition:background-color .5s linear;
	-o-transition:background-color .5s linear;
	transition:background-color .5s linear;
}

ul.navheader li a {
	color: #797878;
	display: block;
	padding: 10px 15px;
	text-decoration: none;
}

ul.navheader li.view {
	background-color: #87962d;
	color: #fff;
	padding: 10px 15px;
}

ul.navheader li:hover.view {
	color: #fff;
}

/****************************************** content ******************************************/

/******* main *******/

#content {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

#content-outer{
}

#maincontent {
	float: left;
	left: 265px;
	position: relative;
	top: 120px;
	width: 75%;
}

/******* maincontent *******/

.entry {
}

.entry_text{
	margin-top: 20px;
}

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

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

.userpic{
	background:url(http://hodo7.com/web/freebies/hooky/texture/green-bg.png);
	border: 1px solid #ccda75;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	float: left;
	margin: -40px 15px 15px -40px;
	padding: 10px;
}

.userpic img{
	border: 1px solid #ccda75;
}

.userpicfriends {
	background:url(http://hodo7.com/web/freebies/hooky/texture/green-bg.png);
	border: 1px solid #E1E1E1;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	float: left;
	margin: -40px 15px 15px -40px;
	padding: 10px;
}

.userpicfriends a{
	color: #797878 !important;
	font-weight: bold;
	text-decoration: none !important;
}

.date {
	color: #a2a2a2;
	float: right;
	margin: -68px 0 0;
}

.lj-view-friends .date{
}

.subject{
	color: #b7cd37;
	float: right;
	font: 40px/20px "Lobster","Georgia",times,serif;
	margin: -50px 0 0;
	text-align: right;
	width: 80%;
}

.subject a{
	color: #b7cd37;
	text-decoration: none;
}

.subject a, .subject a:link, .subject a:visited, .subject a:hover  {
	text-decoration: none;
}

.datesubject {
}

.currents{
	clear: both;
}

.currents a{
	text-decoration: none;
}

.currentmood, .currentmusic, .currentlocation{
	padding: 5px 0 5px 25px;
}

.ljtags{
	background: url(http://hodo7.com/web/freebies/hooky/texture/tags.png) left center no-repeat;
	clear: both;
	font-weight: bold;
	padding: 5px 0 5px 25px;
}

.ljtags a{
	font-weight: normal;
	text-decoration: none;
}

.comments {
	border-top: 1px dotted #d7d7d7;
	clear: both;
	color: #95918F;
	font-size: 11px;
	margin: 20px auto;
	padding: 5px 5px 0 5px;
	position: relative;
	text-align: right;
	width: 96%;
}

.comments a, .comments a:link, .comments a:visited{
	color: #95918f;
	padding: 0 5px;
	text-decoration: none;
}

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

/******* entry *******/

.datesubjectcomment {
}

.userpiccomment {
	background:url(http://hodo7.com/web/freebies/hooky/texture/green-bg.png);
	border: 1px solid #ccda75;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	float: left;
	margin: -40px 15px 15px -40px;
	padding: 10px;
}

.box {
}

input, textarea {
	background: #fff;
	color: #000;
}

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

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

.replytosubject {
	font-weight: bold;
}

.commentreply {
	margin: 10px;
	position: relative;
}

.commentbox {
	background: #e9e9e9;
	padding: 10px;
	margin: 10px;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {

}

.datesubjectcomment a:hover {
}

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

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

/******* sidebar *******/

#sidebar {
	padding: 78px 20px 10px;
	position: fixed;
	/*to make the sidebar scrollable, replace "fixed" with "absolute"*/ 
	width: 160px;
	z-index: 1;
}

#sidebar a, #sidebar a:link, #sidebar a:visited{
	color: #535352;
}

#sidebar a:hover {
	color: #7e7e7c;
}

.defaultuserpic {
	background:url(http://hodo7.com/web/freebies/hooky/texture/gray-bg.png);
	border: 1px solid #ccda75;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin: 0 auto 20px;
	padding: 10px;
	width: 100px;
}

.defaultuserpic img{
	border: 1px solid #E1E1E1;
}

.sbarheader {
}

.sbarbody , .sbarbody2 {
	margin-bottom: 20px;
}

.sbarbody ul{
	margin: 0;
	padding: 0;
}

#sidebar_summary li.sbaritem {
}

.sbarlist li.sbaritem {
}

#sidebar_calendar{
}

table.calendar {
	margin: 0 auto;
}

.sbarcalendar {
	border: 1px solid #464646;
	text-align: center;
}

.sbarcalendarposts {
	background: #f2f8cb;
	border: 1px solid #464646;
}

.sbarcalendarposts a{
}

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

li.sbaritem, .tagcloud {
	list-style: none;
}

.tagcloud a{
	font-size: 11px !important;
}

li.sbaritem{
	border-bottom: 1px solid #ccda75;
	border-top: 1px solid #f4f8dd;
	padding: 5px 0;
}

li:first-child.sbaritem{
	border-top: 0;
}

li:last-child.sbaritem{
	border-bottom: 0;
}

li.sbaritem a{
	color: 535352;
	text-decoration: none;
}

li.sbartitle {
	font: 24px "Lobster", "Georgia", times, serif;
}

/******* archive *******/

ul.year {
	color: #797878;
	font: bold 15px "Arial Black", arial, sans-serif;
	padding-bottom: 40px;
	text-align: center;
}

ul.year li {
	display: inline;
}

table.yeartable {
	border-collapse: collapse;
	margin: 0 auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
	background: #F6F5F4;
	border: 1px solid #797878;
	padding: 2px 2px 10px 0;
}

table.yeartable td.yearday {
	background: #f2f8cb;
	color: #797878;
	font-weight: bold;
	text-align: center;
}

td.yearmonth {
	border: none;
	color: #797878;
	font: bold 15px "Arial Black", arial, sans-serif;
	padding: 0 0 10px 0;
}

/****************************************** footer ******************************************/

#footer {
	clear: both;
	float: right;
	margin: 130px 0 0;
	position: relative;
	z-index: 100;
}

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

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

ul.navfooter li{
	color: #797878;
	font: 20px "Lobster", "Georgia", times, serif;
	margin: 0 15px 0 0;
}

ul.navfooter li a{
	color: #797878;
	text-decoration: none;
}

ul.navfooter li + li{
	color: #b7cd37;
	margin: 0;
}

ul.navfooter li + li a{
	color: #b7cd37;
	text-decoration: none;
}

ul.navfooter li a:hover{
	color: #adadad;
}

ul.navfooter li.viewing{
	display: none;
}

ul.navfooter li a{
	text-decoration: none;
}

.clearfoot {
	clear: both;
	height: 0;
}

/****************************************** misc  ******************************************/

.clear {
	height: 0;
}

.skiplinks {
	margin: 10px 0 35px;
	text-align: center;
}

.skiplinks a{
	color: #797878;
	font-weight: bold;
	text-decoration: none;
}

.skiplinks a:hover{
	color: #b7cd37;
}

.headerimage {
  /* for formatting header image */
}

.separator{
	/* for formatting separators between entries */
	height: 35px;
}

* html .subcontent {
	/* fixes an IE reply page bug */
	clear: none;
	height: 1%;
}

* html .box#commentform {
	/* fixes an IE reply page bug */
	background: #000;
	border: 1px solid #fff;
	position: absolute;
}

/****************************************** contextual popup ******************************************/

div.ContextualPopup {
	text-shadow: none;
}

/****************************************** mini icons ******************************************/

.sbaritem img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
	background: transparent url(http://hodo7.com/web/freebies/hooky/texture/private.png) no-repeat;
  padding: 11px 5px 2px 16px!important;
  width: 0;
  height: 0;
 }

Click "Save Changes" and it should be ready to go! */

Template: purple hooky

For: Flexible Squares

Code:

/*
  Hooky
  For: Flexible Squares
  Available:  http://community.livejournal.com/betterdolphin/
  By:  Toby
*/

/* DIRECTIONS:  Full directions on how to install are on the bottom of this document! */

/* !PLEASE! remember to upload the images to YOUR own domain or some free image service and replace the links in this stylesheet! */

html, body{
	height: 100%;
	min-height: 100%;
}

body {
	background: #f3f3f1 url(http://hodo7.com/web/freebies/hooky/texture/bg2.png);
	color: #797878;
	font: 13px "Arial", sans-serif;
	margin: 0 auto;
}

a, a:link, a:visited {
	color: #954f8d;
	text-decoration: underline;
}

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

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

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

/****************************************** header ******************************************/

#lj_controlstrip_new{
	position: fixed;
}

#header {
	background:url(http://hodo7.com/web/freebies/hooky/texture/nav-bg.png) bottom left repeat-x;
	position: fixed;
	width: 100%;
	height: 70px;
	z-index: 2;
}

.title{
	color: #954f8d;
	font: 28px "Lobster", "Georgia", times, serif;
	margin: 5px 0 0 15px;
}

.subtitle{
	display: none;
}

/******* nav *******/

ul.navheader {
	float: right;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

ul.navheader li:hover {
	background-color: #72406c;
	-webkit-transition:background-color .5s linear;
	-moz-transition:background-color .5s linear;
	-o-transition:background-color .5s linear;
	transition:background-color .5s linear;
}

ul.navheader li a {
	color: #797878;
	display: block;
	padding: 10px 15px;
	text-decoration: none;
}

ul.navheader li.view {
	background-color: #72406c;
	padding: 10px 15px;
}

ul.navheader li.view{
	color:#fff;
}

ul.navheader li:hover.view {
	color: #fff;
}

/****************************************** content ******************************************/

/******* main *******/

#content {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

#content-outer{
}

#maincontent {
	float: left;
	left: 265px;
	position: relative;
	top: 120px;
	width: 75%;
}

/******* maincontent *******/

.entry {
}

.entry_text{
	margin-top: 20px;
}

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

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

.userpic{
	background:url(http://hodo7.com/web/freebies/hooky/texture/purple-bg.png);
	border: 1px solid #B393AF;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	float: left;
	margin: -40px 15px 15px -40px;
	padding: 10px;
}

.userpic img{
	border: 1px solid #B393AF;
}

.userpicfriends {
	background:url(http://hodo7.com/web/freebies/hooky/texture/purple-bg.png);
	border: 1px solid #E1E1E1;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	float: left;
	margin: -40px 15px 15px -40px;
	padding: 10px;
}

.userpicfriends a{
	color: #797878 !important;
	font-weight: bold;
	text-decoration: none !important;
}

.date {
	color: #a2a2a2;
	float: right;
	margin: -68px 0 0;
}

.lj-view-friends .date{
}

.subject{
	color: #954f8d;
	float: right;
	font: 40px/20px "Lobster","Georgia",times,serif;
	margin: -50px 0 0;
	text-align: right;
	width: 80%;
}

.subject a{
	color: #954f8d;
	text-decoration: none;
}

.subject a, .subject a:link, .subject a:visited, .subject a:hover  {
	text-decoration: none;
}

.datesubject {
}

.currents{
	clear: both;
}

.currents a{
	text-decoration: none;
}

.currentmood, .currentmusic, .currentlocation{
	padding: 5px 0 5px 25px;
}

.ljtags{
	background: url(http://hodo7.com/web/freebies/hooky/texture/tags.png) left center no-repeat;
	clear: both;
	font-weight: bold;
	padding: 5px 0 5px 25px;
}

.ljtags a{
	font-weight: normal;
	text-decoration: none;
}

.comments {
	border-top: 1px dotted #d7d7d7;
	clear: both;
	color: #95918F;
	font-size: 11px;
	margin: 20px auto;
	padding: 5px 5px 0 5px;
	position: relative;
	text-align: right;
	width: 96%;
}

.comments a, .comments a:link, .comments a:visited{
	color: #95918f;
	padding: 0 5px;
	text-decoration: none;
}

.comments a:hover {
	color: #954f8d;
	text-decoration: none;
}

/******* entry *******/

.datesubjectcomment {
}

.userpiccomment {
	background:url(http://hodo7.com/web/freebies/hooky/texture/purple-bg.png);
	border: 1px solid #B393AF;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	float: left;
	margin: -40px 15px 15px -40px;
	padding: 10px;
}

.box {
}

input, textarea {
	background: #fff;
	color: #000;
}

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

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

.replytosubject {
	font-weight: bold;
}

.commentreply {
	margin: 10px;
	position: relative;
}

.commentbox {
	background: #e9e9e9;
	padding: 10px;
	margin: 10px;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {

}

.datesubjectcomment a:hover {
}

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

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

/******* sidebar *******/

#sidebar {
	padding: 78px 20px 10px;
	position: fixed;
	/*to make the sidebar scrollable, replace "fixed" with "absolute"*/ 
	width: 160px;
	z-index: 1;
}

#sidebar a, #sidebar a:link, #sidebar a:visited{
	color: #535352;
}

#sidebar a:hover {
	color: #7e7e7c;
}

.defaultuserpic {
	background:url(http://hodo7.com/web/freebies/hooky/texture/gray-bg.png);
	border: 1px solid #B393AF;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin: 0 auto 20px;
	padding: 10px;
	width: 100px;
}

.defaultuserpic img{
	border: 1px solid #E1E1E1;
}

.sbarheader {
}

.sbarbody , .sbarbody2 {
	margin-bottom: 20px;
}

.sbarbody ul{
	margin: 0;
	padding: 0;
}

#sidebar_summary li.sbaritem {
}

.sbarlist li.sbaritem {
}

#sidebar_calendar{
}

table.calendar {
	margin: 0 auto;
}

.sbarcalendar {
	border: 1px solid #464646;
	text-align: center;
}

.sbarcalendarposts {
	background: #D6BCD2;
	border: 1px solid #464646;
}

.sbarcalendarposts a{
}

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

li.sbaritem, .tagcloud {
	list-style: none;
}

.tagcloud a{
	font-size: 11px !important;
}

li.sbaritem{
	border-bottom: 1px solid #b393af;
	border-top: 1px solid #d3bad0;
	padding: 5px 0;
}

li:first-child.sbaritem{
	border-top: 0;
}

li:last-child.sbaritem{
	border-bottom: 0;
}

li.sbaritem a{
	color: 535352;
	text-decoration: none;
}

li.sbartitle {
	font: 24px "Lobster", "Georgia", times, serif;
}

/******* archive *******/

ul.year {
	color: #797878;
	font: bold 15px "Arial Black", arial, sans-serif;
	padding-bottom: 40px;
	text-align: center;
}

ul.year li {
	display: inline;
}

table.yeartable {
	border-collapse: collapse;
	margin: 0 auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
	background: #F6F5F4;
	border: 1px solid #797878;
	padding: 2px 2px 10px 0;
}

table.yeartable td.yearday {
	background: #D6BCD2;
	color: #797878;
	font-weight: bold;
	text-align: center;
}

td.yearmonth {
	border: none;
	color: #797878;
	font: bold 15px "Arial Black", arial, sans-serif;
	padding: 0 0 10px 0;
}

/****************************************** footer ******************************************/

#footer {
	clear: both;
	float: right;
	margin: 130px 0 0;
	position: relative;
	z-index: 100;
}

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

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

ul.navfooter li{
	color: #797878;
	font: 20px "Lobster", "Georgia", times, serif;
	margin: 0 15px 0 0;
}

ul.navfooter li a{
	color: #797878;
	text-decoration: none;
}

ul.navfooter li + li{
	color: #954f8d;
	margin: 0;
}

ul.navfooter li + li a{
	color: #954f8d;
	text-decoration: none;
}

ul.navfooter li a:hover{
	color: #adadad;
}

ul.navfooter li.viewing{
	display: none;
}

ul.navfooter li a{
	text-decoration: none;
}

.clearfoot {
	clear: both;
	height: 0;
}

/****************************************** misc  ******************************************/

.clear {
	height: 0;
}

.skiplinks {
	margin: 10px 0 35px;
	text-align: center;
}

.skiplinks a{
	color: #797878;
	font-weight: bold;
	text-decoration: none;
}

.skiplinks a:hover{
	color: #954f8d;
}

.headerimage {
  /* for formatting header image */
}

.separator{
	/* for formatting separators between entries */
	height: 35px;
}

* html .subcontent {
	/* fixes an IE reply page bug */
	clear: none;
	height: 1%;
}

* html .box#commentform {
	/* fixes an IE reply page bug */
	background: #000;
	border: 1px solid #fff;
	position: absolute;
}

/****************************************** contextual popup ******************************************/

div.ContextualPopup {
	text-shadow: none;
}

/****************************************** mini icons ******************************************/

.sbaritem img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
	background: transparent url(http://hodo7.com/web/freebies/hooky/texture/private.png) no-repeat;
  padding: 11px 5px 2px 16px!important;
  width: 0;
  height: 0;
 }

Click "Save Changes" and it should be ready to go! */

Template: blue hooky

For: Flexible Squares

Code:

/*
  Hooky
  For: Flexible Squares
  Available:  http://community.livejournal.com/betterdolphin/
  By:  Toby
*/

/* DIRECTIONS:  Full directions on how to install are on the bottom of this document! */

/* !PLEASE! remember to upload the images to YOUR own domain or some free image service and replace the links in this stylesheet! */

html, body{
	height: 100%;
	min-height: 100%;
}

body {
	background: #f3f3f1 url(http://hodo7.com/web/freebies/hooky/texture/bg3.png);
	color: #797878;
	font: 13px "Arial", sans-serif;
	margin: 0 auto;
}

a, a:link, a:visited {
	color: #7ed0d6;
	text-decoration: underline;
}

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

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

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

/****************************************** header ******************************************/

#lj_controlstrip_new{
	position: fixed;
}

#header {
	background:url(http://hodo7.com/web/freebies/hooky/texture/nav-bg.png) bottom left repeat-x;
	position: fixed;
	width: 100%;
	height: 70px;
	z-index: 2;
}

.title{
	color: #7ed0d6;
	font: 28px "Lobster", "Georgia", times, serif;
	margin: 5px 0 0 15px;
}

.subtitle{
	display: none;
}

/******* nav *******/

ul.navheader {
	float: right;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

ul.navheader li:hover {
	background-color: #267379;
	-webkit-transition:background-color .5s linear;
	-moz-transition:background-color .5s linear;
	-o-transition:background-color .5s linear;
	transition:background-color .5s linear;
}

ul.navheader li a {
	color: #797878;
	display: block;
	padding: 10px 15px;
	text-decoration: none;
}

ul.navheader li.view {
	background-color: #267379;
	color: #fff;
	padding: 10px 15px;
}

ul.navheader li:hover.view {
	color: #fff;
}

/****************************************** content ******************************************/

/******* main *******/

#content {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

#content-outer{
}

#maincontent {
	float: left;
	left: 265px;
	position: relative;
	top: 120px;
	width: 75%;
}

/******* maincontent *******/

.entry {
}

.entry_text{
	margin-top: 20px;
}

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

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

.userpic{
	background:url(http://hodo7.com/web/freebies/hooky/texture/blue-bg.png);
	border: 1px solid #98ced3;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	float: left;
	margin: -40px 15px 15px -40px;
	padding: 10px;
}

.userpic img{
	border: 1px solid #98ced3;
}

.userpicfriends {
	background:url(http://hodo7.com/web/freebies/hooky/texture/blue-bg.png);
	border: 1px solid #E1E1E1;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	float: left;
	margin: -40px 15px 15px -40px;
	padding: 10px;
}

.userpicfriends a{
	color: #797878 !important;
	font-weight: bold;
	text-decoration: none !important;
}

.date {
	color: #a2a2a2;
	float: right;
	margin: -68px 0 0;
}

.lj-view-friends .date{
}

.subject{
	color: #7ed0d6;
	float: right;
	font: 40px/20px "Lobster","Georgia",times,serif;
	margin: -50px 0 0;
	text-align: right;
	width: 80%;
}

.subject a{
	color: #7ed0d6;
	text-decoration: none;
}

.subject a, .subject a:link, .subject a:visited, .subject a:hover  {
	text-decoration: none;
}

.datesubject {
}

.currents{
	clear: both;
}

.currents a{
	text-decoration: none;
}

.currentmood, .currentmusic, .currentlocation{
	padding: 5px 0 5px 25px;
}

.ljtags{
	background: url(http://hodo7.com/web/freebies/hooky/texture/tags.png) left center no-repeat;
	clear: both;
	font-weight: bold;
	padding: 5px 0 5px 25px;
}

.ljtags a{
	font-weight: normal;
	text-decoration: none;
}

.comments {
	border-top: 1px dotted #d7d7d7;
	clear: both;
	color: #95918F;
	font-size: 11px;
	margin: 20px auto;
	padding: 5px 5px 0 5px;
	position: relative;
	text-align: right;
	width: 96%;
}

.comments a, .comments a:link, .comments a:visited{
	color: #95918f;
	padding: 0 5px;
	text-decoration: none;
}

.comments a:hover {
	color: #7ed0d6;
	text-decoration: none;
}

/******* entry *******/

.datesubjectcomment {
}

.userpiccomment {
	background:url(http://hodo7.com/web/freebies/hooky/texture/blue-bg.png);
	border: 1px solid #98ced3;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	float: left;
	margin: -40px 15px 15px -40px;
	padding: 10px;
}

.box {
}

input, textarea {
	background: #fff;
	color: #000;
}

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

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

.replytosubject {
	font-weight: bold;
}

.commentreply {
	margin: 10px;
	position: relative;
}

.commentbox {
	background: #e9e9e9;
	padding: 10px;
	margin: 10px;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {

}

.datesubjectcomment a:hover {
}

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

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

/******* sidebar *******/

#sidebar {
	padding: 78px 20px 10px;
	position: fixed;
	/*to make the sidebar scrollable, replace "fixed" with "absolute"*/ 
	width: 160px;
	z-index: 1;
}

#sidebar a, #sidebar a:link, #sidebar a:visited{
	color: #535352;
}

#sidebar a:hover {
	color: #7e7e7c;
}

.defaultuserpic {
	background:url(http://hodo7.com/web/freebies/hooky/texture/gray-bg.png);
	border: 1px solid #98ced3;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin: 0 auto 20px;
	padding: 10px;
	width: 100px;
}

.defaultuserpic img{
	border: 1px solid #E1E1E1;
}

.sbarheader {
}

.sbarbody , .sbarbody2 {
	margin-bottom: 20px;
}

.sbarbody ul{
	margin: 0;
	padding: 0;
}

#sidebar_summary li.sbaritem {
}

.sbarlist li.sbaritem {
}

#sidebar_calendar{
}

table.calendar {
	margin: 0 auto;
}

.sbarcalendar {
	border: 1px solid #464646;
	text-align: center;
}

.sbarcalendarposts {
	background: #C9EAED;
	border: 1px solid #464646;
}

.sbarcalendarposts a{
}

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

li.sbaritem, .tagcloud {
	list-style: none;
}

.tagcloud a{
	font-size: 11px !important;
}

li.sbaritem{
	border-bottom: 1px solid #98ced3;
	border-top: 1px solid #daeff0;
	padding: 5px 0;
}

li:first-child.sbaritem{
	border-top: 0;
}

li:last-child.sbaritem{
	border-bottom: 0;
}

li.sbaritem a{
	color: 535352;
	text-decoration: none;
}

li.sbartitle {
	font: 24px "Lobster", "Georgia", times, serif;
}

/******* archive *******/

ul.year {
	color: #797878;
	font: bold 15px "Arial Black", arial, sans-serif;
	padding-bottom: 40px;
	text-align: center;
}

ul.year li {
	display: inline;
}

table.yeartable {
	border-collapse: collapse;
	margin: 0 auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
	background: #F6F5F4;
	border: 1px solid #797878;
	padding: 2px 2px 10px 0;
}

table.yeartable td.yearday {
	background: #C9EAED;
	color: #797878;
	font-weight: bold;
	text-align: center;
}

td.yearmonth {
	border: none;
	color: #797878;
	font: bold 15px "Arial Black", arial, sans-serif;
	padding: 0 0 10px 0;
}

/****************************************** footer ******************************************/

#footer {
	clear: both;
	float: right;
	margin: 130px 0 0;
	position: relative;
	z-index: 100;
}

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

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

ul.navfooter li{
	color: #797878;
	font: 20px "Lobster", "Georgia", times, serif;
	margin: 0 15px 0 0;
}

ul.navfooter li a{
	color: #797878;
	text-decoration: none;
}

ul.navfooter li + li{
	color: #7ed0d6;
	margin: 0;
}

ul.navfooter li + li a{
	color: #7ed0d6;
	text-decoration: none;
}

ul.navfooter li a:hover{
	color: #adadad;
}

ul.navfooter li.viewing{
	display: none;
}

ul.navfooter li a{
	text-decoration: none;
}

.clearfoot {
	clear: both;
	height: 0;
}

/****************************************** misc  ******************************************/

.clear {
	height: 0;
}

.skiplinks {
	margin: 10px 0 35px;
	text-align: center;
}

.skiplinks a{
	color: #797878;
	font-weight: bold;
	text-decoration: none;
}

.skiplinks a:hover{
	color: #7ed0d6;
}

.headerimage {
  /* for formatting header image */
}

.separator{
	/* for formatting separators between entries */
	height: 35px;
}

* html .subcontent {
	/* fixes an IE reply page bug */
	clear: none;
	height: 1%;
}

* html .box#commentform {
	/* fixes an IE reply page bug */
	background: #000;
	border: 1px solid #fff;
	position: absolute;
}

/****************************************** contextual popup ******************************************/

div.ContextualPopup {
	text-shadow: none;
}

/****************************************** mini icons ******************************************/

.sbaritem img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
	background: transparent url(http://hodo7.com/web/freebies/hooky/texture/private.png) no-repeat;
  padding: 11px 5px 2px 16px!important;
  width: 0;
  height: 0;
 }

Click "Save Changes" and it should be ready to go! */

Template: orange hooky (NO texture)

For: Flexible Squares

NOTES: If you use this option the sidebar won't stretch down to the browser, but it's styled nicely.

Images: These are hosted on my own domain, PLEASE save and upload to your own server/account. Just be sure to change the URLs in the style sheet when you do!

Here is a zip of the images and stylesheet.

Code:
The post is too long, rather than making a second post I'll have to link to the style style here, which will open in a new window.

Rules of the Game: - Credit betterdolphin somewhere viewable, like a stickied post or userinfo, and leave the credit on the sheet
- You may edit to suit your needs, but credit would still be nice.
- Commenting not necessary, but makes me feel good all over anyway if you do.

CR Chart #3

2011-11-25T03:36:10Z

A table set up good for profiles/muse lists/cr charts. There are 3 ways to use it.

Image Preview

Notes
You can change the colors as you see fit. There's three versions, one with both one cell and three cells, one with only one cell, and one with only the three cells.

BOTH

The Live Example
It's a bit large, so here's a link to the live preview.

The Code

<table style="background: #E8EAE5; border-collapse: collapse; color: #353831; font: 12px/18px arial, sans-serif; text-align: justify; width: 700px;"><tr><td colspan="3" style="background: #353831; border-left: 5px solid #353831; color: #F0F2ED; padding: 5px;">Active</td></tr><tr><td colspan="3" style="border-left: 5px solid #353831; padding: 10px;"><span style="border-bottom: 1px solid #D1D3CD; display: block; font: italic bold 20px Georgia,Palatino,'Palatino Linotype',Times,'Times New Roman',serif; padding-bottom: 3px;">Name | Canon</span>
<img src="http://i.imgur.com/LdG6b.jpg" style="border: 1px solid #D1D3CD; float: left; margin: 0 10px 10px 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ut egestas auctor, augue leo pretium lorem, ut iaculis tortor sapien iaculis erat. Praesent et fermentum libero.  <strong>Currently played</strong> in [games here].

<span style="float: right">» [account's username here]</span></td></tr><tr><td colspan="3" style="border-left: 5px solid #353831; padding: 10px;"><span style="border-bottom: 1px solid #D1D3CD; display: block; font: italic bold 20px Georgia,Palatino,'Palatino Linotype',Times,'Times New Roman',serif; padding-bottom: 3px;">Name | Canon</span>
<img src="http://i.imgur.com/nCx3B.jpg" style="border: 1px solid #D1D3CD; float: left; margin: 0 10px 10px 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ut egestas auctor, augue leo pretium lorem, ut iaculis tortor sapien iaculis erat. Praesent et fermentum libero.  <strong>Currently played</strong> in [games here].

<span style="float: right">» [account's username here]</span></td></tr><tr><td colspan="3" style="border-left: 5px solid #353831; padding: 10px;"><span style="border-bottom: 1px solid #D1D3CD; display: block; font: italic bold 20px Georgia,Palatino,'Palatino Linotype',Times,'Times New Roman',serif; padding-bottom: 3px;">Name | Canon</span>
<img src="http://i.imgur.com/LDb1u.jpg" style="border: 1px solid #D1D3CD; float: left; margin: 0 10px 10px 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ut egestas auctor, augue leo pretium lorem, ut iaculis tortor sapien iaculis erat. Praesent et fermentum libero.  <strong>Currently played</strong> in [games here].

<span style="float: right">» [account's username here]</span></td></tr><tr><td colspan="3" style="background: #353831; border-left: 5px solid #353831; color: #F0F2ED; padding: 5px;">Inactive</td></tr><tr><td style="border-left: 5px solid #353831; padding: 10px; text-align: center; vertical-align: top; width: 275px;"><span style="border-bottom: 1px solid #D1D3CD; display: block; font: italic bold 15px Georgia,Palatino,'Palatino Linotype',Times,'Times New Roman',serif; padding-bottom: 3px;">Name | Canon</span>
<img src="http://i.imgur.com/ZWblr.jpg" style="border: 1px solid #D1D3CD;">

<span style="display: block; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ut egestas auctor, augue leo pretium lorem, ut iaculis tortor sapien iaculis erat. Praesent et fermentum libero.

<span style="float: right">» [account's names here]</span></span></td><td style="border-left: 5px solid #353831; padding: 10px; text-align: center; vertical-align: top; width: 275px;"><span style="border-bottom: 1px solid #D1D3CD; display: block; font: italic bold 15px Georgia,Palatino,'Palatino Linotype',Times,'Times New Roman',serif; padding-bottom: 3px;">Name | Canon</span>
<img src="http://i.imgur.com/khiYS.jpg" style="border: 1px solid #D1D3CD;">

<span style="float: right">» [account's names here]</span></span></td></tr></table>

ONE CELL ONLY

The Live Example

Title
Name \| Canon Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ut egestas auctor, augue leo pretium lorem, ut iaculis tortor sapien iaculis erat. Praesent et fermentum libero. Currently played in [games here]. » [account's username here]
Name \| Canon Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ut egestas auctor, augue leo pretium lorem, ut iaculis tortor sapien iaculis erat. Praesent et fermentum libero. Currently played in [games here]. » [account's username here]
Name \| Canon Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ut egestas auctor, augue leo pretium lorem, ut iaculis tortor sapien iaculis erat. Praesent et fermentum libero. Currently played in [games here]. » [account's username here]

The Code

<table style="background: #E8EAE5; border-collapse: collapse; color: #353831; font: 12px/18px arial, sans-serif; text-align: justify; width: 700px;"><tr><td colspan="3" style="background: #353831; border-left: 5px solid #353831; color: #F0F2ED; padding: 5px;">Title</td></tr><tr><td colspan="3" style="border-left: 5px solid #353831; padding: 10px;"><span style="border-bottom: 1px solid #D1D3CD; display: block; font: italic bold 20px Georgia,Palatino,'Palatino Linotype',Times,'Times New Roman',serif; padding-bottom: 3px;">Name | Canon</span>
<img src="http://i.imgur.com/LdG6b.jpg" style="border: 1px solid #D1D3CD; float: left; margin: 0 10px 10px 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ut egestas auctor, augue leo pretium lorem, ut iaculis tortor sapien iaculis erat. Praesent et fermentum libero.  <strong>Currently played</strong> in [games here].

<span style="float: right">» [account's username here]</span></td></tr><tr><td colspan="3" style="border-left: 5px solid #353831; padding: 10px;"><span style="border-bottom: 1px solid #D1D3CD; display: block; font: italic bold 20px Georgia,Palatino,'Palatino Linotype',Times,'Times New Roman',serif; padding-bottom: 3px;">Name | Canon</span>
<img src="http://i.imgur.com/LDb1u.jpg" style="border: 1px solid #D1D3CD; float: left; margin: 0 10px 10px 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ut egestas auctor, augue leo pretium lorem, ut iaculis tortor sapien iaculis erat. Praesent et fermentum libero.  <strong>Currently played</strong> in [games here].

<span style="float: right">» [account's username here]</span></td></tr></table>

THREE CELLS ONLY

The Live Preview

Title
Name \| Canon Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ut egestas auctor, augue leo pretium lorem, ut iaculis tortor sapien iaculis erat. Praesent et fermentum libero. » [account's names here]	Name \| Canon Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ut egestas auctor, augue leo pretium lorem, ut iaculis tortor sapien iaculis erat. Praesent et fermentum libero. » [account's names here]	Name \| Canon Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ut egestas auctor, augue leo pretium lorem, ut iaculis tortor sapien iaculis erat. Praesent et fermentum libero. » [account's names here]

The Code

<table style="background: #E8EAE5; border-collapse: collapse; color: #353831; font: 12px/18px arial, sans-serif; text-align: justify; width: 700px;"><tr><td colspan="3" style="background: #353831; border-left: 5px solid #353831; color: #F0F2ED; padding: 5px;">Title</td></tr><tr><td style="border-left: 5px solid #353831; padding: 10px; text-align: center; vertical-align: top; width: 275px;"><span style="border-bottom: 1px solid #D1D3CD; display: block; font: italic bold 15px Georgia,Palatino,'Palatino Linotype',Times,'Times New Roman',serif; padding-bottom: 3px;">Name | Canon</span>
<img src="http://i.imgur.com/ZWblr.jpg" style="border: 1px solid #D1D3CD;">

<span style="float: right">» [account's names here]</span></span></td></tr></table>

RULES OF THE GAME:
-Please credit to <lj comm="betterdolphin"> somewhere if you use.
-Commenting not necessary but nice.

CR Chart #2

2011-11-22T03:40:36Z

A table set up good for profiles/muse lists/cr charts.

Image Preview

Notes
You can change the colors as you see fit. The rounded corners won't work in <ie9 or <FF4. This is set up so that each entry is its own table. I thought that was the easiest solution for the rounded corner top rather than adding superfluous blank rows. If it is a big bother I can make an alternative.

The Live Example

Better Dolphin★
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis rhoncus erat quis vehicula. Morbi lectus dolor, pretium quis faucibus a, consequat et urna. Quisque diam purus, luctus a convallis et, suscipit porta lectus. Maecenas a lorem libero, nec placerat quam. betterdolphin

Better Dolphin
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis rhoncus erat quis vehicula. Morbi lectus dolor, pretium quis faucibus a, consequat et urna. Quisque diam purus, luctus a convallis et, suscipit porta lectus. Maecenas a lorem libero, nec placerat quam. itsanooray

The Code

<table style="border-collapse: collapse; width: 600px;"><tr><td colspan="2" style="background: #d9e6d2; border-radius: 10px 10px 0 0; color: #454545; font: bold italic 20px Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; padding: 5px 7px;"><span style="float: left;">Better Dolphin</span><span style="float: right; font-style: normal;">★</span></td></tr><tr><td style="background: #ededed; padding: 15px 0; text-align: center; vertical-align: middle; width: 125px;"><img src="http://l-userpic.livejournal.com/88254333/19802581"></td><td style="background: #F4F4F4; border-left: 1px solid #f9f9f9; color: #6d6d6d; font: 11px/16px arial, sans-serif; padding: 5px 10px; vertical-align: top;">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis rhoncus erat quis vehicula. Morbi lectus dolor, pretium quis faucibus a, consequat et urna. Quisque diam purus, luctus a convallis et, suscipit porta lectus. Maecenas a lorem libero, nec placerat quam.

<table style="border-collapse: collapse; width: 600px;"><tr><td colspan="2" style="background: #373737; border-radius: 10px 10px 0 0; color: #eaeaea; font: bold italic 20px Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; padding: 5px 7px;"><span style="float: left;">Better Dolphin</span><span style="float: right; font-style: normal;"></span></td></tr><tr><td style="background: #ededed; padding: 15px 0; text-align: center; vertical-align: middle; width: 125px;"><img src="http://l-userpic.livejournal.com/88223027/19790160"></td><td style="background: #F4F4F4; border-left: 1px solid #f9f9f9; color: #6d6d6d; font: 11px/16px arial, sans-serif; padding: 5px 10px; vertical-align: top;">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis rhoncus erat quis vehicula. Morbi lectus dolor, pretium quis faucibus a, consequat et urna. Quisque diam purus, luctus a convallis et, suscipit porta lectus. Maecenas a lorem libero, nec placerat quam.

RULES OF THE GAME:
-Please credit to <lj comm="betterdolphin"> somewhere if you use.
-Commenting not necessary but nice.

CR table code

2011-06-13T00:52:36Z

For the RPers among us.

1) This was created with the ability to change the color behind the icons in mind. You can pick whatever colors you want and replace the color codes for that block, but you'll also need to change the color code for the border around the small icon to match. Just copy the appropriate rows and change the color.

2) It should look fine in all browsers, drop me a note if it doesn't. Only real difference is with IE where the rounded corners on the icons won't work and on IE7 the image doesn't resample well when shrunk. Oh and rounded corners on images aren't allowed in older versions of FF (under 4) and Chrome.

3) The symbols at the top are just everyday HTML special codes, you can use your own, make icons, or not have any at all. They're arbitrary.

The Code

<table style="background: #f2f2f2; width: 500px;" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="background: #010302; height: 2px; padding: 0;"></td>
</tr>
<tr>
<td rowspan="2" style="background: #A13E38; padding: 10px; width: 86px; height: 95px; vertical-align: top;"><img src="http://l-userpic.livejournal.com/88254333/19802581" style="border-radius: 50px; width: 70px; height: 70px;" />
<img src="http://l-userpic.livejournal.com/88223027/19790160" style="border-radius: 50px; margin: -29px 0 0 32px; width: 50px; height: 50px; border: 2px solid #A13E38;" /></td>
<td style="background: #514C49; border-bottom: 1px solid #fff; color: #F2F2F2; font: italic bold 17px Georgia, serif; padding: 0 0 0 10px; height: 20px;">★★ It's an Ooray!</td>
</tr>
<tr>
<td style="font: 12px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; vertical-align: top; padding: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim ante quam, suscipit mollis nisi. Suspendisse ante lorem, elementum sed porta nec, tempor ac risus. Sed quis neque elit, non porta risus. Fusce vulputate turpis non risus rutrum egestas. Ut mauris nibh, faucibus vel volutpat vel, venenatis id velit. Aenean ut tortor in risus cursus congue a id turpis.

<span style="display: block; font-size: 10px; text-align: right; width: 100%;">» <lj user="itsanooray"></span></td>
</tr>
<tr>
<td colspan="2" style="background: #010302; height: 2px; padding: 0;"></td>
</tr>
<tr>
<td rowspan="2" style="background: #0E5C60; padding: 10px; width: 86px; height: 95px; vertical-align: top;"><img src="http://l-userpic.livejournal.com/88223027/19790160" style="border-radius: 50px; width: 70px; height: 70px;" />
<img src="http://l-userpic.livejournal.com/88254333/19802581" style="border-radius: 50px; margin: -29px 0 0 32px; width: 50px; height: 50px; border: 2px solid #0E5C60;" /></td>
<td style="background: #514C49; border-bottom: 1px solid #fff; color: #F2F2F2; font: italic bold 17px Georgia, serif; padding: 0 0 0 10px; height: 20px;">— Better Dolphin</td>
</tr>
<tr>
<td style="font: 12px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; vertical-align: top; padding: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim ante quam, suscipit mollis nisi. Suspendisse ante lorem, elementum sed porta nec, tempor ac risus. Sed quis neque elit, non porta risus.
<span style="display: block; font-size: 10px; text-align: right; width: 100%;">» <lj user="betterdolphin"></span></td>
</tr>
</table>

The Sample


	★★ It's an Ooray!
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim ante quam, suscipit mollis nisi. Suspendisse ante lorem, elementum sed porta nec, tempor ac risus. Sed quis neque elit, non porta risus. Fusce vulputate turpis non risus rutrum egestas. Ut mauris nibh, faucibus vel volutpat vel, venenatis id velit. Aenean ut tortor in risus cursus congue a id turpis. » itsanooray

	— Better Dolphin
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim ante quam, suscipit mollis nisi. Suspendisse ante lorem, elementum sed porta nec, tempor ac risus. Sed quis neque elit, non porta risus. » betterdolphin

RULES OF THE GAME:
-Please credit to <lj comm="betterdolphin"> somewhere if you use.
-Commenting not necessary but nice.

Flexible Squares: intention

2011-04-25T01:23:27Z

Image Preview - Live Preview

"intention"

Has two variations, and also features mini-icons.

Template: light intention

For: Flexible Squares

Notes: Tested in IE7-8, FF, Opera, Safari and Chrome.
Rounded corners, drop shadows and text shadows will not work under IE9.

Directions: Click here. In search box put "Flexible Squares" and choose the template called "Black and White and Red All Over". In the top right you'll see a box called Current Theme, click "Change page setup" and there choose "2 column (sidebar right)".

Click on Customize Selected Theme. On your left you'll see a blue sidebar, and click on the Text link. In there there's a Comments section. Change the options so there's only numbers or a # sound, the mini icon with the word bubbles are supposed to take the place of the words "comments". Then click on "Customize CSS" menu link in the same sidebar. Make sure all options are set to "no", and "Custom external stylesheet URL" field remains blank.

Then, copy and paste the entire stylesheet below into "Custom stylesheet" field and click Save Changes.

Images: These are hosted on my own domain, PLEASE save and upload to your own server/account. Just be sure to change the URLs in the style sheet when you do!

Here is a zip of the images.

Code:

/*
  Intention
  For: Flexible Squares
  Available:  http://community.livejournal.com/betterdolphin/
  By:  Toby
*/

/* DIRECTIONS:  Full directions on how to install are on the bottom of this document! */

/* !PLEASE! remember to upload the images to YOUR own domain or some free image service and replace the links in this stylesheet! */

body {
  background: #f2f2f2 url(http://hodo7.com/web/freebies/intention/white-bg.jpg);
  text-align: center;
  color: #282623;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  margin: 0 auto;
}

a, a:link, a:visited {
  color: #57cfce;
  text-decoration: underline;
}

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

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

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

#content {
  width: 960px;
  margin: 0 auto;
  padding: 0;
}

#content-outer{
	padding-bottom: 40px !important;
}

#maincontent {
  float: left;
  text-align: left;
	width:765px;
}

#sidebar {
	background: #fff url(http://hodo7.com/web/freebies/intention/sidebar-bg.gif) repeat-x;
  float: right;
	border-radius: 10px;
	box-shadow: 0 0 7px #c6c6c6;
  text-align: left;
	width: 160px;
}

#header {
  padding: 0;
  margin: 20px 0 0 0;
  text-align: left;
}

#footer {
  padding: 10px 0;
  margin: 0;
  border-top: 1px solid #dfdfdf;
  text-align: center;
  color: #9b9b9b;
  z-index: 100;
  clear: both;
}

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

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

ul.navheader li {
	float: left;
  list-style-type: none;
	margin: 0 10px 0 0;
	position: relative;
	text-align: center;
	width: 100px;
}

ul.navheader li a {
	background: #e86ba3;
	border-radius: 10px 0 10px 0;
  color: #fff;
	display: block;
	padding: 3px 5px;
	text-decoration: none;
}

ul.navheader li + li a {
	background: #57cfce;
}

ul.navheader li + li + li  a {
	background: #e86ba3;
}

ul.navheader li + li + li + li a {
	background: #57cfce;
}

ul.navheader li:hover a {
  background: #cbe86b;
  color: #282623;
}

ul.navheader li.view {
  background: #cbe86b;
	border-radius: 10px 0 10px 0;
  color: #282623;
	padding: 3px 5px;
}

.title{
	clear: both;
  font: 40px "Arial Black", arial, sans-seris;
  font-weight: bold;
  margin: 10px 0 0 0;
}

.subtitle{
  color: #57cfce;
  margin: -10px 0 20px 0;
}

/************************************* sidebar *************************************/

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

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

.defaultuserpic {
  background: #fff;
	border-radius: 10px;
  margin: 10px auto 0;
  padding: 10px 0 0 0;
  text-align: center;
  width: 125px;
}

.defaultuserpic img {
}

.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 dotted #D7D7D7;
}

.sbarlist li.sbaritem {
  margin: 0 10px;
  padding: 3px 0;
  border-bottom: 1px dotted #D7D7D7;
}

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

.sbarcalendar {
  border: 1px solid #464646;
  text-align: center;
}

.sbarcalendarposts {
	background: #cbe86b;
  border: 1px solid #464646;
}

.sbarcalendarposts a{
  color: #282623 !important;
}

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

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

li.sbartitle {
	color: #E86BA3;
	font: bold 13px "Arial Black", arial, sans-serif; 
  list-style: none;
	padding: 2px;
}

/************************************* maincontent *************************************/

.subcontent {
  background: #fff url(http://hodo7.com/web/freebies/intention/entry-bg.gif) repeat-y;
	border-radius: 10px 0 10px 0;
	box-shadow: 0 0 7px #c6c6c6;
	min-height: 230px;
	position: relative;
	width: 765px;
}

.entry {
  margin: 0px 10px 10px 125px;
  padding: 10px;
  text-align: left;
	width:600px;
}

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

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

.userpic {
  background: #fff;
	border-radius: 10px;
  float: left;
  margin: 11px 0 0 13px;
  padding: 10px;
  position: relative;
  z-index: 15;
}

.userpicfriends {
  background: #fff !important;
	border-radius: 10px;
  float: left;
  margin: 10px;
  padding: 10px 0 3px;
  position: relative;
  text-align: center;
  width: 125px;
  z-index: 15;
}

.userpicfriends a{
  color: #cbe86b;
	text-decoration: none;
}

.date {
  color: #57cfce;
	float: left;
  font: 20px "Arial Black", arial, sans-serif;
	font-weight: bold;
	line-height: 16px;
  margin: 133px 0 0 -110px;
  padding: 0;
  position: absolute;
  width: 100px;
	word-wrap: break-word;
}

.lj-view-friends .date{
  margin: 135px 0 0 -120px !important;
}

.subject {
	color: #e86ba3;
	font: 24px "Arial Black", arial, sans-serif;
  font-weight: bold;
  padding-bottom: 5px;
}

.subject a, .subject a:link, .subject a:visited, .subject a:hover  {
	color: #e86ba3;
  text-decoration: none;
}

.datesubject {
  border-bottom: 1px dotted #d7d7d7;
	float: left;
  margin: 0 auto;
  text-align: right;
	width: 80%;
}

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

.currentlocation {
  background:url(http://hodo7.com/web/freebies/intention/sprites.png) 0 -151px no-repeat;
  font-size:11px;
  margin:0;
  padding:5px 0 0 20px;
  text-align:left;
  }
	
.currentmusic {
  background:url(http://hodo7.com/web/freebies/intention/sprites.png) 2px -91px no-repeat;
  font-size:11px;
  margin:0;
  padding:5px 0 0 20px;
  text-align:left;
  }
	
.currentmood {
  background:url(http://hodo7.com/web/freebies/intention/sprites.png) 0 -68px no-repeat;
  font-size:11px;
  margin:0;
  padding:5px 0 0 20px;
  text-align:left;
  }

.ljtags {
  background:url(http://hodo7.com/web/freebies/intention/sprites.png) 0 -40px no-repeat;
  font-size:11px;
  margin:10px 0 0 0;
  padding:7px 0 7px 20px;
  text-align:left;
	clear: both;
  }

.comments {
  color: #fff;
  font-size: 11px;
  text-align: right;
  padding: 5px 5px 0 5px;
  position: relative;
  border-top: 1px dotted #d7d7d7;
  margin: 20px auto;
  text-align: right;
  width: 96%;
}

.comments a, .comments a:link, .comments a:visited{
  background:url(http://hodo7.com/web/freebies/intention/sprites.png) right -120px no-repeat;
  color: #95918f;
	padding: 0 20px 0 0;
	text-decoration: none;
}

.comments a:hover {
  color: #74cccb;
  text-decoration: none;
}

/************************************* maincontent --  entry, reply pages *************************************/

.datesubjectcomment {
  padding: 5px;
  margin-top: 20px;
	position: relative;
  text-align: right;
	color: #9b9b9b;
}

.userpiccomment {
  background: #fff !important;
	border-radius: 10px;
  float: left;
  margin: 10px;
  padding: 10px;
  position: relative;
  text-align: center;
  z-index: 15;
}

.box {
  background: #fff;
	border-radius: 10px 0 10px 0;
	box-shadow: 0 0 7px #c6c6c6;
	margin-bottom: 20px;
	padding: 20px;
	position: relative;
	width: 725px;
  clear: left;
}

input, textarea {
  background-color: #ffffff;
  color: #000000;
}

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

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

.replytosubject {
  font-weight: bold;
}

.commentreply {
  position: relative;
  margin: 10px;
}

.commentbox {
	background: #e9e9e9;
  padding: 10px;
  margin: 10px;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {

}

.datesubjectcomment a:hover {
}

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

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

/************************************* maincontent -- year/achive pages *************************************/

ul.year {
  text-align: center;
  padding-bottom: 40px;
	color: #e86ba3;
	font: bold 15px "Arial Black", arial, sans-serif;
}

ul.year li {
  display: inline;
}

table.yeartable {
  border-collapse: collapse;
  margin: 0 auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
  border: 1px solid #464646;
	padding: 2px 2px 10px 0;
}

table.yeartable td.yearday {
  text-align: center;
	background: #cbe86b;
	color: #57cfce;
	font-weight: bold;
}

td.yearmonth {
  border-style: none;
	color: #e86ba3;
	font: bold 15px "Arial Black", arial, sans-serif;
	padding: 0 0 10px 0;
}

/************************************* footer *************************************/

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

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

ul.navfooter li a{
  text-decoration: none;
}

.clearfoot {
  clear: both;
	height: 0;
}

/************************************* misc  *************************************/

.clear {
  height: 0;
}

.skiplinks {
  margin: 10px 0;
  text-align: center;
}

.skiplinks a{
	color: #e86ba3;
}

.headerimage {
  /* for formatting header image */
}

.separator{
  /* for formatting separators between entries */
  height: 35px;
}

* html .subcontent {
  /* fixes an IE reply page bug */
  height: 1%;
  clear: none;
}

* html .box#commentform {
  /* fixes an IE reply page bug */
  position: absolute;
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff;
  background-color: #000000;
}

/************************************* contextual popup *************************************/

div.ContextualPopup {
	text-shadow: none;
}

/************************************* mini icons *************************************/

.ljuser img {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites.png) 0 -176px no-repeat;
	padding: 16px 16px 0 0!important;
	}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites.png) 0 -173px no-repeat;
	padding: 16px 16px 0 0!important;
	}
	
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites.png) 0 -211px no-repeat;
	padding: 7px 2px 10px 16px!important;
	}
	
.sbaritem img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites.png) 3px -20px no-repeat;
	padding: 14px 16px 0 5px!important;
	}

.entry-title img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites.png) 3px -20px no-repeat;
	padding: 16px 16px 0 5px!important;
	}
	
.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
  width: 0;
  height: 0;
  padding: 16px 5px 0 16px!important;
  background: transparent url(http://hodo7.com/web/freebies/intention/sprites.png) 3px -20px no-repeat; 
  }

.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
  width: 0;
  height: 0;
  padding: 16px 5px 0 16px!important;
  background: transparent url(http://hodo7.com/web/freebies/intention/sprites.png) 0 4px no-repeat; 
  }

.sbaritem img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
  width: 0;
  height: 0;
  padding: 11px 5px 0 16px!important;
  background: transparent url(http://hodo7.com/web/freebies/intention/sprites.png) 0 1px no-repeat; 
  }

.entry-text dl dd img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites.png) 3px -20px no-repeat;
	padding: 16px 16px 0 0!important;
	}

.sidebar-summary img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites.png) 3px -20px no-repeat;
	padding: 16px 16px 0 0!important;
	}

#lj_controlstrip .ljuser img {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites.png) 0 -193px no-repeat;
	padding: 16px 10px 0 2px !important;
	}

#lj_controlstrip .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites.png) 0 -193px no-repeat;
	padding: 16px 10px 0 4px !important;
	}

#lj_controlstrip .ljuser img[src="http://l-stat.livejournal.com/img/community.gif?v=1"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites.png) 0 -260px no-repeat;
	padding: 16px 17px 0 5px!important;
	}

body.lj-view-archive #maincontent{
  background: #fff url(http://hodo7.com/web/freebies/intention/entry-bg.gif) repeat-y;
	border-radius: 10px 0 10px 0;
	box-shadow: 0 0 7px #c6c6c6;
	position: relative;
	width: 765px;
}

/* DIRECTIONS:  To install, go to your Home section in LJ.  Scroll over Journal in the menu, click Journal Style.  Below you'll find a section of themes to select and a search field.  In the search box put in "Flexible Squares" and choose the template called "Black and White and Red All Over".  In the top right you'll see a box called Current Theme, click "Change page setup" and there choose "2 column (sidebar on the right)".  Then click the "Customize selected theme" button next to that.  On your left you'll see a blue sidebar, and click on the Text link.  In there there's a Comments sectin.  Change the options so there's only numbers or a # sound, the mini icon with the word bubbles are supposed to take the place of the words "comments".  Then, back to the sidebar, click on "Custom CSS."  You'll see a drop down options, make sure they're all marked "No".  Leave "Custom external stylesheet URL" entry blank.

Click "Save Changes" and it should be ready to go! */

Template: dark intention

For: Flexible Squares

Images: These are hosted on my own domain, PLEASE save and upload to your own server/account. Just be sure to change the URLs in the style sheet when you do!

Here's a zip of the images.

Code:

/*
  Intention
  For: Flexible Squares
  Available:  http://community.livejournal.com/betterdolphin/
  By:  Toby
*/

/* DIRECTIONS:  Full directions on how to install are on the bottom of this document! */

/* !PLEASE! remember to upload the images to YOUR own domain or some free image service and replace the links in this stylesheet! */

body {
  background: #000 url(http://hodo7.com/web/freebies/intention/black-bg.jpg);
  text-align: center;
  color: #282623;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  margin: 0 auto;
}

a, a:link, a:visited {
  color: #7f1e47;
  text-decoration: underline;
}

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

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

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

#content {
  width: 960px;
  margin: 0 auto;
  padding: 0;
}

#content-outer{
	padding-bottom: 40px !important;
}

#maincontent {
  float: left;
  text-align: left;
	width:765px;
}

#sidebar {
	background: #fff url(http://hodo7.com/web/freebies/intention/sidebar-bg2.gif) repeat-x;
  float: right;
	border-radius: 10px;
	box-shadow: 0 0 7px #000;
  text-align: left;
	width: 160px;
}

#header {
  padding: 0;
  margin: 20px 0 0 0;
  text-align: left;
}

#footer {
  padding: 10px 0;
  margin: 0;
  text-align: center;
  color: #9b9b9b;
  z-index: 100;
  clear: both;
}

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

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

ul.navheader li {
	float: left;
  list-style-type: none;
	margin: 0 10px 0 0;
	position: relative;
	text-align: center;
	width: 100px;
}

ul.navheader li a {
	background: #7f1e47;
	border-radius: 10px 0 10px 0;
  color: #fff;
	display: block;
	padding: 3px 5px;
	text-decoration: none;
}

ul.navheader li + li a {
	background: #ea284b;
}

ul.navheader li + li + li  a {
	background: #7f1e47;
}

ul.navheader li + li + li + li a {
	background: #ea284b;
}

ul.navheader li:hover a {
  background: #F2E09D;
  color: #282623;
}

ul.navheader li.view {
  background: #F2E09D;
	border-radius: 10px 0 10px 0;
  color: #282623;
	padding: 3px 5px;
}

.title{
	clear: both;
	color: #f2e09d;
  font: 40px "Arial Black", arial, sans-seris;
  font-weight: bold;
  margin: 10px 0 0 0;
}

.subtitle{
  color: #ea284b;
  margin: -10px 0 20px 0;
}

/************************************* sidebar *************************************/

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

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

.defaultuserpic {
  background: #fff;
	border-radius: 10px;
  margin: 10px auto 0;
  padding: 10px 0 0 0;
  text-align: center;
  width: 125px;
}

.defaultuserpic img {
}

.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 dotted #D7D7D7;
}

.sbarlist li.sbaritem {
  margin: 0 10px;
  padding: 3px 0;
  border-bottom: 1px dotted #D7D7D7;
}

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

.sbarcalendar {
  border: 1px solid #464646;
  text-align: center;
}

.sbarcalendarposts {
	background: #7f1e47;
  border: 1px solid #464646;
}

.sbarcalendarposts a{
	color: #F2E09D !important;
}

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

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

li.sbartitle {
	color: #ea284b;
	font: bold 13px "Arial Black", arial, sans-serif; 
  list-style: none;
	padding: 2px;
}

/************************************* maincontent *************************************/

.subcontent {
  background: #fff url(http://hodo7.com/web/freebies/intention/entry-bg2.gif) repeat-y;
	border-radius: 10px 0 10px 0;
	box-shadow: 0 0 7px #000;
	min-height: 230px;
	position: relative;
	width: 765px;
}

.entry {
  margin: 0px 10px 10px 125px;
  padding: 10px;
  text-align: left;
	width:600px;
}

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

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

.userpic {
  background: #fff;
	border-radius: 10px;
  float: left;
  margin: 11px 0 0 13px;
  padding: 10px;
  position: relative;
  z-index: 15;
}

.userpicfriends a{
  color: #7f1e47;
	text-decoration: none;
}

.date {
  color: #f2e09d;
	float: left;
  font: 20px "Arial Black", arial, sans-serif;
	font-weight: bold;
	line-height: 16px;
  margin: 133px 0 0 -110px;
  padding: 0;
  position: absolute;
  width: 100px;
	word-wrap: break-word;
}

.lj-view-friends .date{
  margin: 135px 0 0 -120px !important;
}

.subject {
	color: #ea284b;
	font: 24px "Arial Black", arial, sans-serif;
  font-weight: bold;
  padding-bottom: 5px;
}

.subject a, .subject a:link, .subject a:visited, .subject a:hover  {
	color: #ea284b;
  text-decoration: none;
}

.datesubject {
  border-bottom: 1px dotted #d7d7d7;
	float: left;
  margin: 0 auto;
  text-align: right;
	width: 80%;
}

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

.currentlocation {
  background:url(http://hodo7.com/web/freebies/intention/sprites2.png) 0 -151px no-repeat;
  font-size:11px;
  margin:0;
  padding:5px 0 0 20px;
  text-align:left;
  }
	
.currentmusic {
  background:url(http://hodo7.com/web/freebies/intention/sprites2.png) 2px -91px no-repeat;
  font-size:11px;
  margin:0;
  padding:5px 0 0 20px;
  text-align:left;
  }
	
.currentmood {
  background:url(http://hodo7.com/web/freebies/intention/sprites2.png) 0 -68px no-repeat;
  font-size:11px;
  margin:0;
  padding:5px 0 0 20px;
  text-align:left;
  }

.ljtags {
  background:url(http://hodo7.com/web/freebies/intention/sprites2.png) 0 -40px no-repeat;
  font-size:11px;
  margin:10px 0 0 0;
  padding:7px 0 7px 20px;
  text-align:left;
	clear: both;
  }

.comments a, .comments a:link, .comments a:visited{
  background:url(http://hodo7.com/web/freebies/intention/sprites2.png) right -120px no-repeat;
  color: #95918f;
	padding: 0 20px 0 0;
	text-decoration: none;
}

.comments a:hover {
  color: #74cccb;
  text-decoration: none;
}

/************************************* maincontent --  entry, reply pages *************************************/

.datesubjectcomment {
  padding: 5px;
  margin-top: 20px;
	position: relative;
  text-align: right;
	color: #9b9b9b;
}

.userpiccomment {
  background: #fff !important;
	border-radius: 10px;
  float: left;
  margin: 10px;
  padding: 10px;
  position: relative;
  text-align: center;
  z-index: 15;
}

.box {
  background: #fff;
	border-radius: 10px 0 10px 0;
	box-shadow: 0 0 7px #000;
	margin-bottom: 20px;
	padding: 20px;
	position: relative;
	width: 725px;
  clear: left;
}

input, textarea {
  background-color: #ffffff;
  color: #000000;
}

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

.replytosubject {
  font-weight: bold;
}

.commentreply {
  position: relative;
  margin: 10px;
}

.commentbox {
	background: #e9e9e9;
  padding: 10px;
  margin: 10px;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {

}

.datesubjectcomment a:hover {
}

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

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

/************************************* maincontent -- year/achive pages *************************************/

ul.year {
  text-align: center;
  padding-bottom: 40px;
	color: #ea284b;
	font: bold 15px "Arial Black", arial, sans-serif;
}

ul.year li {
  display: inline;
}

table.yeartable {
  border-collapse: collapse;
  margin: 0 auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
  border: 1px solid #464646;
	padding: 2px 2px 10px 0;
}

table.yeartable td.yearday {
  text-align: center;
	background: #7f1e47;
	color: #F2E09D;
	font-weight: bold;
}

td.yearmonth {
  border-style: none;
	color: #ea284b;
	font: bold 15px "Arial Black", arial, sans-serif;
	padding: 0 0 10px 0;
}

/************************************* footer *************************************/

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

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

ul.navfooter li a{
  text-decoration: none;
}

.clearfoot {
  clear: both;
	height: 0;
}

/************************************* misc  *************************************/

.clear {
  height: 0;
}

.skiplinks {
  margin: 10px 0;
  text-align: center;
}

.skiplinks a{
	color: #ea284b;
}

.headerimage {
  /* for formatting header image */
}

.separator{
  /* for formatting separators between entries */
  height: 35px;
}

* html .subcontent {
  /* fixes an IE reply page bug */
  height: 1%;
  clear: none;
}

* html .box#commentform {
  /* fixes an IE reply page bug */
  position: absolute;
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff;
  background-color: #000000;
}

/************************************* contextual popup *************************************/

div.ContextualPopup {
	text-shadow: none;
}

/************************************* mini icons *************************************/

.ljuser img {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites2.png) 0 -176px no-repeat;
	padding: 16px 16px 0 0!important;
	}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites2.png) 0 -173px no-repeat;
	padding: 16px 16px 0 0!important;
	}
	
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites2.png) 0 -211px no-repeat;
	padding: 7px 2px 10px 16px!important;
	}
	
.sbaritem img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites2.png) 3px -20px no-repeat;
	padding: 14px 16px 0 5px!important;
	}

.entry-title img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites2.png) 3px -20px no-repeat;
	padding: 16px 16px 0 5px!important;
	}
	
.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
  width: 0;
  height: 0;
  padding: 16px 5px 0 16px!important;
  background: transparent url(http://hodo7.com/web/freebies/intention/sprites2.png) 3px -20px no-repeat; 
  }

.entry-text dl dd img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites2.png) 3px -20px no-repeat;
	padding: 16px 16px 0 0!important;
	}

.sidebar-summary img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites2.png) 3px -20px no-repeat;
	padding: 16px 16px 0 0!important;
	}

#lj_controlstrip .ljuser img {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites2.png) 0 -193px no-repeat;
	padding: 16px 10px 0 2px !important;
	}

#lj_controlstrip .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites2.png) 0 -193px no-repeat;
	padding: 16px 10px 0 4px !important;
	}

#lj_controlstrip .ljuser img[src="http://l-stat.livejournal.com/img/community.gif?v=1"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/intention/sprites2.png) 0 -260px no-repeat;
	padding: 16px 17px 0 5px!important;
	}

body.lj-view-archive #maincontent{
  background: #fff url(http://hodo7.com/web/freebies/intention/entry-bg2.gif) repeat-y;
	border-radius: 10px 0 10px 0;
	box-shadow: 0 0 7px #000;
	position: relative;
	width: 765px;
}

/* DIRECTIONS:  To install, go to your Home section in LJ.  Scroll over Journal in the menu, click Journal Style.  Below you'll find a section of themes to select and a search field.  In the search box put in "Flexible Squares" and choose the template called "Black and White and Red All Over".  In the top right you'll see a box called Current Theme, click "Change page setup" and there choose "2 column (sidebar on the right)".  Then click the "Customize selected theme" button next to that.  On your left you'll see a blue sidebar, and click on the Text link.  In there there's a Comments sectin.  Change the options so there's only numbers or a # sound, the mini icon with the word bubbles are supposed to take the place of the words "comments".  Then, back to the sidebar, click on "Custom CSS."  You'll see a drop down options, make sure they're all marked "No".  Leave "Custom external stylesheet URL" entry blank.

Click "Save Changes" and it should be ready to go! */

Flexible Squares: mesdemoiselles

2011-02-06T20:16:10Z

Image Preview - Live Preview

"mesdemoiselles"

Has two variations, and also features mini-icons.

Template: bright mesdemoiselles

For: Flexible Squares

Notes: Tested in IE7-8, FF, Opera, Safari and Chrome.
Rounded corners, drop shadows and text shadows will not work under IE9.

Images: These are hosted on my own domain, PLEASE save and upload to your own server/account. Just be sure to change the URLs in the style sheet when you do!

To make things easy, here's a zip of the images.

Code:

/*
  mesdemoiselles
  For: Flexible Squares
  Available:  http://community.livejournal.com/betterdolphin/
  By:  Toby
*/

/* DIRECTIONS:  Full directions on how to install are on the bottom of this document! */

/* !PLEASE! remember to upload the images to YOUR own domain or some free image service and replace the links in this stylesheet! */

body {
  background: #252525 url(http://hodo7.com/web/freebies/mesdemoiselles/bg.jpg);
  text-align: center;
  color: #e0e0e0;
  font-family: "Arial", sans-serif;
  font-size: 11px;
  margin: 0 auto;
	text-shadow: 1px 1px 1px #1c1c1c;
}

a, a:link, a:visited {
  color: #04a0b5;
  text-decoration: underline;
}

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

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

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

#content {
  width: 960px;
  margin: 0 auto;
  background: #353535;
  border-left: 1px solid #464646;
  border-right: 1px solid #464646;
  border-bottom: 1px solid #464646;
	-moz-box-shadow: 0 0 8px #000;
  -webkit-box-shadow: 0 0 8px #000;
  box-shadow: 0 0 8px #000;
  padding: 0 1px;
}

#content-outer{
	padding-bottom: 40px !important;
}

#maincontent {
  border-right: 1px solid #2a2a2a;
  float: left;
  font-family: "Verdana", sans-serif;
  font-size: 11px;
  background: #3a3a3a;
  text-align: left;
	width: 797px;
}

#sidebar {
  float: right;
  width: 160px;
  text-align: left;
}

#header {
  height: 181px;
  padding: 10px 0px 20px 10px;
  margin: 0;
  text-align: left;
  border-bottom: 1px solid #2a2a2a;
}

#footer {
  padding: 10px 0;
  margin: 0;
  border-top: 1px solid #2a2a2a;
  text-align: center;
  color: #9b9b9b;
  z-index: 100;
  clear: both;
}

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

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

ul.navheader li {
  color: #fff;
  width: 130px;
  list-style-type: none;
	margin: 0;
  padding: 3px 25px 5px 10px;
	position: relative;
	z-index: 1000;
}

/*  If you want more menu items you will have to move the menu out of the blue box to have more vertical room for them.  Copy the two classes below and paste over the two classes above.

ul.navheader {
    float: right;
    margin: 0 162px 0 0;
    padding: 0;
    position: relative;
    z-index: 0;
}

ul.navheader li {
    color: #FFFFFF;
    list-style-type: none;
    margin: 0;
    padding: 3px 10px 5px;
    position: relative;
    text-align: right;
    width: 100px;
    z-index: 1000;
}

ul.navheader li a {
  color: #e0e0e0;
	text-decoration: none;
}

ul.navheader li:hover {
  -moz-border-radius: 10px 0 0 10px;
  border-radius: 10px 0 0 10px;
  -moz-box-shadow: 2px 0 6px #144c54;
  -webkit-box-shadow: 2px 0 6px #144c54;
  box-shadow: 2px 0 6px #144c54;
  background: #F97C7C;
  color: #262626;
  text-shadow: 1px 1px 1px #E35656;
}

ul.navheader li:hover a {
  color: #fff;
	text-decoration: none;
}

ul.navheader li:hover a, ul.navheader li:hover a:hover {
  color: #262626;
	text-decoration: none;
}

ul.navheader li.view {
  -moz-border-radius: 10px 0 0 10px;
  border-radius: 10px 0 0 10px;
  -moz-box-shadow: 2px 0 6px #1D1D1D;
  -webkit-box-shadow: 2px 0 6px #1d1d1d;
  box-shadow: 2px 0 6px #1d1d1d;
  background: #F97C7C;
  color: #262626;
  text-shadow: 1px 1px 1px #E35656;
}

.title{
  font-variant: small-caps;
  font-size: 50px;
  font-weight: bold;
	line-height: 45px;
  margin: 10px 0 -10px 10px;
}

.subtitle{
  color: #04a0b5;
  margin: 10px 0 0 20px;
}

/************************************* sidebar *************************************/

#sidebar a, #sidebar a:link, #sidebar a:visited{
  color: #04a0b5;
  text-decoration: none;
}

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

.defaultuserpic {
  background: #04A0B5;
	border: 1px solid #0e3c42;
  margin: -214px 0 0 -2px;
  padding: 100px 0 20px;
  position: absolute;
  text-align: center;
  width: 161px;
	-moz-box-shadow: 0 0 6px #1d1d1d;
  -webkit-box-shadow: 0 0 6px #1d1d1d;
  box-shadow: 0 0 6px #1d1d1d;
}

.defaultuserpic img {
	border: 1px solid #1d707b;
}

.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 #2a2a2a solid;
}

.sbarlist li.sbaritem {
  margin: 0 10px;
  padding: 3px 0;
  border-bottom: 1px #2a2a2a solid;
}

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

.sbarcalendar {
  border: 1px solid #464646;
  text-align: center;
}

.sbarcalendarposts {
  border: 1px solid #464646;
}

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

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

li.sbartitle {
  background: #3a3a3a;
  padding-left: 15px;
  list-style: none;
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: 10px;
  margin-top: 10px;
	padding: 2px;
}

/************************************* maincontent *************************************/

.subcontent {
}

.entry {
  margin: 0px 10px 10px 30px;
  padding: 10px;
  text-align: left;
}

.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: #292929;
  padding: 5px;
  margin: 16px 10px 10px 30px;
  z-index: 15;
  border: 1px solid #252525;
}

.userpicfriends {
  position: relative;
  float: left;
  background-color: #292929 !important;
  padding: 5px;
  margin: 16px 10px 10px 30px;
  z-index: 15;
  border: 1px solid #252525;
}

.userpicfriends a{
  color: #04a0b5;
	text-decoration: none;
}

.date {
  color: #6e6e6e;
  font-size: 11px;
	padding: 10px 0 0 0;
}

.subject {
  font-weight: bold;
  padding-bottom: 5px;
  color: #04a0b5;
  font-size: 18px;
}

.subject a, .subject a:link, .subject a:visited, .subject a:hover  {
  color: #04a0b5;
  text-decoration: none;
}

.subject a:hover {
  color: #04a0b5;
}

.datesubject {
  border-bottom: 1px solid #2a2a2a;
  margin: 0 auto;
  text-align: right;
  width: 96%;
	.width: 500px;
}

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

.currentlocation {
  background:url(http://hodo7.com/web/freebies/mesdemoiselles/blue-icons/location.png) no-repeat left center;
  font-size:11px;
  margin:0;
  padding:5px 0 0 20px;
  text-align:left;
  }
	
.currentmusic {
  background:url(http://hodo7.com/web/freebies/mesdemoiselles/blue-icons/music.png) no-repeat left center;
  font-size:11px;
  margin:0;
  padding:5px 0 0 20px;
  text-align:left;
  }
	
.currentmood {
  background:url(http://hodo7.com/web/freebies/mesdemoiselles/blue-icons/mood.png) no-repeat left center;
  font-size:11px;
  margin:0;
  padding:5px 0 0 20px;
  text-align:left;
  }

.ljtags {
  background:url(http://hodo7.com/web/freebies/mesdemoiselles/blue-icons/tag.png) no-repeat left center;
  font-size:11px;
  margin:10px 0 0 0;
  padding:7px 0 7px 20px;
  text-align:left;
	clear: both;
  }

.comments {
  color: #9b9b9b;
  font-size: 11px;
  text-align: right;
  padding: 0 5px 0 5px;
  position: relative;
  border-top: 1px solid #2a2a2a;
  margin: 20px auto;
  text-align: right;
  width: 96%;
}

.comments a, .comments a:link, .comments a:visited{
  color: #1d707b;
}

.comments a:hover {
  color: #9b4b4b;
  text-decoration: none;
}

/************************************* maincontent --  entry, reply pages *************************************/

.datesubjectcomment {
  padding: 5px;
  margin-top: 20px;
	position: relative;
  text-align: right;
	color: #9b9b9b;
}

.userpiccomment {
  position: relative;
  float: left;
  background-color: #292929 !important;
  padding: 5px;
  z-index: 15;
  border: 1px solid #252525;
}

.box {
  border-top: 1px solid #2a2a2a;
  padding: 10px;
  clear: left;
}

input, textarea {
  background-color: #ffffff;
  color: #000000;
}

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

.replytosubject {
  font-weight: bold;
}

.commentreply {
  position: relative;
  margin: 10px;
}

.commentbox {
  border: 1px solid #2a2a2a;
  padding: 10px;
  margin: 10px;
  background-color: #353535;
}

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

.datesubjectcomment a:hover {
  color: #9b4b4b;
}

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

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

/************************************* maincontent -- year/achive pages *************************************/

ul.year {
  text-align: center;
  padding-bottom: 40px;
}

ul.year li {
  display: inline;
}

table.yeartable {
  border-collapse: collapse;
  margin: 0 auto;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
  border: 1px solid #464646;
	padding: 2px 2px 10px 0;
}

table.yeartable td.yearday {
  text-align: center;
	background: #04a0b5;
	color: #fff;
	font-weight: bold;
}

td.yearmonth {
  border-style: none;
	padding: 0 0 10px 0;
}

/************************************* footer *************************************/

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

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

.clearfoot {
  clear: both;
	height: 0;
}

/************************************* misc  *************************************/

.clear {
  height: 0;
}

.skiplinks {
  margin: 10px 0 0 0;
  text-align: center;
}

.headerimage {
  /* for formatting header image */
}

.separator{
  /* for formatting separators between entries */
  height: 35px;
}

* html .subcontent {
  /* fixes an IE reply page bug */
  height: 1%;
  clear: none;
}

* html .box#commentform {
  /* fixes an IE reply page bug */
  position: absolute;
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff;
  background-color: #000000;
}

/************************************* contextual popup *************************************/

div.ContextualPopup {
	text-shadow: none;
}

/************************************* mini icons *************************************/

.ljuser img {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/mesdemoiselles/blue-icons/journal.png) no-repeat;
	padding: 16px 16px 0 0!important;
	}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/mesdemoiselles/blue-icons/journal.png) no-repeat;
	padding: 16px 16px 0 0!important;
	}
	
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/mesdemoiselles/blue-icons/community.png) no-repeat;
	padding: 7px 5px 10px 16px!important;
	}
	
.sbaritem img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/mesdemoiselles/blue-icons/friendslock.png) no-repeat;
	padding: 14px 16px 0 5px!important;
	}

.entry-title img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/mesdemoiselles/blue-icons/friendslock.png) no-repeat;
	padding: 16px 16px 0 5px!important;
	}
	
.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
  width: 0;
  height: 0;
  padding: 16px 5px 0 16px!important;
  background: transparent url(http://hodo7.com/web/freebies/mesdemoiselles/blue-icons/friendslock.png) no-repeat; 
  }

.entry-text dl dd img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/mesdemoiselles/blue-icons/friendslock.png) no-repeat;
	padding: 16px 16px 0 0!important;
	}

.sidebar-summary img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/mesdemoiselles/blue-icons/friendslock.png) no-repeat;
	padding: 16px 16px 0 0!important;
	}

#lj_controlstrip .ljuser img {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/mesdemoiselles/blue-icons/journal.png) no-repeat;
	padding: 16px 10px 0 4px !important;
	}

#lj_controlstrip .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/mesdemoiselles/blue-icons/journal.png) no-repeat;
	padding: 16px 10px 0 4px !important;
	}

#lj_controlstrip .ljuser img[src="http://l-stat.livejournal.com/img/community.gif?v=1"] {
	width: 0;
	height: 0; 
	background: transparent url(http://hodo7.com/web/freebies/mesdemoiselles/blue-icons/community.png) no-repeat;
	padding: 16px 17px 0 5px!important;
	}

/* DIRECTIONS:  To install, go to your Home section in LJ.  Scroll over Journal in the menu, click Journal Style.  Below you'll find a section of themes to select and a search field.  In the search box put in "Flexible Squares" and choose the template called "Black and White and Red All Over".  In the top right you'll see a box called Current Theme, click "Change page setup" and there choose "2 column (sidebar on the right)".  Then click the "Customize selected theme" button next to that.  On your left you'll see a sidebar, you should be on Display.  Scroll down till you reach the "Additional Options" area and for the option "Use friends colors when viewing Friends page" select "No."  Then, back to the sidebar, click on "Custom CSS."  You'll see a drop down options, make sure they're all marked "No".  Leave "Custom external stylesheet URL" entry blank.

Click "Save Changes" and it should be ready to go! */

Template: dark mesdemoiselles

For: Flexible Squares

Code:

/*
  mesdemoiselles
  For: Flexible Squares
  Available:  http://community.livejournal.com/betterdolphin/
  By:  Toby
*/

/* DIRECTIONS:  Full directions on how to install are on the bottom of this document! */

/* !PLEASE! remember to upload the images to YOUR own domain or some free image service and replace the links in this stylesheet! */

a, a:link, a:visited {
  color: #95ab93;
  text-decoration: underline;
}

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