Squirrelmail HTML Display after CPanel Upgrade

Old thread, I know, but just ran into this today. Upgraded a machine from 11.42 to 11.52. HTML email display is a disaster. Barely readable, as though some css somewhere is missing or not being referenced. This happens in IE and Firefox, have not tried any other browsers.

Has anyone else run into this? To the OP, did you ever find a solution?

Thanks,
-B

 

Good morning,

In the time since posting my original message last week, I've been able to get this worked out. The problem is not with the x3 or paper lantern themes, but with squirrelmail's default template set's css file (and any other template based off of it). Located here:

/usr/local/cpanel/base/3rdparty/squirrelmail/templates/default/css/default.css

Linked here are before


and after


screenshots of a Netflix email fur illustration purposes. These aren't necessarily extreme examples - many are much worse - but just what I grabbed at the moment.

Below are the changes I made. A couple of points before proceeding:

- Keep in mind that although I've tested these changes to the best of my ability using the two browsers on my system (IE and FF) and as many different html emails as I could find in my inbox, there is no guarantee this will work for everyone across all platforms in all instances.

- Unlike Roundcube, squirrelmail appears to use the same container to display message content whether it's a text or html message. Therefore compromises necessarily have to be made. I would have liked, for example, to use more left padding for text display. What is really needed, IMO, is a complete rewrite of the template and css. But, since there doesn't seem to be much of an outcry over this issue to begin with, this'll probably suffice for most.

Anyway...the changes:


line 111, change:
width: 80%;
to
width; 100%


lines 116 to 119, remove all of this:

table.table2 td {
padding-left: 2px;
padding-right: 2px;
}


lines 981 to 992, remove all of this:

div.readBody table {
width: 100%;

}

div.readBody table.table2 tr {
background-color: #ffffff /* __COLOR4__ */;
}

div.readBody table.table2 td {
padding: 10px;
width:100%;
}

Replace with this:

div.readBody table.table2 {
padding: 3px;
}


That's it.

Hope this is of some help.

-B