Flexible Squares

Hide the sticky posts

Welcome to the Flexible Squares community

This community is for tips, tricks and help for the S2 style, Flexible Squares.

Before posting please read the community userinfo, where you'll find our rules and guidelines. Membership to the community is open and all members have unmoderated posting access; however, all off-topic posts will be deleted.

You may also be interested in reading the list of known issues in Flexible Squares and the list of changes and bug fixes already made to Flexible Squares that have not yet been made public.

Any bug reports or suggestions on how to improve the style can be made to this post. If you have ideas about how the community itself can be improved please leave a comment on the Community Suggestions post. For community issues that need the moderators' immediate attention, you can send an email to this address.

Thank you.

Last updated: April 7, 2006

What's New

Master the Flexible Squares stylesheet with irinafan's comprehensive CSS Guide

Read afuna's roundup of Layout and Community Updates

Take control of your metadata with kentucka's Metadata tutorial for paid accounts

Getting compilation errors around your font size properties? Font sizes have changed type

Layout getting screwed up by Voice Posts? Fix it here:
Sudden layout problems caused by Voice Post changes

Last updated: July 12, 2006

11 October 2008 @ 11:22 pm

Unknown blank gap

I hope it's okay to ask this here..

Just posted a line and a picture, and somehow there's a huge blank gap between them but I just can't find out why because I've posted similar entries before and this never happened. And this also happens to my userinfo page.

Take a look here.

Thanks! =) I'm still very confused about LJ.

Tags: entries

Mem + · 2 comments · Leave a comment

09 October 2008 @ 11:26 pm

page width keeps scrunching.

I have a free account & use firefox. my journal width is set @ 65% but it keeps changing on its own to about 25%. I keep changing it back, but it won't stick. I'm hitting the "save" button & it'll stay for a few minutes, then automatically shrink down. someone please tell me what to do :(

Current Mood:

aggravated

Tags: free accounts

Mem + · Leave a comment

09 October 2008 @ 05:30 pm

default userpic, entries

I want to show my default userpic in the sidebar. Now I tried three differnt codes but none worked. The ones I used where:

.defaultuserpic {
padding: 15px 0px 15px 0px;
text-align: center;
}

#sidebar .defaultuserpic {text-align: center;}
#sidebar .defaultuserpic img {border: 1px solid #E1DFDF;}

I hope someone can help me

~~EDIT:~~ SOLVED I also have a problem with my text in my entries. I set my userpic to the right but now some of my text is disappearing behind my userpic.

Live preview @

thrashground

( code )

Current Music: Shiro Sagisu - Scene #81 | Scrobbled by Last.fm

Tags: entries, sidebar, solved

Mem + · 5 comments · Leave a comment

09 October 2008 @ 02:19 pm

Moodtheme text

I would like to remove the text after the mood image. I've tried to set the size to 0px but it doesn't seem to work.

I'd really appreciate if there's anyone who knows how to solve this. :)

( The code for this section: )

Tags: misc

Mem + · 2 comments · Leave a comment

08 October 2008 @ 09:10 pm

Change link color in sidebar calendar

I need to change the color of the links in my calendar, but NOT in the rest of the sidebar. The background color of the days I've posted is the same color as the sidebar links, so I need to change it so it will show up on the background.

I do know how to use CSS but am not familiar with the LJ-specific names and classes. I have worked my way through the default style sheet and figured everything else out to make my custom layout, I love it and it is otherwise finished, just this one little thing holding it back. I have changed the link colors in the footer and every other section, but I've tried everything I could think of for the calendar and it just won't change.

I did find another post with a similar question, but it wasn't resolved in a way that would do what I need. Please help?

Tags: sidebar, stylesheet

Mem + · 9 comments · Leave a comment

08 October 2008 @ 04:51 am

Stretched Out Entry Issue ...

Well, here I am again! :D

I've implemented the layout I'm using over at

obama_2008, and thought that I'd worked all the bugs out, but it seemed I missed something. Apparently, when someone posts an image that is too wide for the layout with the sidebar where it is at the width it is, it pushes the image down until it's under the sidebar, leaving a huge, empty space. You can look at the comm as it is, but just in case, I'm including a screenshot as well as the code as it is.

Please help? ;___;

( Screenshot and code under here! )

Tags: entries

Mem + · 2 comments · Leave a comment

08 October 2008 @ 06:57 pm

Problem with custom polls

When using a poll code I got from this post on

mintyapple, I have a few problems:

1. The left and right images don't show up right (so I actually have them left out of the code so they don't look so odd...)
2. The poll percentages overhang the edge of my layout (what I'm REALLY wanting to fix!!) which you can see here, or on this entry.

I have a paid account (

eirenealetheia), use a theme layer, and my CSS is below:

/* Cleaned CSS: */

body	{
		background-image:  url(http://i9.photobucket.com/albums/a52/eirenealetheia/lovestory_layout/bg-1.gif);
		background-color: #C1DFCC;
		background-repeat: repeat-y;
		background-position: center;		
		text-align: center;
		color: #4B845E;
		font-family: "verdana", sans-serif;
		font-size: 10px;
		margin: 0px 0 0px 0;
		}
		
	blockquote {
		display: block;
		font-size: 10px;
		font-style: italic;
		color: #C1DFCC;
		padding: 8px;
		border: 1px dashed #9ECAAE; 
		background-color: #7FB491;
		}
		
	q {
		display: block;
		font-size: 10px;
		font-style: italic;
		color: #C1DFCC;
		padding: 8px;
		border: 1px dashed #9ECAAE; 
				background-color: #7FB491;
		}
	
	a, a:link, a:visited {
		color: #C1DFCC;
		text-decoration: none;
		}
	
	a:hover {
		color: #4B845E;
		text-decoration: underline;
		}
	
	p, td, blockquote {
	    	font-size: 10px;
		}
		
	code, kbd, pre, tt {
	    	font-family: monospace;
		}
		
	#content
	{  	
		width: 710px;
		margin-left: auto; margin-right: auto;
		margin-top: -25px;				
		padding: 1px;
		position: relative; top: 0px;
		text-align: justify;
	}

#myheader {
margin-left: -21px;
position: relative;
}

#maincontent {	 	
		margin-top: 5px;
		font-family: "Verdana", sans-serif;
		font-size: 10px;
		color: #4B845E;
		margin-left: 180px;
		text-align: center;
		border-left: 1px dashed #9ECAAE;
		}
	
	#sidebar {
		
		padding-top: 10px;
		margin-top: 5px;
	  	font-size: 10px;
		font-family: "Verdana", sans-serif;
	  	color: #4B845E;
		width: 160px;
		float: left;
		text-align: left;
		}

#header { 
display: none;
}

#footer {			
		width: 100%;
		text-align: center;
		font-family: "Verdana", sans-serif;
		font-size: 10px;
		font-weight: bold;
		letter-spacing: 1px;
		color: #4B845E;
		z-index: 100;
		clear: both;
		}
		
	/* header -- links to views; title of journal; subtitle of journal */	
	
	div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
		color: #C1DFCC;
	}
	
	div#header a:hover, div#footer a:hover {
		color: #C1DFCC;
	}	
	
	ul.navheader 
		{	
		padding: 0px;	
		margin-bottom: 0px;
		}
	
	ul.navheader li  {
		display: inline;			
		padding: 0 0px 0 0px;
		border-left: 0px;
		border-right: 0px;
		}

.title	{
display:none;
		}

.subtitle{
display:none;		}

/* sidebar */ 	
			
	div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
		color: #C1DFCC;
	}
	
	div#sidebar a:hover {
		color: #4B845E;
		text-decoration: underline, overline;
	}
	
	.defaultuserpic {
		text-align: center;
		}
	
	.sbarheader {
		padding: 0px 5px 0px 5px;
		}
	
	.sbarbody {
		padding: 0px 5px 0px 5px;		
		}
	
	.sbarbody2 {
		padding: 0 15px 0 15px;
	}
			
	table.calendar {
		margin-right: auto;
		margin-left: auto;
		}
		
	.sbarcalendar {
		text-align: center;
		font-family: "Verdana", sans-serif;
		font-size: 10px;
		}
	
	.sbarcalendarposts {
		background-color: "#3B251D";
		text-align: center;
		font-family: "Verdana", sans-serif;
		font-size: 10px;
		}
		
	ul.sbarlist
	{
		padding-left: 0px;
		margin-left: 0px;
		list-style: none;
	}

li.sbaritem
	{
		padding-left: 5px;
		padding-right: 5px;
		list-style: none;		
	}

li.sbartitle
	{
		list-style: none;
		font-style: italic;
		text-align: center;
		padding: 0px 10px 1px 10px;
		color: #92C3A3;
		font-family: "Times New Roman", sans-serif;
		text-transform: uppercase;
		font-size: 10px;
		font-weight: bold;
		letter-spacing: 5px;
		margin: 2px;
		background-color: #C1DFCC;
	} 
	
div.sbarscroll {
      padding: 0px 5px 0px 5px;	
      height: 200px;
      overflow: auto;
    }

#sidebar_tags .sbarcontent {
	height: 200px;
	overflow: auto;
	}

/* maincontent */	
	
	.subcontent {		
	}
		
	.entry	{
		margin: 0 0 0 1px;
		padding: 10px;
		color: #4B845E;
		font-family: "Verdana", sans-serif;
		font-size: 10px;
		text-align: justify;
		}
		
	.entry ul li
		{
		padding-left: 5px;
		margin-left: 15px;
		}
		
    .entry ol li
		{
		padding-left: 5px;
		margin-left: 15px;
		}

.userpic {
		position: relative;
		float: right;
		background-color:transparent !important;
		padding: 5px;
		margin: 5px;
		z-index: 15;
		}
		
	.userpicfriends {
		background-color:transparent !important;
		position: relative;
		float: right;
		padding: 5px;
		margin: 5px;
		text-align: center;
		font-family: "Verdana", sans-serif;
		font-size: 10px;
		z-index: 15;
		}
		
.userpicfriends a font {
color:#4B845E !important;
}

.date {		
		line-height: 100%;		
		top: 5px;
		color: #4B845E;
		font-family: "Verdana", sans-serif;
		font-size: 8px;
		margin: 2px;
		padding: 0px 20px 1px 20px;
		font-style: italic;
		}
	
	.subject {			
		font-style: italic;
		text-align: center;
		padding: 0px 10px 1px 10px;
		color: #92C3A3;
		font-family: "Times New Roman", sans-serif;
		text-transform: uppercase;
		font-size: 15px;
		font-weight: bold;
		letter-spacing: 5px;
		margin: 2px;
		background-color: #C1DFCC;
		}
		
	.subject a, .subject a:link, .subject a:visited {
		color: #C1DFCC;
		}
	
	.subject a:hover {
		color: #4B845E;
		}

.datesubject {				
		background-color: transparent;
		padding: 5px;
		text-align: left;
		}
		
	.currents, .currentmood, .currentmusic {
		font-family: "Verdana", sans-serif;
		font-size: 10px;	
                text-align: left;
                width: 100%;
		}
.currents table {
  position: relative;
  right: 0px;
  width: 100%;
  }

.comments {
		font-family: "Verdana", sans-serif;
		font-size: 10px;
		text-align: right;
		padding: 0px 5px 10px 5px;
		position: relative;
		top: 15px;
		}
		
	div.comments a, div.comments a:link, div.comments a:visited{
		color: #C1DFCC;
	}
	
	div.comments a:hover {
		color: #4B845E;
		text-decoration: none;
	}

/* maincontent --  entry, reply pages */	
	
	.datesubjectcomment {				
			padding: 5px;
			margin-top: 20px;
			background-color: #A6CEB5;
			}	
		
	.userpiccomment {
		position: relative;
		border-width: 5px;
		border-style: solid;
		border-color: #4B845E;
		background-color: #4B845E;
		top: -30px;
		left: 0px;
		padding: 5px;
		margin: 10px 10px -20px 10px;
		z-index: 15;
		float: left;
		border-width: 1px;
		border-color: #4B845E;
		border-style: solid;
		}
		
	.box {
		border-style: solid;
		border-width: 1px 0px 0px 0px;
		border-color: #4B845E;
		padding: 10px;
		}

input, textarea {
		background-color: #C1DFCC;
		color: #4B845E;
		}
		
	textarea.textbox  {
      	width: 100% !important;
   		}
	
	.reply	{
		position: relative;
		margin: 20px 30px 10px 30px;
		padding: 25px 10px 10px 10px;
		text-align: left;
		font-family: "Verdana", sans-serif;
		font-size: 10px;
		line-height: 125%;
		background-color: #C1DFCC;
		color: #4B845E;
		}
		
	.replytosubject {
		font-weight: bold;
		}
			
		
	.commentreply {
		position: relative;
		margin: 10px;
		font-size: 10px;
		text-align: left;
		font-family: "Verdana", sans-serif;
		color: #4B845E;
		}
		
	.commentbox {
		
		border-color: #4B845E; 
		border-width: 1px; 
		border-style: solid; 
		padding: 10px; 
		margin: 10px; 
		background-color: #92C3A3;
		}
		
	.datesubjectcomment a:link, .datesubjectcomment a:visited {
		color: #C1DFCC;
		}
		
	.datesubjectcomment a:hover {
		color: #4B845E;
		}
	
	.commentboxpartial {
		border-color: #4B845E; 
		border-width: 1px;

border-style: solid; 
		padding: 10px; 
		margin: 10px; 
		background-color: #ABD2B9;
		}

.leftlinks {
  float: left;
  position: relative;
  }

.commentinfo {
		background-color: #ABD2B9; 
		margin-top: 10px; 
		width: 100%;
		}
			
		
	/* maincontent -- year/achive pages */
		
	ul.year {
		text-align: center;
		padding-bottom: 40px;
		}
	
	ul.year li {
		display: inline;		
		}
	
	table.yeartable {
		margin-left: auto;
		margin-right: auto;
		}
	
	table.yeartable td.yeardate, table.yeartable td.yearday {
		border-width: 1px;
		border-style: solid;
		border-color: #4B845E;
		}
	
	table.yeartable td.yearday {
		text-align: center;
		color: #4B845E;
		}
	
	td.yearmonth {
		border-style: none;
		}
	
		
	/* footer */
		
	ul.navfooter{
		padding: 0px;	
		margin: 0px;
		}
	
	ul.navfooter li  {
		display: inline;	
		margin: 0 5px 0 5px;
		}

.clearfoot {		
		clear: both;
		}
		
		
	/* misc  */
				
	.clear {		
		height: 15px;
		}
		
	.skiplinks {
		text-align: center;
		}

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

.ljuser img {
		width: 0px;
		height: 0px;
		background-repeat: no-repeat;
		background-color: transparent;
		/* so that IE users will still see an image */
		background-image: url(http://i9.photobucket.com/albums/a52/eirenealetheia/08.png);
		padding: 10px 0px 0 10px;
		}
		
	.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
		background-image: url(http://i9.photobucket.com/albums/a52/eirenealetheia/08.png);
		padding: 10px 0px 0px 10px;
		}
		
	.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
		background-image: url(http://i9.photobucket.com/albums/a52/eirenealetheia/20.png);
		padding: 10px 0px 0px 10px;
		}
		
		
	.entry img[src="http://p-stat.livejournal.com/img/poll/mainbar.gif"] {
padding: 0px 14px 3px 0px; height:0;
background: url(http://i9.photobucket.com/albums/a52/eirenealetheia/lovestory_layout/pollbar_main.gif);
}

.entry img[src="http://p-stat.livejournal.com/img/poll/leftbar.gif"] {
padding: 0 5px 3px 0; height:0;
background: url();
}

.entry img[src="http://p-stat.livejournal.com/img/poll/rightbar.gif"] {
padding: 0px 5px 3px 0; height:0;
background: url();
}

Current Mood:

confused

Tags: entries, paid accounts, stylesheet

Mem + · 7 comments · Leave a comment

07 October 2008 @ 04:47 pm

Sticky Post on Community

I figured out how to work the Sticky Post but I can't figure out how to put it on my community. It isn't a Paid user community but I noticed this comm uses the sticky post feature as is a basic account (at least that is what the profile says). Is there away to get around this issue?

Tags: header and footer, solved

Mem + · 2 comments · Leave a comment

06 October 2008 @ 04:23 pm

Replacing Buttons/Icons

I recently updated my layout, replacing some of the standard icons and buttons. Now I have some small problems that I hope you'll be able to solve for me. I have no idea what to do.

1) The little icon that shows I'm linking to a livejournal has disappeared from the subject line. ( Screenshot )

2) I want the comment bar (I believe that's what the part that has the link to the comments etc. called) to be slightly higher; 'cause right now, my icons are protruding it. (See screenshot above.)

3) My buttons for deleting a comment, freezing it etc. all have tiny grey dots in the left and right upper corners. Why is that? How can I get rid of those dots? (No, they're not in the images I'm using.) ( Screenshot )

I have a paid account, and my theme layer is here.

Thanks in advance.

Current Mood:

confused

Current Music: Farin Urlaub - Am Strand

Tags: comments, entry comment bar, paid accounts

Mem + · 7 comments · Leave a comment

05 October 2008 @ 08:58 pm

Browser related issues regarding alignments

I'm working on a layout for myself and has run into a couple of browser-related issues I was hoping somebody could help me out with.

The journal I'm working in is

pix_preview (a community with a plus account)
The journal the layout finally will be housed in is my personal journal which is a paid account.

( Firefox 3.0.3 vs. IE7 - the struggle continues... )

Tags: lj and browser issues

Mem + · 2 comments · Leave a comment

complications_g

05 October 2008 @ 03:18 pm

Current view nav images

I used help from here to create image rollovers for my navigation links, and they're great, but I can't work out how to have another image for the current view, when I'm on one of the pages. So if I'm on my friends page, I want it to be a different image to the regular and hover images.

My theme layer | My CSS

Also, even though I've sort of given up, does anyone know a way to get rid of a border-bottom hover on images?

I've tried:

a img:hover, .entry a img:hover, img a:hover with

border: 0px, border: 0px !important, border-width: 0px, border-width: 0px !important

and probably other various combinations with no luck. Help?

Current Mood:

hopeful

Current Music: this city is contagious - the cab

Tags: entries, header and footer, misc, paid accounts

Mem + · 8 comments · Leave a comment

04 October 2008 @ 09:52 pm

Date Format "Date" Change? - SOLVED

Hello, I am trying to change "October 4" to "October 4th". Is this possible? This is what is in my theme layer (Saturday, October 5, 2008):

print $e.time->date_format("%%day%%, %%month%% %%d%%, %%yyyy%%");

I remember with S1 overrides, it would be "dth" instead of "d," but I tried it and the number doesn't show up. Does anyone know what I should change %%d%% to?

solved!: it's %%dayord&&, according to this entry.

Tags: date format, solved

Mem + · 4 comments · Leave a comment

kissingdaylight

04 October 2008 @ 11:45 pm

comments subject and 'back to top' - SOLVED

I have two questions that I just can't find the answer to, even though I've looked all over the community. (Sorry if I missed something though.)

1) I have a paid community {

the_host_novel} and I would like to be able to make just the subject of the comment much larger (much like it is on the default comments page). For example, in this post, I'd like to make the text "Pics for Next Week" 20px or something. I'd also like to remove the IP address if possible. SOLVED

2) I'd like to add a "back to top" link/button at the very bottom of the page. SOLVED

My theme layer is here, but I did most of the editing in CSS which I'll put in a textbox under the cut in case you need it..

( my css )

Thank you in advance!

Current Mood:

confused

Tags: comments, paid accounts, solved

Mem + · 14 comments · Leave a comment

mirkwoodelfchic

04 October 2008 @ 08:24 pm

Forced lj cut - SOLVED

I was just wondering if there's any way to force an lj cut for images posted by people on my flist that are wider than the width of the main content box. Any help would be appreciated.

I have a paid account.
My Layer

Current Mood:

frustrated

Tags: entries, solved

Mem + · 3 comments · Leave a comment

03 October 2008 @ 04:14 pm

Links decoration: underlined

Hi!

I was wondering what do I have to do to make the links on all entries underlined? Is there an easier way other than editing the post and have the links underlined one by one?

Like, it gets underlined when it's hovered over, but that's it.

Tags: entries, free accounts, solved

Mem + · 4 comments · Leave a comment

03 October 2008 @ 01:46 pm

Sidebar Summary and Link Neatness ...

So, I'm having trouble with a layout I'm tweaking for a community,

obama_2008, and I'm testing it on a test comm,

moiratest. My issue is this: The sidebar isn't native to the theme of the design, I had to implement it. But when I got it looking how I really wanted it, I found one problem: The Page Summary and the Links are all mushed together like the Tag cloud instead of being ordered. I would rather have the Links and Page Summary in an ordered list of sorts, even if that means doing so with the Tags, although I wouldn't prefer that for the tags. Can anyone help?? ;__;

( The code and more info follows ... )

Tags: sidebar, solved

Mem + · 4 comments · Leave a comment

02 October 2008 @ 03:53 pm

Tags Page and Border Around Comment Links

Accounts:

moony_blues and

moonyscribbles (both paid)
Layers: moony_blues | moonyscribbles

Alright, first I'd like to show usage counts on my tags pages for both accounts, something like this. I thought I saw something somewhere to do this, but it seems to have disappeared. Is this even possible for Flexible Squares?

Second, I'd also like to get rid of the borders around the link images in the entries. I found something earlier, but promptly lost it again.

Halp, plz? Kthnx!

Current Location: work

Current Mood:

crazy

Current Music: "You'll Think of Me" - Keith Urban

Tags: entries, paid accounts, solved, tags

Mem + · 3 comments · Leave a comment

02 October 2008 @ 04:55 pm

Modification to the Entry page

I would like to incorporate the Unfold Thread function into my Entry pages but I'm not very good at s2 coding and I've also done A LOT of modifications to that page over the years so I'm at a complete loss at where to even start. I would be eternally gratefull if someone could help me with this. And possibly with a complete overhaul and modernization of that part of my code...

My theme layer is here.

Solved. Thanks

Tags: entries, paid accounts, solved

Mem + · 5 comments · Leave a comment

02 October 2008 @ 06:26 pm

userpic background

I need help with a simple problem that I just can't get my head around...

Over at

icon_fall I'd like to get rid of the white background around my userpic in each entry. Have a look and see...

I'm sure there's something I need to add to my css, but I just don't know what it is.
(The current code I'm using came with a layout that I am/have edited, so I'm not too sure what all of it does. This may be the reason I can't get where I want to go...) :P

Help?

Current Mood:

irritated

Tags: entry usericon and username, solved

Mem + · 3 comments · Leave a comment

01 October 2008 @ 03:38 am

Plus Account // Header-scrolling problem

I've been having a problem with the header (or background image?) I've added to my journal. Even though I've set it to 'fixed', in both CSS and the 'Style' section, it still keeps scrolling.

A shot of the CSS code.

At first, I thought it was because of my browser, but I've since switched and along with that I've been to journals where they use FS and their header stays fixed at the top.

I copy-pasted the CSS code from s2howto, so I trusted there's no problem with that. But then what could be wrong? I've tried everything I could think of, and still the image keeps scrolling. If anyone could help me with this, I'd be really grateful.

Current Mood:

tired

Tags: free accounts, header and footer, solved

Mem + · 9 comments · Leave a comment