EmailDiscussions.com - CUSTOM CSS Tweaks for FastMail's New UI, using Firefox Extension Stylish!

EmailDiscussions.com (http://www.emaildiscussions.com/index.php)

- FastMail Forum (http://www.emaildiscussions.com/forumdisplay.php?f=27)

- - CUSTOM CSS Tweaks for FastMail's New UI, using Firefox Extension Stylish! (http://www.emaildiscussions.com/showthread.php?t=72816)

Quote:

Originally Posted by Gsptlsnz (Post 603030)

When posting code always select,

Disable smilies in text

or the code may not show correctly. :eek:

ooh... hmmm is some of the code above messed up??!!
I hadn't noticed.. ok I'l go GO take care of THAT this VERY SECOND!!! ;) ;)
:D:D:D

EDIT:
ooh ok I see two smiles above... ok smiles DISABLED for the OPENING POST!!
lol ;) ;) :D :D

I guess I thought the [code] tags were supposed to take care of such things.. I guess NOT! ?_?

i updated the code to comply with their changes that negated my previous code. i just added:

Code:

i.icon

to the icon names. :D

Quote:

Originally Posted by Gsptlsnz (Post 603051)

i updated the code to comply with their changes that negated my previous code. i just added:

Code:

i.icon

to the icon names. :D

hmm.. so I should replace what? with this new code... O_o
:confused::confused::confused:

i fixed my code on this page. you don't need to update... example:

/* 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;
}

etc. etc.

hmm... BUT I still need to update the master/root/Opening post...

should I replace ALL of the code entries of:
".icon "

with

"i.icon.icon"
???

EDIT1:
there well 11 of them in my Stylish profile's code...
The update seems to have worked for my code usage...
no errors detected and I didn't see anything irrruglar with FastMail loaded..

the GREAT thing about Stylish.. is any update to the Code Profile... NO RESTART needed to apply code changes :D :D lol!!

EDIT2:
ok the root post has been updated! :D

Gsptlsnz,

Back on the subject of my most requested/used feature from the classic UI..
The ever present folder counts "(NEW/Total)"... wheres NEW is always BOLD..

so far you have made a Stylish/CSS tweak to display a badge showing the
NEW count at all times even if zero.. I like! lol ;) thanks!

but I was just looking into the
SETTINGS --> MAIL --> "Folders" screen just now AND
I noticed that not only did it display the folder total(s)
BUT since just noticing I had a single new email in my
- "Gaming Forums" folder... it displayed NEW counts as well..!!!

SO! IT! CAN! BEEE! DONE!!!!!!! LOL ;) ;) ;) :eek: :D :D :cool: :cool:

It has the following format on the
Folder screen (Right margin aligned, stacked before the "EDIT" buttons):
"Total(NEW)"

Classic UI format is: "(NEW/Total)"
while I like the Classic UI display better it can be argued that,
that I'm just used to that format more.. lol ;)

But If you can only make a NEW script that display using the NEW UI's Folder Screen
type.. THEN I think I can LIVE with it lol ;p

So PLEASE AND THANKS!! loi ;) :D :D :D

ooh I just noticed something ELSE lol ;) :D
when I do a hover/mouse-over the display numbers, pop-up text is displayed!
Total = "Total messages"
NEW = "Unread messages"

I used the Firefox "Inspect Element"..
This is what I FOUND! lol ;)

Code:

<div class="v-ResourceItem-rightCol">

<span class="v-FolderItem-count">

<span title="Total messages" class="v-FolderItem-total">19</span>

<b title="Unread messages"> (1)</b>

</span>

</div>



.v-ResourceItem-rightCol

{

    display: table-cell;

    width: 0;

    padding-left: 10px;

}





.v-FolderItem-count

{

    display: inline-block;

    min-width: 100px;

}



.v-FolderItem-total

{

display: inline-block;

min-width: 70px;

text-align: right;

}

Its not clear how or where they are getting/calling the NEW counts from or maybe it is.. :/
other then maybe..
NEW = ".v-FolderItem-count"
and
Totals = ".v-FolderItem-total"
I guess?_?

see what you can do with what I found... ;) Please :D

This just shows the folder count

.v-FolderSource:after {
content: " " attr(title);
font-size: 12px;
}

Quote:

Originally Posted by Terry (Post 603066)

This just shows the folder count

.v-FolderSource:after {
content: " " attr(title);
font-size: 12px;
}

ehh yeah I already know, have tried that one...
its no good it displays a rather EXTREMELY cluttering message(s)...
right after the folder name...

"This Folder is empty"
or
"# messages"

......... oh I see your not proposing your mentioning,
rechecked the code he had me put in the opening post...

yeah.. I guess I should delete that one and move its cousin code up to the top lol ;)

I guess I will go do that NOW! DONE!

the file count is done with javascript, so i doubt it's possible to show new/total.

https://www.fastmail.com/static/ajax...ap-283cbedb.js

https://www.fastmail.com/static/ajax...se-9a2e3082.js

Quote:

Originally Posted by Gsptlsnz (Post 603072)

that's javascript, so i doubt it's possible to show new/total.

https://www.fastmail.com/static/ajax...ap-283cbedb.js

https://www.fastmail.com/static/ajax...se-9a2e3082.js

hmm... X( the code looked similar.... :/

how is this JS???

Quote:

.v-FolderItem-count
{
display: inline-block;
min-width: 100px;
}

.v-FolderItem-total
{
display: inline-block;
min-width: 70px;
text-align: right;
}

it looks the same as any of the code you created... :/

I meant the count display is done with js. and the css code doesn't show the counting.

I suggest writing the developers and asking them to implement the changes that you want. They're already mucking with their code and now that we have to pay they should give us what we want.

I'm going to add a few more cosmetic tweaks and then I'm done.

Quote:

Originally Posted by Gsptlsnz (Post 603074)

yeah I agree I have put i two or three requests since last year..

ooh? :/ so your weren't planning on working on tweaks forever..
lol ehh yeah... ok sry.. thanks for the ones you have made they made my week! :D :D

A small cosmetic tweak that makes the folders look a bit better...

Code:

/* Affects all folder icons */

i.icon.icon-folder {

color:turquoise;

text-shadow:1px 1px 1px #000;

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;

}

Quote:

Originally Posted by Gsptlsnz (Post 603072)

the file count is done with javascript, so i doubt it's possible to show new/total.

https://www.fastmail.com/static/ajax...ap-283cbedb.js

https://www.fastmail.com/static/ajax...se-9a2e3082.js

in that case GreaseMonkey JavaScript then.. lol ;)

on another note... for the following code of yours..
could you please to a tweaked version?
to add instead of or as an addition
a full solid border around the whole box and not just a shadow??

Quote:

/* Box at screen bottom that shows space left */
.v-UsageInfo
{
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;
}

nvm, I did a bit googling.. ;) and found...
www.w3schools.com -- The CSS Box Model

and

Quote:

border: 5px solid green;

inserted it in place of "color:black;"

Wahoo it worked :D :D
so I will add this tweaked version to your code list :D : D ;)
ok, done.. I have added the tweaked versions to the
opening post as follows and tweaked the comment of the original to be more verbose.

Quote:

/* Box around "MAIL Storage Quota" at bottom left of the screen. */
.v-UsageInfo
{
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;
}

/* 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-UsageInfo
{
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;
}

Quote:

Originally Posted by joe_devore (Post 603216)

inserted it in place of "color:black;"

In place of, or in addition to? border: and color: are two different things.

- bruce