Post Your Favorite CSS and JS Tweaks

[an3]

Have you customized your FastMail web interface with CSS or JS tweaks? If so, please share your favorites here, and maybe pick up a few new ones as well.

For those who don't know, FM supports customizing your user interface through setting up a "custom-iu" folder in your Files. I'm no programmer--strictly a "copy/paste" user, but I have been able to make some nice changes to my web interface.

For instructions on how to set to set up sweet customizations, check out the FM wiki for CSS at:

http://wiki.fastmail.fm/index.php?title=NewInterfaceCSS

and for JS at:

http://wiki.fastmail.fm/index.php?title=NewInterfaceJS

Please state what kind of tweak it is (CSS or JS), and please limit one tweak per post. Hope to see some cool ideas!

[an3]

Gets rid of the underlines under your folders and messages. Cleans up the appearence quite nicely.

/* No underlines in folder and message listing */
a:link { text-decoration: none; }
a:visited { text-decoration: none; }

[an3]

Adds "boxes" around navigation links. Looks nice, in my opinion.

/* Add faux-button styling to nav links */
.msgPrevious, .msgNext, .msgDeletePrevious, .msgDeleteNext, a.submitLink {
	text-decoration: none;
	font-size: 80%;
	background: #f3f3ef;
	padding: 2px 6px;
	border: 1px outset #000;
	-moz-border-radius: 3px;

[an3]

Nice color scheme modification. Whites are greyed; easy on the eyes. I've made some modifications to the CSS wiki.

<pre>/* tweaks.css */

/****
 * GreyTheWhites color scheme tweak
 */

/* Background (mostly the navigation column on the left)
 */
body {
	background-color: #aaa;
}

/* Mailbox/message viewing area
 */
#main {
	background-color: #eee;
}

/* Left and top edges of the mailbox/message viewing area
 */
.l, .t {
	border-color: #ddd;
}

/* Rectangles containing the various message-action buttons
 * ("Delete", "Report spam", "More actions...", etc.)
 */
.actions {
	background-color: #ddd;
}

/* Rows in a mailbox listing (already-read messages)
 */
.contentTable tr {
	background-color: #ddd;
}

/* Rows in a mailbox listing (unread messages)
 */
.contentTable tr.unread {
	background-color: #ddd;
}

/* Message rows previews in a mailbox listing
 */
.contentTable tr.preview, .contentTable tr.preview:hover {
	background-color: #eee;
}

/* Thin lines dividing adjacent rows in a mailbox listing
 */
.contentTable td {
	border-color: #bbb;
}

/* Rectangle at the bottom of a mailbox listing with viewing options
 * ("Messages to display", "Previous", "Next")
 */
.actionsBottom {
	background-color: #bbb;
}

/* "Search Subject or From" text-entry widget
 */
#search input {
	background-color: #ddd;
}

/* "Type to find a folder..." text-entry widget
 */
#filterFolders input {
	background-color: #ddd;
}

/* Resource usage bar charts
 */
.chart {
	background-color: #ddd;
}

/* Message headers (abridged and full view)
 */
#message dl, #message pre.fullHeaders {
	border: solid 1px #888;
}

/* Rectangle around message-header section of composer
 */
.messageHeaders {
	border: solid 1px #888;
}

/* Composer text-entry widgets for To, Cc, Subject
 */
#compose input, #compose ul.holder {
	background-color: #eee;
}

/* Composer message text-area widget
 */
textarea#messageMessage {
	background-color: #eee;
}

/* end tweaks.css */
</pre>

[an3]

Condenses the top menu (Mailbox, Compose, etc.) into one line and moves everything else up. Opens up a good deal of space.

<pre>.actions 
{
 clear:none; /*push buttons up into title */
}
.contentTable th
{
 padding:0; /*make header row really small*/
}
.primaryActions button, .secondaryActions button
{
 font-size:0.7em; /*shrink buttons text to make them fit better*/
 padding:none;
 margin-right:0;
 margin-left:0;
}
</pre>


<pre>/* Top header on one line (instad of two) */
#admin {
	float: right;
	position: relative;
	top:-0.2em;;
}
#pageHeader {height:2em;}
</pre>

[an3]

Adds keyboard shortcuts to links on your Message screen. Very handy.

Paste to your "tweaks.js" file in your "custom-ui/js" in your Files

/* Show shortcuts */
window.addEvent('domready', function() {
	function appendsc(elem, shortcut) {
		elem.innerHTML=elem.innerHTML + " [" + shortcut +"]";
	}
	function addsc(selector, shortcut) {
		$$(selector).each(function (s) {
  		     	appendsc(s, shortcut);
	   	});
	}
	function addscToOptionElem(selector, optionValue, shortcut) {
		$$(selector).each(function (s) {
			if(s.value==optionValue) appendsc(s, shortcut);
	   	});
	}
	function scanAndAddShortcuts(selector) {
		$$(selector).each(function (s) {
			var sc = s.getAttribute('kbshortcut');
			if(sc!=null) appendsc(s, sc);
		});
	}

	// manually
	addsc('.actionDelete div', ".d");
	addsc('.actionSpam div', ".s");
	addsc('.actionRefresh div', "u");
	addsc('#sbms h2', "/");
	addsc('.actionReply div', "r");
	addsc('.actionReplyAll div', "a");
	addsc('.actionForward div', "w");
	addsc('.backToMailbox a', "u");
	addsc('.msgPrevious', "k");
	addsc('.msgNext', "j");
	addsc('.viewToggle', "F");
	addsc('.viewImages', "I");

	// auto add shortcuts based on kbshortcut attribute
	scanAndAddShortcuts('#moreActions option'); 	// for mailbox screen
	scanAndAddShortcuts('.moreJumpPoints option');	// for message screen

	// for limited actions on message screen, since no kbshortcut attribute to scan for :-(
	addscToOptionElem('.lessJumpPoints option', 'MarkUnsn', "u");
	addscToOptionElem('.lessJumpPoints option', 'MarkFlag', "f");
	addscToOptionElem('.lessJumpPoints option', 'Redirect', "r");
	addscToOptionElem('.lessJumpPoints option', 'DelPerm', "%");
});

[paleolith]

Originally Posted by an3

Nice color scheme modification. Whites are greyed; easy on the eyes. I've made some modifications to the CSS wiki.

This one would be a lot more useful if you'd tell us what the modifications did rather than leaving it to us to 1) try and see, or 2) do a file comparison.

This topic is timely for me. I'm setting up an account for my aunt and uncle, and the uncle has macular degeneration, needing large elements and high contrast. (I've set them up with a 23-inch monitor to make plenty of space for magnification, though it's amazing how fast that space gets used up.) Mystakill sent me his tweaks.css file designed for a similar situation, and it's a great start, but the situations differ enough that I need to do a lot more.

My initial impression is that it's hard to track down everything I need to modify. The standard CSS is easy enough to read, but comments are extremely sparse. It would be enormously helpful if it included comments to the effect of "this rule affects such-and-such element of the interface", or if such text were available elsewhere. The idea is that then I could go down the list and fix things one by one. Is any such thing available?

In addition, I'm not finding it easy to go from the web page to the ID/class I need to modify. This I suspect is more due to my limited experience in web development. FF seems to have a strong web development tool, but I haven't found where to find simply the ID/class of anything on the page. Opera's web tool seems to make it easier to find the ID/class but I'm not sure whether it offers as much overall. Can anyone give some pointers, or a pointer to good articles or discussions?

Thanks,

Edward

[Mystakill]

Originally Posted by paleolith

...but the situations differ enough that I need to do a lot more.

I don't recall what comments I included in the tweaks file I provided to you, but I typically comment at least general areas. Also, there's quite a bit difference between a 10" netbook and a 23" monitor I'm not suprised that you'd have to make at least a few changes.

The easiest way *I've* found to make changes is with Firefox and the Web Developer extension. With that, you can both view and make temporary edits on a live page, which you can then incorporate into your tweaks.css file.

If you're interested, I keep a copy of my current stylesheet & js tweaks at http://www.mystakill.com/custom-ui/. It's heavily commented because I frequently copy & paste sections to both here & the wikis (as seen in a couple of an3's clips ).

[paleolith]

Originally Posted by Mystakill

I don't recall what comments I included in the tweaks file I provided to you, but I typically comment at least general areas.

Your comments are good, especially for something intended for personal use and not distribution. I'd be pleased if the FM CSS files were similarly commented with some additional description helping to identify the fields affected.

Also, there's quite a bit difference between a 10" netbook and a 23" monitor I'm not suprised that you'd have to make at least a few changes.

yep. Plus "low vision" isn't a single condition but a multitude of conditions, and so the response has to be tailored to the individual.

Thanks for the other remarks. I'll push ahead with learning the FF tools and take a look at your longer CSS file.

Edward

[an3]

Originally Posted by Mystakill

If you're interested, I keep a copy of my current stylesheet & js tweaks at http://www.mystakill.com/custom-ui/.

I could be missing something, but I believe the link is down.

[paleolith]

Originally Posted by an3

I could be missing something, but I believe the link is down.

Mystakill must be reorganizing. The link worked earlier, and I see the files in different locations now.

Edward

[Mystakill]

I was reorganizing to add the low vision stylesheet. My apologies. Just go to http://www.mystakill.com/ and you can get either the low vision or my own stylesheets.

It'd be nice if there were symlink functionality in FM's file storage. It'd be much easier than copying everything to the mirrored domain.

[paleolith]

Do you know if it's possible to get to "files" if the link is removed and keyboard shortcuts are disabled? I tried bookmarking the URL but it seems to be tied to the session.

For simplicity I'd like to remove both (link and kbd shortcuts) but obviously need to be able to reach the files to update the tweaks.

Edward

[Mystakill]

Originally Posted by paleolith

Do you know if it's possible to get to "files" if the link is removed and keyboard shortcuts are disabled? I tried bookmarking the URL but it seems to be tied to the session.

Edward,

If those are both disabled or hidden, then Files will be inaccessible. Moving the Files link off-screen, which makes it "hidden" but still technically visible to the browser, will make Files accessible via the keyboard shortcut.

#navFiles { margin-top: -5em }

[hadaso]

Originally Posted by paleolith

Do you know if it's possible to get to "files" if the link is removed and keyboard shortcuts are disabled?

I have some interface elements hidden (such as the "Delete" button). When I need to use them I use Firebug to remove the class from that element that I want to see.