Professional Blue Stylesheet for New Interface

[sflorack]

I love the new interface, but not particularly keen on the new colors. So I submit the first custom stylesheet for the new interface.

You can compare the screenshots here to see that I tried to keep the colors the same as the old Professional Blue style (I haven't messed with fonts yet):
New Interface
Old Interface (for reference)

You'll need Firefox with the Stylish addon. Create a new style and paste the following code:

@-moz-document domain(fastmail.fm) {
.messageTotal { display: inline !important }
#sidebar a { text-decoration: none; color:#2765B4 !important }
div .resource { height: 20px; }
.resource .figures, .resource .percent { position: relative; top: -19px; text-align: center; z-index: 100; color:#fff}
.primaryActions { float: right !important }
.secondaryActions { float: left !important }
.chart { background-color: green !important }
.chart div { background-color: red !important }
h2 { background-color: #ccc !important; color: #000 !important }
.statusMessage { background-color: #CCFF99 !important }
#copyright { background-color: #155D96 !important }
#pageHeader { background-color: #155D96 !important }
.actions { background-color: #9AB4D1 !important }
#sidebar li .selected, #sidebar li.selected a { background-color: #CDDAE9 !important }
.contentTable th  { background-color: #ccc !important; }
.contentTable th a { color: #000 !important }
#message dl { background-color: #eee !important }
}

Along with the color changes, I've used some of Mystakills ideas, which swaps the REPLY buttons to the left, and the DELETE/ACTION buttons to the right. It also places the resource information (MB/BW) on top of the graphical bar.

[stanwood]

Originally Posted by sflorack

I love the new interface, but not particularly keen on the new colors. So I submit the first custom stylesheet for the new interface.

Thanks sflorack! This is fabulous!

[Merovingian]

double that thanks sflorack!

great job......

[SamVilde]

That's awesome. Knowing about that firefox add-on is going to save my sanity on a bunch of ugly sites. On the other hand, knowing about this is going to make it a lot harder to get those papers written for Monday. Thanks.

red version

This isn't complete -- I wanted to change the color of the selected item in the sidebar, and the little line at the top of the selected tab up top -- couldn't find either & am going to bed.

@-moz-document domain(fastmail.fm) {
#sidebar a { text-decoration: none; color:#2765B4 !important; }
div .resource { height: 20px; }
.resource .figures, .resource .percent { position: relative; top: -19px; text-align: center; z-index: 100; color:#fff}
.primaryActions { float: right !important }
.secondaryActions { float: left !important }
.chart { background-color: #c1cdcd !important }
.chart div { background-color: white !important }
#sidebar li .selected, #sidebar li.selected a { background-color: #CDDAE9 !important }
body { background-color: #eee; color: #000 !important }
h2 { background-color: #ccc !important; color: #000 !important }
.statusMessage, .MbxSelTd { background-color: #ffa500 !important; }
#copyright { background-color: #cd3333 !important }
#pageHeader { background-color: #cd3333 !important; border-top:4px solid black !important; border-bottom:3px solid black !important }
.actions { background-color: #cd3333 !important; border:2px solid black !important; }
.actions a:link, .actions a:visited{ font-weight: bold !important; color: #fff !important; text-decoration: none; }
.actions a:hover, .actions a:active{ font-weight: bold !important; color: #fff !important; text-decoration: underline; }
.contentTable th { background-color: #ee6a50 !important; }
.contentTable th a { color: #fff !important }
#message dl { background-color: #eee !important }
.message:hover, tr:hover { background-color: #fff !important; }
h2 { background-color: #ee6a50 !important; }
}

[Terry]

Wow that looks goooooooood will it work in ie7 ? love the folders with the number of messages.....

[David]

Originally Posted by sflorack

I love the new interface, but not particularly keen on the new colors. So I submit the first custom stylesheet for the new interface.

I hope this is not a pre-alpha stylesheet

[Mystakill]

In the absence of guidelines from FM, it might make sense to start organizing our stylesheets for readability & ease of use. They're only going to get bigger & more complicated, although hopefully not as big as the 43K base stylesheet.

@-moz-document domain(mail.mydomain.com), domain(fastmail.fm) {

/* General styling */
body { color: #333 }
h1 { padding-top: 0; margin-top: 0 }
h2 { padding: 2px 10px }
button { padding: 0 2px }

/* Page header */
#admin span{display:none}
#admin a { /* ugly admin button hack */
	border: 2px outset #ccc;
	background: #eee;
	padding: 2px 6px;
	color: #333 !important;
	vertical-align:middle;
	text-decoration: none !important
}
#admin a:hover { background: #f8b330 }
.statusMessage {
	border: 1px solid #999 !important;
	border-top: 1px solid #fff !important;
	margin: -8px 0 0 0 !important
} 

/* Sidebar */
#searchHeader { margin-top: -1.35em }
#sidebar a { text-decoration: none }

	/* Folder List */
	.messageTotal { display: inline !important }

	/* Resource bars */
	div .resource { height: 20px }
	.resource .percent, .resource .figures {
		position: relative;
		top: -1.74em;
		text-align: center;
		z-index: 100;
		color: #fff
	}
	.chart { background-color: #aaa !important }
	.chart div { background-color: #900 !important }

	#resizeHandle {
		background: #eee url('http://mail.mydomain.com/images/resizeVert.jpg') center no-repeat;
		width: 6px !important;
		border: 1px solid #999;
		border-left: 1px solid #ccc
	}

/* Main div */
#main { margin-top: .25em }

	/* Actions Bar */
	.messageActions, .jumpPoints { width: 15em }
	.nextPrev { display: none }
	.primaryActions, .secondaryActions { margin: 2px 0 }
	.primaryActions { float: right !important }
	.secondaryActions { float: left !important }
	#showMessageActions { display: block; top: 5em !important }

	#messageFrom { width: 80%; max-width: 40em }

}

Feel free to remove the extra tabs I've put in for better readability. Also, if anyone wants the resizer image I'm using, please PM me. I don't have a place to put it other than my personal storage at the moment & my office blocks pretty much every picture hosting service out there.

[Terry]

is the an IE one ?

[Mystakill]

Originally Posted by Terry

is the an IE one ?

You might be able to replicate Stylish functionality with IE7Pro, which supports CSS tweaks via Greasemonkey-like scripts.

There's a Gmail css script bundled with it, but I haven't had a chance to modify that for FM & likely won't tonight.

[Terry]

thanks....

[n5bb]

Thanks to the earlier posters, I was able to put together some instructions on getting a new feature (Delete previous/next tool in message view screen) running using Stylish. Thanks, Mystakill and sflorack!

Bill

[Mystakill]

Has anyone figured out how to replace the directional arrow images on the buttons? The best I've been able to do is to put an image on the background of the button, but not replace the existing image. I was trying to replace the images so that they'd make more sense now that their functions have been reversed (as have the text links).

I re-read through Neil's stylesheet & figured it out.

button.actionPrevious div, li.menuPrevious{ background: transparent url(http://mydomain.com/images/arrow_down.gif) center no-repeat !important }
button.actionNext div, li.menuNext{ background: transparent url(http://mydomain.com/images/arrow_up.gif) center no-repeat !important }

[sflorack]

I became confused with the new function, but wonder if I should use the hack you posted or "relearn" prev/next.

It's normal behavior to have NEXT move to the the next message; whereas the new interface uses the arrival time as the condition of PREV and NEXT. (When reading the first, and newest message, clicking PREV will move to the second newest message.) I suppose that makes more sense, but it's definitely something I'd have to get used to.

[Mystakill]

According to Neil, the reversal of directions is apparently a bug, but it's been applied to all of the next/prev links and hasn't been fixed yet.

If you implement the up/down arrows as they are currently, you can easily reverse the image names to match if/when FM fixes the directionals.

[Mystakill]

Originally Posted by Mystakill

You might be able to replicate Stylish functionality with IE7Pro, which supports CSS tweaks via Greasemonkey-like scripts.

There's a Gmail css script bundled with it, but I haven't had a chance to modify that for FM & likely won't tonight.

Terry,

Sorry for the delay, but things have been busy this week. You can sort-of replicate Stylish functionality in IE7Pro by doing the following:

1) Create a new user script in C:\Program Files\IEPro\userscripts\ and give it a name like FastmailCssSkin.ieuser.js.

2) Add the following code to that file as the base, before adding any CSS:

/*
 * Title: Fastmail CSS Skin
 * Description: Greasemonkey script for Firefox to change the appearance of Fastmail
 * Author: Mystakill@EMD
 * Updated: 10/21/2008
 * 
 */

// ==UserScript==
// @name Fastmail CSS Skin
// @namespace http://www.mydomain.com/archives/skin-para-gmail
// @description Greasemonkey script for Firefox to change the appearance of Fastmail
// @injectframes 1
// @include www.fastmail.fm/*
// @include mail.yourdomain.com/*
// ==/UserScript==

(function(){ 
	
	var cssStyle = '*** CSS TWEAKS GO HERE ***';
	
	PRO_addStyle(cssStyle, document);
})()

Then add condensed CSS code in between the cssStyle quotes. You have to condense the white-space in the CSS so that everything runs together because IE7Pro's scripting engine doesn't seem to like blank lines in its strings.

For instance,

#admin span{display:none}
#admin a { text-decoration: none !important }
#admin a:hover { background: #f8b330 }

needs to be entered as

#admin span{display:none} #admin a { text-decoration:none !important } #admin a:hover { background:#f8b330 }

3) Then right-click on the IE7Pro icon on the status bar and click Preferences > User Scripts, then enable your script(s).

I tried to include my entire stylesheet in the script, but it didn't work, even when I appended strings together. You might be better off creating separate scripts for each section of CSS code that you want to use. IE7Pro user scripts are way more of a hack than Stylish, but it seems to work with small snippets.

Maybe you can convince the IE7Pro folks to support full-on Stylish functionality in lieu of user scripts for CSS. Otherwise, you'd be better off switching over to Firefox with the appropriate extensions (and IE Tab for sites insisting on IE).