EmailDiscussions.com  

Go Back   EmailDiscussions.com > Email Service Provider-specific Forums > FastMail Forum
Register FAQ Members List Calendar Search Today's Posts Mark Forums Read
Stay in touch wirelessly

FastMail Forum All posts relating to FastMail.FM should go here: suggestions, comments, requests for help, complaints, technical issues etc.

Reply
 
Thread Tools
Old 5 Jul 2017, 11:58 AM   #1
joe_devore
Essential Contributor
 
Join Date: Dec 2003
Location: Dover, NH, USA
Posts: 315
Lightbulb CUSTOM CSS Tweaks for FastMail's New UI, using Firefox Extension Stylus!

Gsptlsnz's CUSTOM CSS Tweaks for FastMail's New UI,
using the Firefox extension "Stylus"
https://addons.mozilla.org/en-US/firefox/addon/styl-us/



Thread STARTED by me since..
Gsptlsnz didn't feel like bothering lol.. lol

This is to show off and discus his and any others tweaks
IN AN EFFORT to SAVE FastMail FROM certain DOOM..!



This is Gsptlsnz's main and first post of his major tweaks!
and some have been been updated for for new FastMail changes...
Quote:
Originally Posted by Gsptlsnz View Post
This is my custom CSS code. Makes the screen look similar to Concise.

---

@-moz-document domain("fastmail.com")
{
/* Puts a count badge on every folder except SENT and TRASH and shows number of unread */
.v-MailboxSource-badge
{
display:inline-block;
text-shadow:1px 1px 1px #808080;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
font-size:10.5pt;
}


/* Put a box around "MAIL Storage Quota" at bottom left of the screen. */
/* Tweaked version that also adds a 5 pixel thick border around the box. */
.v-Quota
{
border: 5px solid green;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}


/* Makes the check-boxes 3-D. */
.app-listItem-boxInput {
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Sets the color of email windows on the main screen */
.app-listItem {
background-color:#F5F5F5;
}

/* Makes pinned rows ivory */
.is-pinned {
background-color:aliceblue;
}

/* Puts a thin border between the emails */
.v-MailboxItem
{
border-top:3px solid green;
}

/* Makes Name of Sender Green */
.v-MailboxItem-from {
color:darkgreen;
}

/* Sets color/size of the previews */
.v-MailboxItem-preview {
color:black;
font-size:12pt;
}

/* Makes the address book drop-down menu larger */
.v-AutoComplete {
font-size:14pt;
}

/* Makes word 'To' crimson */
.s-compose-to {
font-size:16pt;
color:crimson;
}

/* Makes word 'Subject' green */
.s-compose-subject {
font-size:11pt;
color:green;
}

/* Shows name of Folder you are in */
.v-MessageCard-folder {
background-color:hotpink;
padding-left:4px;
padding-right:4px;
font-size:12.5pt;
color:white;
text-shadow:1px 1px 1px #000;
border-radius:5px;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Makes email addy navy */
.v-EmailText-ghost {
color:navy;
}

/* Makes name of email writer green */
.v-MessageCard-fromAndPreview {
font-size:14pt;
color:darkgreen;
}

/* Affects 'Mail' in upper left corner */
.v-MainNavToolbar-appName {
color:gold;
font-weight:bold;
text-shadow:1px 1px 1px #000;
}

/* User name in red letters */
.v-MainNavToolbar-userName {
color:red;
border-bottom:1px solid white;
}

/* Makes sidebar color look like Concise */
.app-sidebar {
background-color:#F0E68C;
color:navy;
}

a:link {
color:navy;
text-decoration:none;
}

a:hover {
color:#DD0000;
}

/* Affects 'Newer' and 'Older' links at page top */
.v-ThreadNav-text {
color:red;
font-weight:bold;
font-size:13pt;
text-shadow:1px 1px 1px #000;
}

/* Adds gold box around 'Show Details' link */
.u-subtleLink {
color:navy;
background-color:gold;
padding-left:3px;
padding-right:3px;
border-radius:4px;
}

/* Controls textarea where you read the email */
.v-Message-body {
background-color:#F5F5F5;
padding:5px;
width:748px;
font-family:verdana;
font-size:13pt;
margin-bottom:15px;
margin-top:15px;
border-radius:11px;
border:1px solid #F5F5F5;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

span {
font-size:11pt;
}

.v-MessageCard-time, .v-Compose-lastSaved {
margin-top:-5px;
padding:0px;
background-color:transparent;
color:darkgreen;
}

/* Affects the Red and White square on the upper left */
i.icon.icon-compose {
color:crimson;
background-color:white;
padding:3px;
border-radius:4px;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Makes 'Reply' and 'Send' Buttons Green */
i.icon.icon-reply, i.icon.icon-paper-plane {
color:black;
background-color:lime;
border-radius:4px;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Turns 'Draft' Button Yellow */
i.icon.icon-cloud-upload {
color:yellow;
background-color:black;
border-radius:4px;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Adds shading to the toolbars */
.app-viewBar, .v-Toolbar, .app-toolbar {
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Controls the textarea where you write emails */
.v-Text {
border-radius:11px;
background-color:#F5DEB3;
border:2px solid #808080;
font-size:13pt;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Makes 'Trash Can' Icon Crimson */
i.icon.icon-remove {
color:crimson;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}

/* Makes 'Drafts' Icon Purple */
i.icon.icon-file {
colorurple;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}

/* Affects 'Delete Draft' Icon */
i.icon.icon-blocked {
color:red;
background-color:white;
border-radius:9px;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Affects 'Archive' Icon */
i.icon.icon-box {
color:goldenrod;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}

h1 {
font-weight:bold;
color:#A10000;
border-bottom:0px solid black;
text-shadow:1px 1px 1px #808080;
}

.v-ComposeFrom-name {
margin-top:-8px;
}

.app-main {
background-color:beige;
}

select {
font-size:12.5pt;
font-weight:normal;
font-family:verdana,arial,helvetica,sans-serif;
cursorointer;
border-color:black;
color:#00FF00;
background-color:black;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
text-transform:capitalize;
}

option {
font-size:12.5pt;
font-weight:normal;
font-family:verdana,arial,helvetica,sans-serif;
cursorointer;
border-color:black;
color:#00FF00;
background-color:black;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

}


___________________________________________________________________________
NEW CSS TWEAK created by Gsptlsnz posted on (07/10/2017 @ 01:13 PM EST)

Quote:
Originally Posted by Gsptlsnz View Post
Some more tweaks...

/* Makes selected Folder crimson and shaded */
.is-selected {
color:crimson;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Affects the folder count in the lower right corner */
.v-StatusBar {
color:crimson;
font-size:15pt;
font-weight:bold;
padding:3px;
border-radius:4px;
border:1px solid black;
}

/* Affects the folder count (on hover) in the lower right corner */
.v-StatusBar:hover {
color:transparent;
background-color:transparent;
border:0px solid transparent;
}

/* Affects the Settings --> "RULES" page */
/* Affects the "Spam Rules" page */
.v-ResourceItem-explanation {
color:green;
font-size:13pt;
}

/* The 'Trash Can' Icon Has Red Background And 3D */
i.icon.icon-remove {
color:white;
background-color:red;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}
NEW TWEAK FROM Gsptlsnz!
Quote:
Originally Posted by Gsptlsnz
/* Puts a border under the 'Trash' folder */
.v-MailboxSource--trash
{
border-bottom:2px solid blue;
}


Quote:
Originally Posted by Gsptlsnz
/* 1a - 'Inbox' Icon Has A LimeGreen Background And Is 3D */
i.icon.icon-drawer
{
background-color:limegreen;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}

/* 1b - 'Inbox' Folder Path Is Now LimeGreen */
.v-MailboxSource--inbox
{
background-color:limegreen;
}

/* 2a - 'Sent' Icon Has A Lightblue Background And Is 3D */
i.icon.icon-paper-plane
{
background-color:lightblue;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}

/* 2b - 'Sent' Folder Path Is Now Lightblue */
.v-MailboxSource--sent
{
background-color:lightblue;
}

/* 3a - 'Drafts' Icon Has An Orange Background And Is 3D */
i.icon.icon-file
{
background-colorrange;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}

/* 3b - 'Drafts' Folder Path Is Now Orange */
.v-MailboxSource--drafts
{
background-colorrange;
}

/* 4a - 'Trash' Icon Has A Turquoise Background And Is 3D */
i.icon.icon-remove
{
color:white;
background-color:turquoise;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}

/* 4b - 'Trash' Folder Path Is Now Red */
.v-MailboxSource--trash
{
background-color:turquoise;
}
ran out of room in the opening post so...
please read rest of the topic to find the rest of the css tweaks...

Last edited by joe_devore : 27 Feb 2019 at 10:52 AM. Reason: ADDING MORE TWEAKS!
joe_devore is offline   Reply With Quote

Old 5 Jul 2017, 05:58 PM   #2
Terry
The "e" in e-mail
 
Join Date: Jul 2002
Location: VK4
Posts: 2,994
Thank you, all I have to now is work out how to change the colour a little on the left....
Terry is online now   Reply With Quote
Old 5 Jul 2017, 06:01 PM   #3
joe_devore
Essential Contributor
 
Join Date: Dec 2003
Location: Dover, NH, USA
Posts: 315
Quote:
Originally Posted by Terry View Post
Thank you, all I have to now is work out how to change the colour a little on the left....
lol


you can try different color code words... or if its in a hex code you can just GOOGLE those
and Stylish has a built in error checking too
joe_devore is offline   Reply With Quote
Old 5 Jul 2017, 11:52 PM   #4
Gsptlsnz
Senior Member
 
Join Date: Sep 2011
Location: 5th Dimension
Posts: 180
Quote:
Originally Posted by Terry View Post
Thank you, all I have to do now is work out how to change the colour a little on the left....
Edit this:

Code:
/* Makes sidebar color look like Concise */
.app-sidebar {
background-color:#F0E68C;
color:navy;
}
Color charts:
http://htmlcolorcodes.com/color-char...n-color-chart/

Last edited by Gsptlsnz : 5 Jul 2017 at 11:59 PM.
Gsptlsnz is offline   Reply With Quote
Old 6 Jul 2017, 01:45 AM   #5
joe_devore
Essential Contributor
 
Join Date: Dec 2003
Location: Dover, NH, USA
Posts: 315
ok, done it a sec... OK done!
OOOh 'Gsptlsnz" THIS is why you should have started the topic..!!
lol

best thing is to ask a MODERATOR to see if they can add you as an author
to the opening post or switch it over to you from me :P

Last edited by joe_devore : 6 Jul 2017 at 01:51 AM.
joe_devore is offline   Reply With Quote
Old 6 Jul 2017, 04:25 AM   #6
somdcomputerguy
Cornerstone of the Community
 
Join Date: Jun 2004
Location: Rupert, WV
Posts: 876
Quote:
Originally Posted by Gsptlsnz View Post
I use the ColorZilla plugin. It is a Firefox add-on, but I don't use that browser. That plugin (and Stylish..) work with the browser I use primarily though. I have added that color code link to my bookmarks though, for when I have to use another browser.

- Bruce
somdcomputerguy is offline   Reply With Quote
Old 6 Jul 2017, 08:16 AM   #7
Terry
The "e" in e-mail
 
Join Date: Jul 2002
Location: VK4
Posts: 2,994
Quote:
Originally Posted by Gsptlsnz View Post
Edit this:

Code:
/* Makes sidebar color look like Concise */
.app-sidebar {
background-color:#F0E68C;
color:navy;
}
Color charts:
http://htmlcolorcodes.com/color-char...n-color-chart/
Thank you....
Terry is online now   Reply With Quote
Old 11 Jul 2017, 03:13 AM   #8
Gsptlsnz
Senior Member
 
Join Date: Sep 2011
Location: 5th Dimension
Posts: 180
Some more tweaks...

/* Makes selected Folder crimson and shaded */
.is-selected {
color:crimson;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
}

/* Puts a badge on every folder */
.v-FolderSource-badge {
display:inline-block;
}

/* Affects the folder count in the lower right corner */
.v-StatusBar {
color:crimson;
font-size:15pt;
font-weight:bold;
padding:3px;
border-radius:4px;
border:1px solid black;
}

/* Affects the folder count (on hover) in the lower right corner */
.v-StatusBar:hover {
color:transparent;
background-color:transparent;
border:0px solid transparent;
}

/* Affects the "Spam Rules" page */
.v-ResourceItem-explanation {
color:green;
font-size:13pt;
}

/* The 'Trash Can' Icon Has Red Background And 3D */
.icon-remove {
color:white;
background-color:red;
box-shadow:5px 5px 5px rgba(0,0,0,.25), 0 0 20px transparent inset, 0 0 1px rgba(255,255,255,0.5) inset;
border-radius:4px;
}
Gsptlsnz is offline   Reply With Quote
Old 11 Jul 2017, 04:02 AM   #9
joe_devore
Essential Contributor
 
Join Date: Dec 2003
Location: Dover, NH, USA
Posts: 315
Thumbs up

Nice! I will go ahead and add them to the Opening Post as a new QUOTE after that first one and date it to shwo when they were added to this topic

and I might try a few of these out myself lol

though I'm still looking for one that does the folder like in the Classic UI, "(NEW/total)" aligned to right margin so its out of the way! and! not cluttering..

make it happen captain! lol if u can please.. if not ohh well!

EDIT:
this is not too bad..
I that it displays a constant NEW count badge..
and that's its automatically aligned to the right margin is GREAT!
makes it a bit more consistent in displaying NEW counts instead of only popping up when there is NEW mail in a folder, THANK!
Code:
    /* Puts a badge on every folder, displaying constant "NEW MAIL" count */
    /* Puts a badge on every folder */
   .v-FolderSource-badge
    {
    display:inline-block;
    }
ps: I have gone ahead and renamed the badge comment to be a bit more verbose if you don't mind.. I left the original comment tag too for reference..


I kinda like this one too, but I reduced the text size from 15 to 10.. :/
I guess I like that size.. consider it OPTIONAL lol
Quote:
/* Affects the folder count in the lower right corner */
.v-StatusBar
{
color:crimson;
font-size:12pt;
font-weight:bold;
padding:3px;
border-radius:4px;
border:1px solid black;
}

I like THIS one TOO!
but I edited the comment.. its NOT specifically SPAM related
its the RULES page in general..
Code:
  /* Affects the Settings --> "RULES" page */
  .v-ResourceItem-explanation
  {
  color:green;
  font-size:13pt;
  }
SO yeah those are the three I liked, so I added them to my ACTIVE TWEAKS Style's code profile!

Last edited by joe_devore : 11 Jul 2017 at 04:42 AM.
joe_devore is offline   Reply With Quote
Old 11 Jul 2017, 03:53 PM   #10
Gsptlsnz
Senior Member
 
Join Date: Sep 2011
Location: 5th Dimension
Posts: 180
If you want something a bit fancier...

.v-FolderSource-badge {
display:inline-block;
text-shadow:1px 1px 1px #808080;
}

Last edited by Gsptlsnz : 11 Jul 2017 at 09:04 PM.
Gsptlsnz is offline   Reply With Quote
Old 11 Jul 2017, 05:11 PM   #11
joe_devore
Essential Contributor
 
Join Date: Dec 2003
Location: Dover, NH, USA
Posts: 315
Question

Quote:
Originally Posted by Gsptlsnz View Post
If you want something a bit fancier...

.v-FolderSource-badge {
display:inline-block;
text-shadow:1px 1px 1px #808080;
}
hmm... I really didn't notice much difference.. that extra tweak is ok I guess
thx anyway.
joe_devore is offline   Reply With Quote
Old 11 Jul 2017, 09:33 PM   #12
Gsptlsnz
Senior Member
 
Join Date: Sep 2011
Location: 5th Dimension
Posts: 180
It just makes the numbers look shaded... a very minor tweak. I'm still working on getting the total count to show but it may not be possible.
Gsptlsnz is offline   Reply With Quote
Old 12 Jul 2017, 11:16 AM   #13
joe_devore
Essential Contributor
 
Join Date: Dec 2003
Location: Dover, NH, USA
Posts: 315
Thumbs up

Quote:
Originally Posted by Gsptlsnz View Post
It just makes the numbers look shaded... a very minor tweak. I'm still working on getting the total count to show but it may not be possible.
Thx for ALL your useful/HANDY/ much appreciated hacks/tweaks!!

Which is more then I can say for the FastMail Dev(s) these days lol. p


for some reason I am not getting the email notifications for this thread even though I am subscribed and was getting them before... strange..
I guess I will try unsubscribing and then re-enabling it!

AND thx for for workings on the total count! I hope you can ! : D
as it went in the Classic UI
display = (NEW/Total)
NEW = bold
joe_devore is offline   Reply With Quote
Old 12 Jul 2017, 07:56 PM   #14
Gsptlsnz
Senior Member
 
Join Date: Sep 2011
Location: 5th Dimension
Posts: 180
Be aware they're already making changes to their base code that are negating some of my tweaks!

Expect more of this chicanery...
Gsptlsnz is offline   Reply With Quote
Old 12 Jul 2017, 08:01 PM   #15
joe_devore
Essential Contributor
 
Join Date: Dec 2003
Location: Dover, NH, USA
Posts: 315
Thumbs down

Quote:
Originally Posted by Gsptlsnz View Post
Be aware they're already making changes to their base code that are negating some of my tweaks!

Expect more of this chicanery...
GOOD GAWD WTF!!!!!!!!!!

what is with FastMail's DEVS THESE DAYS!
;_; ;_; ;_; ;_; ;_; ;_; ;_; ;_; ;_; ;_; ;_; ;_; ;_; ;_;

DO THEY SERIOUSLY HATE US THEIR "PAYING" CUSTOMERS THESE DAYS THAT MUCH??!!!!
ie. that they feel the need to SCRAP EVERY LITTLE THING THAT MADE FastMail GREAT and customizable!!

I remember when some of the devs gave me css and js tweaks for the custom-ui folder in the mail's file storage area...
which did all sorts of great things..!

X( X( X( X( X( X( X( X( X( X( X( X( X(

EDIT:

which specific code snippets are not working anymore??

and since you are the code creator, might I suggest "you" open a support ticket with FastMail and
make you concerns/complaints/etc KNOWN to them.. They gotta know that they are HURTING the long term customer base
ie. US POWER users that have been with FastMail since pretty much the beginning!!

Quote:
chicanery:
"the use of trickeryto achieve a political, financial, or legal purpose."

Last edited by joe_devore : 12 Jul 2017 at 08:17 PM.
joe_devore is offline   Reply With Quote
Reply


Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Forum Jump


All times are GMT +9. The time now is 06:11 PM.

 

Copyright EmailDiscussions.com 1998-2022. All Rights Reserved. Privacy Policy