meta

CSS to improve Outlook’s readability

ltchinLeave a comment

Now that I’m a professor[1], my life really is just emails these days. This makes it a problem when Outlook is the default and your university has banned email forwarding and has shut down POP, IMAP and SMTP, preventing you from using third party clients. Outlook is really unreadable to me, and I realized that it was preventing me from processing my emails in a timely manner.[2]

It’s extremely difficult to find anyone else who has done similar because most Google queries for “outlook CSS” or “outlook extension” gives results from people who write advertising emails for a living struggling with getting the CSS right for their mailer. I eventually found this blogpost which, while it did not work out of the box for me, gave me the confidence to go mucking around deep within the Outlook internals. One point of pride for me of my new website is that I am no longer using any CSS frameworks like Bootstrap, meaning I now understand all of the CSS that is going in there! And so, I can now use my hasty hacky knowledge to help you.

CSS is below the cut. I used this extension to overlay my CSS. I’m sure there’s a better way to force my changes to happen rather than liberally sprinkling !important clauses everywhere, but honestly I’m already happy to do this much reverse engineering out of Microsoft’s obfuscated mess. A lot of the colors may also be specific to the theme that I was working in, but the difficult part is extracting the class names, not the hex codes.

  1. I know that I really owe y’all a post about this, but tl;dr, graduated MIT, now at UT Austin ECE, please apply and contact me if you like the research I do. ↩︎

  2. A quick search proves I’m not the only one with this problem, heh ↩︎

/************************
* UI ELEMENTS
*************************/

#LeftRail {
  display: none;
}

/* Remove top heading */
/*.BeA01.bkYAr.rv6Vd {*/
/*  display: none;*/
/*}*/

/************************
* EMAIL BACKGROUND COLORS
*************************/

/* Read emails */
.zKDWD.YbB6r.IKvQi.IjQyD.EhiOs.wZij3.G1NES:not(.cSOXK) {
  background-color: var(--themeLighterAlt) !important;
}

/* Unread emails */
.cSOXK {
  /*border-left: #d247260f !important;*/
  background-color: white !important;
}

/* Flagged emails */ 
.iZbPU {
  background-color: #FDFD81 !important;
}

/* Selected email */
.epBmH.EhiOs {
  background-color: #EFB9B2 !important;
}

/************************
* TEXT COLORS OF UNREAD MESSAGES
*************************/

/* Sender text of messages */
.zKDWD.YbB6r.IKvQi.IjQyD.EhiOs.wZij3.G1NES:not(.cSOXK) .dOu3l, {
  color:#EFB9B2 !important;
}

/* Subject Text */
.zKDWD.YbB6r.IKvQi.IjQyD.EhiOs.wZij3.G1NES:not(.cSOXK) .V_DOr {
  color:#EFB9B2 !important;
}

/* Message text */
.zKDWD.YbB6r.IKvQi.IjQyD.EhiOs.wZij3.G1NES:not(.cSOXK) .YH9yX,.tAtdo {
  color:#EFB9B2 !important;
}

/* Message text */
.zKDWD.YbB6r.IKvQi.IjQyD.EhiOs.wZij3.G1NES:not(.cSOXK) .C7UcD {
  color:#EFB9B2 !important;
}

Leave a comment