Play PackRat on Facebook: our feverishly addictive new game

Feeling cramped? Need more headroom?

I've seen several people here grumble about those tiny textarea boxes we get on The Box and for Blog Forum comments - cramped space cramps your style, doesn't it? It is tiny.

Apparently the chefs want to cramp our style, but if you use Firefox (or similar gecko-based browser) you don't need to accept that! So I worked out how to make those boxes a bit roomier, and it works just fine for me.

Alas, we don't get any proper "code" tags here, but I'll do my best... copy the following code and paste it into your userContent.css (and restart the browser to force it to read the new stylesheet):

/*
* A little more headroom for Box and Blog forum comments
* (avoids influencing the Blog post textarea: that one's OK)
*/
#the-wall textarea#comments_body,
#col1 textarea#comments_body {
width: 438px !important;
height: 40ex !important;
}

The width setting makes it a little wider than it is "officially" - and makes it line up better, too (I like it when things line up neatly on a (web) page). The height setting does most of the work - adapt to your needs by increasing or decreasing the value. Here's a screenshot.

If you need help with finding (or making) your userContent.css let me know. And if it messes up a page on another site, let me know, too and I can try to make it more specific.

codesque #2
__________
Hint for the chefs: add an id with the domain name (edited to make a valid id, of course) to all your body tags: that way we can tweak specifically for this site. Thanks!

Posted by iamback on Feb 02, 2008 in Blab | 13 comments

louiemctool on Feb 02, 2008

hmmm...

:|

anti on Feb 02, 2008

If you want even more room to work while enjoying the features of your favorite text editor, you might try It's All Text. It is a Firefox plugin that adds a small edit button to the textarea. Best of all, it works for every site you come upon, so you can work the way you like regardless of the designer's preference. :)

louiemctool on Feb 02, 2008

hmmm...

:|

iamback on Feb 02, 2008

@anti: that's interesting! Obviously fulfills a need - thanks for pointing that out.

Me, I like to limit plugins to those I absolutely can't do without - somehow a user stylesheet is way more efficient if it can do the job (that's also why I use a user stylesheet to hide ads, not an ad blocker plugin). But it's good to know there's a choice.

iamback on Feb 02, 2008

@louiemctool: what are you hmmmming about?

louiemctool on Feb 02, 2008

well...

how to put this?

do you make it a habit to visit someone's house, and from the moment you step in the door, you're telling them how their furniture should be arranged ('cause its better feng shui or something)?

'cause that's kinda what you're doing here. i am pretty sure josh and john and brian and keegan and scott put a heck of a lot of thought and (dare i say it?) love into developing this version of IconBuffet.

i'm sure the small textarea was to encourage people to keep their posts somewhat short. plus, i personally think it looks better that way, especially when i'm posting a reply on a thread (like now).

but, to each his (and her) own. have fun!

:p

iamback on Feb 02, 2008

Well, for one thing, that tiny little box makes it hard to review what you typed, and there's no preview either. And you can't edit your own comments.

For bad yptists like me it certainly helps to have a better overview of what you're typing, and being able to see several paragraphs at once makes it easier to formulate your thoughts.

Anyway, user stylesheets exist for a reason, and one of those is to make websites more accessible or usable to you. That's the way of the web: once a page has landed in your browser, you can shape it any way you like, or any way that helps you. That's good.

I'm not asking the chefs here to change it - if they want to keep it like it is, that's up to them, and that's fine with me. I'm just giving a helping hand to those of us who like to have more space to formulate their thoughts in. It's not as though a user stylesheet is changing the actual content of a site! But good code structure can help people making tweaks for their own usability, without rearranging the furniture.

A unique id on the body tag to enable that is not my idea (I think it was Eric Meyer who came up with it first, but at least he's one of those who came up with it), nor is it new, but it's a good one. Another reference is Mark L. Irons's article Making Your Site Modifiable. It "broadcasts" that people can change things for that site in their own browser if they like, or need to, without affecting the layout of other sites; and that's especially useful for community sites where people need to actually interact with a site.

For sites that don't have a "CSS signature", you can also use GreaseMonkey to add one, but that's one step more complicated.

So, none of this is new, and none of it is criticim. And as Mark L. Irons points out: "Only those who are really interested in your site will use this technique." So think of it as a compliment!

iqon on Feb 02, 2008

ARRRRR, me be agreein' with the flat footed penguin on this one. This website proves the chefs' are design geniuses, far be it from me to offer them advice. When me needs more space me uses Notepad and the clipboard.

Me likens changin' the chefs' layout to ownin' an uber sleek two-seater car and modifin' it to be a pick'em-up truck to haul manure on the weekend. Me prefers to install a hitch and attach a trailer as needed.

anti on Feb 02, 2008

The Web Developer Toolbar, which I know everyone has as it is is the thing on which all metric whacks is built, has a button which allows you to disable all styles. You are left with just the facts ma'am and a big ol' typing box.

iamback on Feb 03, 2008

@iqon: the point is that you have options. Sure, if you don't like to change the layout, that's fine and you can use an external program (preferably something better than Notepad ;)). But I consider my browser a tool as well - and that tool has options built-in, one of which is a user stylesheet (something the W3C actually recommends), so that is my choice in this case, and I'm just sharing my code for others who like that option, too.

@anti: true, but without any stylesheet at all, you don't get any choice as to size either. ;) But you're right, it is yet another option.

Me, I'm going to investigate if I can use GreaseMonkey to make textarea boxes dynamically resizable. If/when I find a way to do that, I'll share it as well, of course.

Vernominon on Feb 03, 2008

Well i use netscape and you can just drag textarea's bigger by just hovering the borders of the box to get the resize arrows (the browser is essentially the same as firefox... so could possibly be a feature in that too). Bit easier than changing the css ;).

iamback on Feb 03, 2008

@Vernominon: That's very interesting! Of course the rendering engine in Netscape is the same as in Firefox (Gecko), but it has a different "shell" - it must be in this shell that the resizing option is implemented since there's no such thing in Firefox. Nice touch. (And on that demonstrates resizing textboxes is a common need.) Thanks for letting us know.

(Now I have to grab the latest Netscape to add to my battery of testing browsers!)

I also found a reference to using a user stylesheet in Opera - I'll have to test that out as well. Will report.

anti on Feb 03, 2008

Opera rocks. You can set one rule and render every site on the web unusable. Boy I miss those days...