Wikia

FastMailWiki

NewInterfaceCSS

Talk0
253pages on
this wiki

CSS overview Edit

This section is a technical overview of how the new CSS files are created. You can skip this section and go straight to the next one if you're interested in just tweaking your display.

The CSS is built from a series of source files.

The source files list is available here http://www.fastmail.fm/css/prod/src/base/main.css and http://www.fastmail.fm/css/prod/src/standard/main-style.css

The files are then joined together into a single source file: http://www.fastmail.fm/css/prod/raw/base/main.css and http://www.fastmail.fm/css/prod/raw/standard/main-style.css

And then minimised and gziped to save space: http://www.fastmail.fm/css/prod/min/base/main.css and http://www.fastmail.fm/css/prod/min/standard/main-style.css

Custom CSS files can be placed in the folder {My Files}/custom-ui. See below for details.

Tweaking (customizing) the Fastmail interface Edit

The appearance of the Fastmail webinterface can easily be tweaked by writing your own stylesheet (CSS) file.

Short explanation:

Enable custom style sheets in the options screen, and place a tweaks.css file in a folder called {My Files}/custom-ui/css

Detailed explanation:

  1. Enable the custom mode for stylesheets:
    1. Go to Settings > Advanced > Account Preferences.
    2. In the Display section, make sure Custom Styles checkbox is checked and click Save Changes
  2. Create a folder {My Files}/custom-ui/css in your Fastmail Files storage:
    1. Go to Files.
    2. In the selection box labeled More actions, click create subfolder.
    3. In the box that appears, enter custom-ui and click Do.
    4. Click on the newly created folder custom-ui to move into it
    5. In the selection box labeled More actions, click create subfolder.
    6. In the box that appears, enter css and click Do.
    7. Click on the newly created folder css to move into it
  3. Create a tweaks.css file on your local system with the CSS modifications you'd like (see the examples further down this page, you can just copy and paste the ones you like).
  4. Upload the tweaks.css file to the {My Files}/custom-ui/css folder:
    1. If not already there, go to Files
    2. Click the css folder on the left side within the custom-ui folder
    3. In the upload section at the bottom, select your tweaks.css file using the Browse button, and click Upload.

The CSS changes in your tweaks.css file should now be applied.

Remarks:

  • Note that the custom-ui approach will work everywhere you login. Also because the tweaks.css is included last, you don't need to add lots of '!important' options to your styles to force it to override the existing ones.
  • Tip: you can easily edit text files (like tweaks.css) directly in the web interface by clicking the (details) link next to the file name in the Files screen.
  • Tip: for troubleshooting, to disable the application of tweaks.css, you can rename the tweaks.css file to something else.
  • Details about the current implementation of custom stylesheets can be found in this forum post and this forum post.
  • Browser extensions such as Web Developer for both Firefox and Chrome, and Pendule for Chrome, allow for temporary, real-time editing of stylesheets. Chrome, Safari, and Opera also feature built-in developer tools which provide similar functionality, as well as in-depth scripting and HTML viewing/editing tools. These extensions and browsers can be used to assist you in modifying and building your own stylesheets. The temporary modifications you make in these can be added to your own tweaks.css file(s).
  • Also note that FastMail now supports custom JavaScript by placing a file named tweaks.js in the custom-ui/js folder. For more information, see NewInterfaceJS.
  • Just for reference, to mirror the complete css files set - download Bron's zip file[1], then upload and unzip it in {My Files}. You can then update any of these files individually.

Using and Maintaining Multiple Custom Stylesheets Edit

Multiple stylesheets can be used and maintained simply by creating subfolders for each additional stylesheet under {My Files}/custom-ui/css. Switching between stylesheets is as simple as modifying {My Files}/custom-ui/css/tweaks.css with the following entry ' @import url('foldername/stylesheet-name.css') ' to point to a given stylesheet. This feature provides additional flexibility when testing or using new stylesheets or tweaks from the FM community.

Examples Edit

To use the examples below, just copy and paste the ones you like one after another in your tweaks.css file. They also provide a good starting point for your own customizations.

If you have small useful tweaks yourself, you can add them to this page. Please append them at the bottom of the relevant section. Create a new section if multiple tweaks can be grouped together.

Note: for examples of JavaScript tweaks, see NewInterfaceJS.


General Edit

Always show Delete and Previous/Next links on upper right corner of Message View Screen.
Without using the this tweak, the links are only shown when you have clicked Show more options.

/* Add 'Delete and Previous/Next' links */ 
.deleteNextPrev {
   display:block;
   position:absolute;
   right:0;
   top:0;
}

Swap location of primary and secondary actions (top row of buttons) across all pages:

/* swap location of primary and secondary actions */
.primaryActions { float: right } 
.secondaryActions { float: left }

Limit this tweak to just the message view as follows:

/* swap primary and secondary actions on message view */
body#message .primaryActions { float: right } 
body#message .secondaryActions { float: left }

Note that message can be replaced with any body id: mailbox, compose, addressBook, or files.
The Notepad, File details, and Options pages have no unique body id. They can all be changed together by specifying their class: body.forms.


Left align status and error messages. Don't center status messages and error messages (annoying when there's an error in the sieve script and the entire script is showed center-aligned)

/*  Left align status and error messages. */
.statusMessage, .errorMessage { text-align: left !important }


Change directional arrow button images to up/down versus left/right:

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


Show the clear search text in red to make it stand out more, and make it clear that it has to be pressed to return to 'normal' message view.

/* Show 'clear search' text in red */
#clearSearch {
	font-weight: bold;
	color:red;
}


Change plain text message bodies and text editing on the compose screen to use courier font.

/* Make text messages (view/compose) courier font */
textarea, pre { font-family: "courier new"; }


Shrink table header and move buttons up to save space

.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;
}


Header on one line. Put the navigation tabs (Mailbox, Compose, ...) and admin links (username, Help, Logout) on one line

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


Align preview text between the subject column. If you have preview enabled (Options > Folders > Edit > Preview), the text extends across the complete width of the table. This tweak sets the margins to where the subject column starts and ends. This looks nicer (IMO), but also takes up a bit more space.

/* align the preview text (if enabled) below the subject column */
.preview td {
	padding-left:275px;
	padding-right:130px;
}

Fix navigation bar to top of screen or sidebar so it doesn't scroll.

/* Fix nav bar to top of screen and no scroll */
#pageHeader { position: fixed; width: 100%; z-index: 100; }
#mainWrapper { padding-top: 50px; }
#sidebar { padding-top: 50px; }
/* Fix sidebar to left side and no scroll */
#sidebar { position: fixed; }

Change text size Edit

Increase Sidebar font-size to small:

/* Increase sidebar font size */ 
#sidebar li .selected, #sidebar li .unread, #sidebar li .overflow { font-size: small }


Make status message fonts smaller The status message screen that you see when logging in takes up quite some space. You can reduce the font size and the line spacing to save some space. (If the line spacing is too small for you, you can just leave out the line with line-height.)

/* Show statusmessage with very small font and smaller line spacing*/
.statusMessage, .errorMessage { 
	font-size: xx-small;
	line-height: 95%;
}


Decrease the subject font size. Font-size can be anything (xx-small, x-small, small, medium, large, x-large, xx-large) and I added font-weight to make the subject stand out, but it can be removed.

div #main h1 { font-size: medium !important; font-weight: bold !important }

Hiding things Edit

Hide user email address in upper right corner: NOTE - you can just set the Username Display preference field under Options > Account Preferences > Display to blank now instead

/*  Hide user email address */ 
#usernameDisplay {display:none}


Hide user email address and display your own text instead: NOTE - you can just set the Username Display preference field under Options > Account Preferences > Display to arbitrary text instead

/*  Hide user email address and display your own text instead */ 
#usernameDisplay {display:none}
#betaVersion>b:before, #switchInterface>b:before { content: ' | PUTYOURTEXTHERE' } 


Hide the complete upper line in upper right corner (with username, help, log out, etc.)

/*  Hide the complete upper line in upper right corner  */ 
#admin span{display:none}


Display current beta revision # if you've hidden the username as above:

/* Display current beta revision */
#admin span:first-child { display: inline }
#admin b { display: none }


Hide folders unless they have unread messages. The folder search box remains shown, but doesn't seem to work. The current also remains shown. (This works as a custom stylesheet in Opera. It's untested in Firefox.)

/* Hide folders unless they have unread messages */
div#sidebar ul.folderTree li {display: none !important}
div#sidebar ul.folderTree li#filterFolders {display: block !important}
div#sidebar ul.folderTree li.selected {display: block !important}
div#sidebar ul.folderTree li.unread {display: block !important}


Permanently hide specific folders. If a specific folder should be always hidden, view the source for the web page. Each folder has its own <li id="mbf######"> tag. Use the id element (replacing ####### with the appropriate numbers found in the HTML source):

/* Permanently hide specific folders */
div#sidebar ul.folderTree li#mbf###### {display: none !important}


Remove the graphics from all the buttons (and fix the wrapping of the action buttons in 'view message' screen at 1024x768).

/* Remove the graphics from all the buttons */
button div {
   background-image: none !important;
   padding: 0px !important;
}

Note that you can also hide all graphics by selecting the Minimal stylesheet under Options > Account Preferences > Display > Style Sheet.


Remove the Notepad link. If you never use Notepad, this removes it from the choices at the top of the page. It can still be accessed by pressing N.

ul#navigation li a[kbshortcut="n"] {display: none}


Hide action buttons on the mailbox and message page. The code below will remove the Delete, Report Spam and Refresh button. You can leave out the lines for the buttons you don't want to see removed.

/* Remove action buttons */
.actionDelete {display: none}
.actionRefresh {display: none}
.actionSpam {display: none}


Limit height of header fields on the message view screen. It's not really "hiding" but it does hide most of those annoying mile high mailing lists that some people insist on puting in the "To/Cc" headers. I tried this with "Concise" and it looks almost OK. Can use a little improvement.

#main dd {
      max-height: 72px;
      overflow:auto;
      background-color: #dfdfdf;
      border-bottom: solid white ;
}


Hiding the blue copyright bottom bar. The following solutions hides the bottom bar on every page. However, only on the message page is the space that it normally takes really removed. On other pages, the space taken by the bar is still there. If anybody knows how to remove that also...?

/* Hide copyright bottom bar */
div#copyright {display:none;}
div#sidebar {padding-bottom:0;}

Navigation Options Edit

CSS IDs have been added to the navigation options so that they can be individually styled. IDs are as follows:

navCompose     - Compose
navAddressBook - Address Book
navNotepad     - Notepad
navFiles       - Files
navOptions     - Options

Be careful when setting display:none on Files or Options, as that could make it difficult to fix any stylesheet issues. Either disable stylesheets via your browser or the Web Developer extension installed in Firefox to re-enable access to the stylesheet file.

Folder tree Edit

Show message counts for all folders:

/* Show message counts */ 
.messageTotal { display: inline !important }


Show folders with unread messages in red.

The last line also colors the parent folders which contain unread folders. If you don't want that, you can leave that line out.

/* Folder with unread messages -> red */
body#mailbox li.unread a.folder, body#message li.unread a.folder { color: red}
body#mailbox li.hasUnreadChildren a.folder, body#message li.hasUnreadChildren a.folder { color: red}


Show currently selected folder even if it is a hidden folder

Hidden folders are only show when the search folder box has the focus, even if a hidden folder is currently selected. To show that selected (hidden) folder add the following to your tweaks.css file:

/* Show selected hidden folder */
li.hidden.selected {display:inline !important;}


Relocate the Move/Copy dropdown above the folder tree

#moveCopyOption { position: absolute; top: -1em }
ul.folderTree { margin-top: 1.5em }

Resource charts Edit

Place bandwidth & storage text on top of the resource bars to conserve vertical space:

/* Resource charts */
/*  Place bandwidth & storage text on top  */
div .resource { height: 1.4em }
.resource .percent, .resource .figures {
	position: relative;
	top: -1.7em;
	z-index: 100;
}


Change chart colors. See also Color resource charts depending on their status below.

/* Change chart colors */
.resource .percent, .resource .figures { color: #fff }
.chart { background-color: #aaa !important }
.chart div { height: 1em;
	background-color: #900 !important
}


Color resource charts depending on their status. For example, you could use this to color the chart red when your used mailbox space reaches 90% or more. (Using javascript tweaks, you can also change the appearance of the webpage depending on the chart status, see Resource Charts (JS).)

/* Color resource charts */
.size70 div, .size75 div {background-color:yellow;}
.size80 div, .size85 div {background-color:orange;}
.size90 div, .size95 div, .size100 div {background-color:red;}

If you want the colorization to be specific for either the mailbox view or the files view, prepend #mailbox or #files respectively to each .size specification as appropriate. Example:

/* Color resource charts */
#mailbox .size70 div, #mailbox .size75 div {background-color:yellow;} /* mailbox charts only --> 70-79% will be yellow*/
#files .size70 div, #files .size75 div {background-color:green;} /* files charts only --> 70-79% will be green*/

Print output Edit

To change output sent to the printer, wrap the applicable CSS in @media print { ... }.

For example, to change the font of everything to Times, and to make the 'From:' line bold, insert the following snippet into your tweaks.css file:

@media print { 
  * {
    font-family: Times, serif;
  }
  headerValueFrom {
    font-weight: bold;
  }
}

Hide URLs on printed output Edit

When you print an HTML email, we put the URL of any link after the link in the printed result. This can be useful, but it can also mess up the display result a lot. If you print regularly, and don't want this, you can use this css tweak to disable it.

@media print {
  .messageBody a:after {
    content: none !important;
  }
}

Themes Edit

These are the built-in stylesheet options for the new interface:

  • None
  • Standard
  • Minimal
  • Concise
  • Infinite Blackness
  • Naturals
  • Soothing Blues

Concise Edit

The concise stylesheet is available as a standard stylesheet on the Options -> Account Preferences screen. It's a port of the Concise tylesheet from the old interface (a "port" in that it tries to use the same colours and fonts as the old concise stylesheet, but uses all the new CSS attributes). It's a good starting example for anyone that wants to develop a new stylesheet, because it uses the standard "main.css" stylesheet as a base (which defines the overall layout), and then provides a "main-style.css" which controls the fonts, images, colours and tweaks the spacing.

The following links are broken;

Compact Default Edit

Some people have requested a theme with the spacing of Concise but the general appearance of the standard theme. Upload this file as custom-ui/css/main-style.css.

Stylesheet Gallery Edit

User-submitted stylesheets for the new interface can be found in the Stylesheet Gallery.

Around Wikia's network

Random Wiki